javascript - Show/Hide div send all data to database -
i have show/hide div. , running couple issues. using codeigniter way.
first : when select real-estate div shows. if select service, real-estate div won't hide. (service has no div).
second : if select real-estate , fill out form, , change mind , select automobile , fill out form send database, fields real-estate , automobile database. not want.
third : there different approach if wanna add more categories , more divs show/hide?
<select id="catid_1" name="catid_1"> <option value=""></option> <option value="5">real-estate</option> <option value="8">automobile</option> <option value="10">service</option> </select> <!--auto--> <div id="8" class="forms"> energie : <select name="energy"> <option></option> <option value="gasoline">gasoline</option> <option value="diesel">diesel</option> <option value="gpl">gpl</option> <option value="electric">electric</option> <option value="hybrid">hybrid</option> </select><br /> transmission : <select name="tans"> <option></option> <option value="manuel">manuel</option> <option value="automatic">automatic</option> </select><br /> miles : <input type="text" name="mile"/><br /> year : <input type="text" name="year"/><br /> </div> <!--realestate--> <div id="5" class="forms"> room : <input type="text" name="room"/><br /> surface : <input type="text" name="surface"/><br /> </div> <!--end tech--> $(function() { $(".forms").hide(); $("#catid_1").change(function() { var e = $(this).val(); if(e == '8' || e == '5') { $(".forms").hide().parent().find('#' + e).show().addclass('form-active'); } }); // bind submit $('#submit').click(function(e){ e.preventdefault(); // parse data displayed div. var resolve_data = function() { var output = {}; // here place acceptable fields. $('.form-active input, .default input').each(function() { output[$(this).attr('name')] = $(this).val(); }); return output; }; // submit form here. $.ajax({ url: '/echo/json/', type: 'post', datatype: 'json', data: resolve_data(), beforesend: function(xhr, settings){ // before sending, check data. alert(settings.data); }, complete: function(xhr, textstatus) { //called when complete }, success: function(data, textstatus, xhr) { //called when successful }, error: function(xhr, textstatus, errorthrown) { //called when there error } }); }); });
first: service show/hide not working because you're putting conditional on id:
if(e == '8' || e == '5') { // <<-- remove conditional $(".forms").hide().parent().find('#' + e).show().addclass('form-active'); } second: when you're doing update, check value of drop down box , update fields belong choice. form should sending along value of option, that's not hard do. instance, if select value 5, update room , surface fields in database. don't try clear form when switching choices, it's safer in end.
if insist on doing front end, put actual form in there , .reset() when changing options.
third: probably, seems ok no? not happy it?
Comments
Post a Comment