CODEWITHSUNDEEP
phpformsjquerycheckbox
Joe D
Joe D

Reputation: 33

Submitting a form by selecting a checkbox, and having results display within a specified div

I'm trying to produce a form whereby when a check box is selected, the form is instantly submitted and results are displayed into a div located on the same page.

Here's the code I'm trying so far, but not having any luck:

<form action="end.php" method="get">
<input name="yourcheckbox" id="yourcheckbox" value="ten" type="checkbox"  onClick="testResults(this.form)"/>
    </form>

<script type="text/javascript">
function(form) {
    $.post($(this).attr("action"), $(this).serialize(), function(html) {
        $("#someDiv").html(html);
    });
    return false; // prevent normal submit
};
</script>

<div id="someDiv">The results from the submitted form appears here</div>

I also need to use multiple check boxes with different values

Any suggestions of how to go?

Upvotes: 2

Views: 371

Answers (3)

Michael Dillon
Michael Dillon

Reputation: 1037

Part one of your question:

Your original onClick handler was trying to call a function that didn't exist, testResults(). Instead of having an onClick handler in the input tag, I would suggest registering a click handler through a class or div id:

$('#yourcheckbox').click(function(eventObj) {
    // grab the form element by traversing the eventObj parent elements
    var form = eventObj.parent(':form');
    var actionUrl = form.attrs('action');

    // now submit your form here
    $.post(actionUrl, form.serialize(), 
        function (responseData) {
              $("#someDiv").html(responseData);            
        }
    );
});

Part two of your question:

You have several options here:

  1. Each checkbox has its own unique id (not a great idea because each checkbox would need a click event registered.
  2. Name each checkbox the same like this: name="mycheckbox[]". Not a bad solution, but if you don't need the values of all the checkboxes in an array, then you don't need this.
  3. Use a class for all the checkbox classes: class="mycheckboxes then your jquery click register looks like this: $('.mycheckboxes).click(function (....

Upvotes: 3

SomeShinyObject
SomeShinyObject

Reputation: 7821

You need to actually pass the form

<form action="end.php" method="get" id="FooForm">
<input name="yourcheckbox" id="yourcheckbox" value="ten" type="checkbox" />
</form>

<script type="text/javascript">
function testResults(form) {
    $.post(form.attr("action"), form.serialize(), function(html) {
        $("#someDiv").html(html);
    });
    return false; // prevent normal submit
}
$("yourcheckbox").click(function() {
    testResults($("#FooForm"));
});
</script>

<div id="someDiv">The results from the submitted form appears here</div>

Upvotes: 0

Jon Taylor
Jon Taylor

Reputation: 7905

Currently your function hs no name and expects a parameter to be passed to it, but again you are not calling your function from anywhere

Functions should be in the following format

function functionName(param1, param2, ...) {
    //body of function
}

To call a function you will need to use

functionName(param1, param2, ...);

You can have anonymous functions, similar to what you have, however these would need to be passed to another function, otherwise they cannot be used, for example you might use the anonymous function as a callback function on some request or as an on change handler etc.

Now you will need to bind to some sort of event on your checkbox, this could be some sort of change event which then allows you to call the function.

Lastly, using $(this) inside the function currently doesnt mean anything, if you are actually passing the form in as a parameter to the function you should be using the name of the parameter instead of $(this), in your case form.

Upvotes: 2

Related Questions