CODEWITHSUNDEEP
javascriptjquery
TMC
TMC

Reputation: 8154

How to use jQuery to submit a form and specify which submit button to use

Suppose a form has multiple submit buttons:

...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...

I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.

I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.

I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.

Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.

Upvotes: 2

Views: 682

Answers (6)

zequinha-bsb
zequinha-bsb

Reputation: 719

My 2c:

... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>   
...

function deleteFoo() {
    do-your-modal-whichever-way-you-want;
    if confirmed, 
         $('#form-id').attr('action','your-action-for-delete-foo');
         $('#form-id').submit();
    else-just-return
}


function deleteBar() {
    do-your-modal-whichever-way-you-want;
    if confirmed, 
         $('#form-id').attr('action','your-action-for-delete-bar');
         $('#form-id').submit();
    else-just-return
}


function allowEdit() {
    whatever
}

Upvotes: 0

RobG
RobG

Reputation: 147563

I think you are making it too complex, you can do something as simple as:

<form >
  <input name="foo" value="foo">

  <button name="sub0" value="sub0" onclick="
    return window.confirm('sure?');
  ">submit 0</button>

  <button name="sub1" value="sub1" onclick="
    return window.confirm('sure?');
  ">submit 1</button>

</form>

If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.

Upvotes: 0

Joshua Davis
Joshua Davis

Reputation: 1056

The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:

<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>

var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
    //Submit the form here
}
else{
    alert("Not deleted!");
}

Upvotes: 0

Bartek
Bartek

Reputation: 15609

First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:

 <form id="myform">
   <button type="submit" value="delete">Delete</button>
   <button type="submit" value="Edit">Edit</button>
</form>

--

$(function() {
  $("form#myform button[type='submit']").click(function(ev) {
    ev.preventDefault();
    if (confirm("you sure")) {
        var action = $(ev.currentTarget).val();
        console.log(action);    
    }

   });
});

JSLint is here: http://jsfiddle.net/r48Cb/

Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.

Upvotes: 0

Avitus
Avitus

Reputation: 15978

Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do

Upvotes: 0

Shomz
Shomz

Reputation: 37711

Check out the JS confirm function and put it as an onclick event.

You have a nice example here.

Upvotes: 2

Related Questions