jQuery show hide select menus based on serialized hash - php

Question

I am trying to get select menus show hide by using ajax and serialised hashes. I had this system working last night but I changed the #selector from a form to a div and suddenly its stopped running. I had to broaden the form for additional data on post and did not want to serialise all the data at once for this as it would be additional strain on the system.
The page somewhat works as expected. It shows the first select, allows me to select an option, I can see the AJAX posting but the hash value is empty which I believe is breaking the PHP above. I cant figure out why the hash is posting empty. I assume its not getting the value from the select but I cant work out why..
If possible can you please point out where I am going wrong?
<section id="add">
<div class="container">
<form method="post">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1"></select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
$(document).on('change', '#selector', function(e) {
ajax_post(this);
});
ajax_post();
})(jQuery);
function show_hide_select(select){
if ($(select).find('option').length < 1) {
$(select).hide();
} else {
$(select).show();
}
}
function ajax_post(element=null) {
var frm = $('#selector');
if (element != null) {
// Reset selections
var found=false;
frm.find('select').each(function(e){
if (found==true) {
$(this).hide().find('option:selected').prop("selected", false)
}
if (element==this) found=true;
});
}
$.ajax({
url: '?ajax=1',
type: "POST",
data: frm.serialize(),
dataType: 'json',
success: function (data) {
if (data.box1hash != frm.find('.box1hash').val()) {
frm.find('.box1').html(data.box1?data.box1:'');
frm.find('.box1hash').val(data.box1hash);
show_hide_select(frm.find('.box1'));
}
if (data.box2hash != frm.find('.box2hash').val()) {
frm.find('.box2').html(data.box2?data.box2:'');
frm.find('.box2hash').val(data.box2hash);
show_hide_select(frm.find('.box2'));
}
if (data.box3hash != frm.find('.box3hash').val()) {
frm.find('.box3').html(data.box3?data.box3:'');
frm.find('.box3hash').val(data.box3hash);
show_hide_select(frm.find('.box3'));
}
if (data.box4hash != frm.find('.box4hash').val()) {
frm.find('.box4').html(data.box4?data.box4:'');
frm.find('.box4hash').val(data.box4hash);
show_hide_select(frm.find('.box4'));
}
if (data.box5hash != frm.find('.box5hash').val()) {
frm.find('.box5').html(data.box5?data.box5:'');
frm.find('.box5hash').val(data.box5hash);
show_hide_select(frm.find('.box5'));
}
}
});
}
</script>

Answer 1

Contrary to my earlier comments, a form tag cannot be nested within another form tag. jquery serialize() only works on forms, so unfortunately it's not possible to focus it on a div component of the form. Instead however you can serialize the whole form as a string, and then extract the subsection of that string for reduced ajax posting. Snippet below with inline comments...
$('form').on({
'change':function(e){
e.preventDefault();
var dats = $(this).serialize(); // serialize the whole form into a string
var pico = dats.indexOf('&event_name='); // get the index of the end point of the desired data
var newDats = dats.slice(0 , pico); // get the edited section for ajax submission
$('#results').text(dats+' '+newDats);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="add">
<div class="container">
<form method="post" id='bob'>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 1: Instance Select</strong></h3>
</div>
<div id="selector">
<div class="panel-body">
<div class="col-md-6">
<select class="form-control box1" name="box1">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
<input name="box1hash" class="box1hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box2" name="box2"></select>
<input name="box2hash" class="box2hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box3" name="box3"></select>
<input name="box3hash" class="box3hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box4" name="box4"></select>
<input name="box4hash" class="box4hash" type="hidden" />
</div>
<div class="col-md-6">
<select class="form-control box5" name="box5"></select>
<input name="box5hash" class="box5hash" type="hidden" />
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Step 2: Event Details</strong></h3>
</div>
<div class="panel-body">
<input name="event_name" type="text" class="form-control" />
</div>
</div>
<input type="submit"/>
</form>
</div>
<p><tt id="results"></tt></p>