CODEWITHSUNDEEP
javascriptjqueryhtmlforms
mavix
mavix

Reputation: 2572

jQuery (or just JS) choosing from multiple form submit buttons in onSubmit function

I've got a form that has multiple submit buttons. One for changing data in a database, one for adding, and one for deleting. It looks like this:

<form action="addform.php" method="post" id="addform" onSubmit="return validate(this)">
<select name="listings" id="listings" size="1" onChange="javascript:updateForm()">
<!-- Here I have a php code that produces the listing menu based on a database query-->
</select>
<br />
Price: <input type="text" name="price" id="price" value="0"/><br />
Remarks:    <textarea name="remarks" wrap="soft" id="remarks"></textarea><br />
<input type="submit" value="Update Database Listing" name="upbtn" id="upbtn" disabled="disabled"/>
<input type="submit" value="Delete Database Listing" name="delbtn" id="delbtn" disabled="disabled"/>
<br />
<input type="submit" value="Add Listing to Database" name="dbbtn" id="dbbtn"/>
<input type="button" value="Update Craigslist Output" name="clbtn" id="clbtn" onClick="javascript:updatePreview();"/>
</form>

There are actually more elements in the form, but that doesn't matter. What I want to know is, for my validation method, how can I check which submit button has been clicked?

I want it to do the following:

    function validate(form){
      if (the 'add new listing' or 'update listing' button was clicked'){
        var valid = "Are you sure the following information is correct?" + '\\n';
        valid += "\\nPrice: $";
        valid += form.price.value;
        valid += "\\nRemarks: ";
        valid += form.remarks.value;
        return confirm(valid);}
      else {
                    return confirm("are you sure you want to delete that listing");
      }
    }

I assume there must be some way to do this relatively easily?

Upvotes: 3

Views: 1206

Answers (5)

Sonicd300
Sonicd300

Reputation: 2049

You can use ajax submission with jQuery, you can try something like this:

$('form#addform input[type="submit"]').on('click',function(e){
        e.preventDefault();
        var current = $(this); //You got here the current clicked button
        var form = current.parents('form');

        $.ajax({
            url:form.attr('action'),
            type:form.attr('method'),
            data:form.serialize(),
            success:function(resp){
                //Do crazy stuff here
            }
        });
});

Upvotes: 0

cplusplus
cplusplus

Reputation: 614

Why don't you set a global variable specifying which button was last clicked? Then you can check this variable in your validate method. Something like:

var clicked;

$("#upbtn").click(function() {clicked = 'update'});
// $("#delbtn").click(function() {clicked = 'delete'});
// ... 

function validate(form) {
    switch(clicked) {
    case 'update':
        break;
            // more cases here ...
    }
}

Upvotes: 2

pipalia
pipalia

Reputation: 911

You could have a hidden field on a form and set the value of that field on clicking the button and then pick it up in your validation routine. You can use jquery to achieve this, let me know if you require an example.

Upvotes: 0

FreeCandies
FreeCandies

Reputation: 1113

You can, for example, attach a click event to every submit button that will save a pointer to it in a variable or mark it with a specific attribute / class (it that case you will have to remove that marker from all other submit buttons in the event handler) and then in the submit callback you will know which one was clicked

Upvotes: 1

Nathan Cox
Nathan Cox

Reputation: 1349

I think it's easier to just use a click event on each button and handle it individually.

$(function() {
    $('input[name=someName]').click(someFunc);
});

function someFunc() {
    // Your validation code here
    // return false if you want to stop the form submission
}

Upvotes: 0

Related Questions