Forms have an action
attribute to specify where (for example a .php
file) to post to. Do <input>
elements have the action
attribute?
action
for <input>
?div
changes when the checkboxes are ticked (I don't want a whole page reload). How should I go about doing this?I am still drafting the code at this stage, but an example can be seen here.
Appreciate your suggestions!
Based on comments it really sounds like you want something to be sent when any number of checkboxes might be changed.
Add an event handler to all of them, serialize() the form and post it whenever any one of them changes
var $form =$('#myForm');
$form.find(':checkbox').change(function(){
var formData = $form.serialize();
$.post('/someFile.php', formData, function(response){
// do something with response
}).fail(function(){
alert("Oops something bad happened');
});
});
Use jQuery AJAX Methods:
AJAX is the art of exchanging data with a server, and update parts of a web page - without reloading the whole page.
EX:
$(document).ready(function(){
$("button").click(function(){
// You can call ajax on any event of html element like checkbox checked, dropdown changed
$.ajax({url: "demo_test.txt", success: function(result){
$("#div1").html(result);
}});
});
});
$(document).on('change', '#checkboxid', function() {
if ($(this).is(':checked')) {
$('#container').load('pages/somephpfile.php');
}
});
Use .load()
on change of checkbox
Also try
$(document).on('change', '#checkboxid', function() {
$.ajax({
type: 'POST',
url: 'somephp.php',
dataType: "html",
success: function(data) {
$('#container').html(data) //load the data from somephp.php here
}
});
});