0

I have 2 submit buttons in an HTML form.

How can I know which submit button has triggered the JavaScript function?

<script language="javascript" type="text/javascript">
    function verifyData(formdata) {

        // Here I want to know from which submit button this function is triggered

        // I can't use type button instead of submit

        // I can't use onclick handler

        //  I can't use JQuery.. I want to do only with                 javascript                        

    }
</script>

<form onsubmit="verifyData(this);" method="post">
    <input type="submit" value="submit1">
    <input type="submit" value="submit2">
</form>

<button value="delete row" id="but1" onclick="disps()">delete row</button>

I want to do different actions based on the different submit buttons clicked.

1
  • What different actions do you want to perform? You could simply check the value on the server if you give the input the same name <input type="submit" name="submit" value="submit1"> Commented Aug 5, 2011 at 14:52

4 Answers 4

1

It is not possible to check the button clicked through the onsubmit event. Instead move the call to verifyData() to the onclick handler of each button. Use return in the onclick call to cancel submission if false is returned by verifyData()

<script language="javascript" type="text/javascript">
    function verifyData(button) {
        // validate
        switch (button.value) {
            case "submit1":
                // do somehting
                break;
            case "submit2":
                // do somehting
                break;

            // ...
        };

        // submit the form
        return true;
    }
</script>

<form method="post">
    <input type="submit" value="submit1" onclick="return verifyData(this);">
    <input type="submit" value="submit2" onclick="return verifyData(this);">
</form>
Sign up to request clarification or add additional context in comments.

Comments

0

How about putting an onclick event handler on both buttons which will set a variable to say which button was clicked? like so:

<script language="javascript" type="text/javascript">
    function verifyData(formdata) {
        alert(btnClicked);
        // Here I want to know from which submit button this function is triggered

        // I can't use type button instead of submit

    }

    var btnClicked = 0;


    function setSubmit(which) {
        btnClicked = which;  return true;
    }
</script>

<form onsubmit="verifyData(this);" method="post">
    <input type="submit" value="submit1" onclick="return setSubmit(1);">
    <input type="submit" value="submit2" onclick="return setSubmit(2);">
</form>

1 Comment

thats fine... But I can't use the onclick handler to my applicn.
0

Are you allowed to use the jQuery library?

If you can using this you can easily bind to each submit button based on an id.

For example:

<form id="form1" method="post">
    <input type="submit" value="submit1" id="submit1">
    <input type="submit" value="submit2" id="submit2" >
</form>

<script type="text/javascript">
    $("#submit1").click(function(e)
    {
     // Do stuff when 1 is clicked.
     $("#form1").submit();
    });
    $("#submit2").click(function(e)
    {
     // Do stuff when 2 is clicked.
     $("#form1").submit();
    });    
</script>

you could also have the buttons as a type of button to avoid any issues, but you should be able to simply return false; to stop the button of type submit from... submitting

Comments

0

Here is how I would do it... Firstly I would use jQuery so you must include that in your document like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

It would also mean your HTML can be simplified to:

<form method="post">
    <input type="submit" value="submit1"/>
    <input type="submit" value="submit2"/>
</form>

Then you can use jQuery:

<script>
    // When the document is ready
    $(function(){
        // Action performed when a submit button in the form is clicked
        $("form[type='submit']").click(function(e){

            // Get the value attribute
            var val = $(this).val(),
            validation_has_passed = false;

            // If it is submit1
            if(val == "submit1") {
                // Validate submit 1
                validation_has_passed = true;

            // If it is submit2
            } else if(val == "submit2") {
                // Validate submit 2
                validation_has_passed = true;

            }

            // If all validation is OK submit the form
            if(validation_has_passed === true) {
                $("form").submit();
            }

            // Ensure pressing these buttons doesn't submit the form
            e.preventDefault();

        });
    });
</script>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.