Example of problem:
I have html:
<form action="GET">
<button onclick="$(this).toggleClass('selected')">2000</button>
<button onclick="$(this).toggleClass('selected')">2001</button>
<button onclick="$(this).toggleClass('selected')">2002</button>
<button onclick="$(this).toggleClass('selected')">2003</button>
<button onclick="$(this).toggleClass('selected')">2004</button>
<button onclick="$(this).toggleClass('selected')">2005</button>
<button onclick="$(this).toggleClass('selected')">2006</button>
<button onclick="$(this).toggleClass('selected')">2007</button>
<input type="submit" value="submit" />
</form>
and part of the sample database:
year | title | ...
2000 | film1
2000 | film2
2002 | film3
2001 | film4
.... | .....
I need to search the database records based on selected fields.
You cant just do that with a class. When sending a form, you have to make sure the right input elements with the name attributes are sent. What I would do is remove the inline JS and add to the toggle class to disable/enable a corresponding input. Try this out:
<form action="submit.php" method="post">
<button type="button">
2000
<input type="hidden" name="options[]" value="2000" disabled>
</button>
<button type="button">
2001
<input type="hidden" name="options[]" value="2001" disabled>
</button>
<button type="button">
2002
<input type="hidden" name="options[]" value="2002" disabled>
</button>
<button type="button">
2003
<input type="hidden" name="options[]" value="2003" disabled>
</button>
<input type="submit" value="submit"/>
</form>
<script>
$('button').click(function () {
$(this).toggleClass('selected').promise().done(function () {
if ($(this).hasClass('selected')) {
$(this).find('input').prop('disabled', false);
} else {
$(this).find('input').prop('disabled', true);
}
});
});
</script>
your submit.php will have results like this:
array (size=1)
'options' =>
array (size=2)
0 => string '2000' (length=4)
1 => string '2002' (length=4)