How to solve validation using multiple buttons in a form

Question

I have a form, with a number of textboxes which a user can fill in. At the bottom of the form I have two buttons. One for canceling and one for submitting. Like the example below

<form action='bla.php' method='post'>
    <input type='text' name='someTextField1'>
    <input type='text' name='someTextField2'>
    <input type='text' name='someTextField3'>
    <input type='submit' name='submit'>
    <input type='submit' name='cancel'>
</form>

And I have a js function that checks the fields for their data which I used to use for both buttons. I therefor refer to the js function in the form as below:

<form action='bla.php' method='post' name='form' onSubmit='return CheckFields()'>

The js function looks like this:

function CheckFields() {
    var formname = "form";
    var x = document.forms[formname]["someTextField1"].value;
    var result = true;
    var text = "";
    if (x == null || x == "") {
        text += "Dont forget about the someTextField1.\n";
        result =  false;
    }

    if(!result)
        alert(text);
    return result;
}

Now I want this js function to only run when using the submit and not the cancel button. When I try to move the call to the function to the submit button as below it doesn't work:

<input type='submit' name='submit' onClick='return CheckFields()'>
<input type='submit' name='cancel'>

Why? What is the smartest way of solving this? Should I leave the call to CheckFields() in the form and check within the script what button was clicked or should I remake the function to somewhat work with a button instead? Anyone have an idea or an example?

I think it is because you have both listed as submit buttons... — M. Laing, Mar 13 '15 at 13:22

score 2 · Answer 1 · answered Mar 13 '15 at 13:21

2

replace <input type='submit' name='cancel'> by <input type='button' name='cancel'>.
Your Version actually has two submit-buttons, both of which will submit the form.

answered Mar 13 '15 at 13:21

Burki

1,188
19
28

Both buttons is sending data back to bla.php. How do I use a "button" to send data back? That would be super :) – Dave Mar 13 '15 at 13:43
You could either use the onClick-Event of your submit-Button to call the form, on success `form.submit();` or you could try this approach:[http://stackoverflow.com/questions/20235611/multiple-submit-buttons-in-html-form], where the JavaScript tests which button was clicked. – Burki Mar 13 '15 at 13:50

score 1 · Answer 2 · answered Mar 13 '15 at 13:52

First at all, it's not needed have submit button on a form if you want to use javascript to check all the fields before submitting.

I think the smartest way of doing it will be as follow:

Your form (without action, submit button, and method. Only identifing each component with id's):

<form id="formId">
    <input type='text' id="text1">
    <input type='text' id="text2">
    <input type='text' id="text3">
    <input type='button' id="accept">
    <input type='button' id="cancel">
</form>

Your javascript (you have to have jQuery added):

jQuery("#formId").on("click", "#accept", function(){  //listen the accept button click

    if(CheckFields()){ //here you check the fields and if they are correct
                       //then get all the input values and do the ajax call sending the data
        var text1 = jQuery("#text1").val();
        var text2 = jQuery("#text2").val();
        var text3 = jQuery("#text3").val();

        jQuery.ajax({
            url: "bla.php",
            method: "POST",
            data: {
                "someTextField1":text1, //In your example "someTextField1" is the name that the bla.php file is waiting for, so if you use the same here, it's not needed to change anything in your backend.
                "someTextField2":text2,
                "someTextField3":text3
            },
            success: function(){
                //here you can do whatever you want when the call is success. For example, redirect to other page, clean the form, show an alert, etc.
            }
        });
    }

});

jQuery("#formId").on("click", "#cancel", function(){ //here listen the click on the cancel button

 //here you can clean the form, etc
});

function CheckFields() {        //here I did a little change for validating, using jQuery.
    var x = jQuery("#text1").val();
    var result = true;
    var text = "";
    if (x == null || x == "") {
        text += "Dont forget about the someTextField1.\n";
        result =  false;
    }

    if(!result)
        alert(text);
    return result;
}

I hope it helps you!

score 1 · Accepted Answer · answered Mar 13 '15 at 13:55

Watch this sample http://jsfiddle.net/355vw560/

<form action='bla.php' method='post' name="form">
<input type='text' name='someTextField1'>
<input type='text' name='someTextField2'>
<input type='text' name='someTextField3'>
    <br/>
<input type='submit' name='submit' onclick="return window.CheckFields()">
<input type='submit' name='cancel' value="cancel" onclick="return false;">

anyway it's always better to use jquery or event listeners instead of managing events directly in the dom.

The function didnt worked because its scope was the element, if u specify window as context your function works.

score 0 · Answer 4 · answered Mar 15 '18 at 11:23

I handle it with this way , Hope it will help.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
    <form method="post" action="/">
        <div class="container" style="background: #efefef; padding: 20px;">
            <label>Encrypt and decrypt text with AES algorithm</label>
            <textarea name="inputText" id = "inputText" rows="3" cols="100" placeholder="Type text to Encrypt..." maxlength="16" ></textarea>
            <br>
            <br>
            <textarea name="inputKey" id = "inputKey" rows="1" cols="100" placeholder="Type key to Encrypt\Decrypt text with..." maxlength="16"></textarea>
            <br>
            <br>
            <label>SBox :</label>
            <div>
                <div class="s-box-radios">
                    <ul class="sbox">
                        <li>
                            <label>SBox 1
                                <input id="sbox1" name="sboxOption" type="radio" value="option1"  required/>
                            </label>
                        </li>
                        <li>
                            <label>SBox 2
                                <input id="sbox2" name="sboxOption" type="radio" value="option2" />
                            </label>
                        </li>
                        <li>
                            <label>SBox 3
                                <input id="sbox3" name="sboxOption" type="radio" value="option3" />
                            </label>
                        </li>
                        <li>
                            <label>SBox 4
                                <input id="sbox4" name="sboxOption" type="radio" value="option4" />
                            </label>
                        </li>
                    </ul>
                </div>
                <div class="s-box-display">
                    <textarea rows="5" cols="10"></textarea>
                </div>
            </div>
            <div class="clear"></div>
            <br>
            <label>Result of Decryption in plain text</label>
            <textarea name="inputCipher" rows="3" cols="100" placeholder="Encrypted Texts..." name="decrpyted"></textarea>
            <br>
            <input type="submit" value="Encrypt" name="Encrypt" id ="encrypt" onclick="valEncrypt()" />
            <input type="submit" value="Decrypt" name="Decrypt" id ="decrypt" onclick="valDncrypt()" />
        </div>
    </form>

  <script>
    function valEncrypt()
    {
        var inputText = document.getElementById('inputText');
        var inputkey = document.getElementById('inputKey');

        if (inputText.value.length <16)
          {
            doAlert(inputText);
            return false;
          }
        else
          {
            removeAlert(inputText);
          }
        if (inputkey.value.length <16)
          {
            doAlert(inputkey);
            return false;
          }
        else
          {
            removeAlert(inputkey);
          }


    }
    function  valDncrypt()
    {
       var inputkey = document.getElementById('inputKey');
       if (inputkey.value.length <16)
          {
            doAlert(inputkey);
            return false;
          }

      alert('!Success');
    }
    function doAlert(element){
      element.style.border = "1px solid #FF0000";
    }
    function removeAlert(element){
      element.style.border = "1px solid #000000";
    }

  </script>
</body>
</html>

How to solve validation using multiple buttons in a form

4 Answers4