2 Buttoned Form

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • TheServant
    Recognized Expert Top Contributor
    • Feb 2008
    • 1168

    #1

    2 Buttoned Form

    Hi guys,
    I am very much a beginner with javascript so count me in with the n00bs here!

    I have a form:
    [HTML]<form action="trainin g_form.php" method="POST" onsubmit="retur n check_form()">
    <input name="var1" type="text" value="0" />
    <input name="var2" type="text" value="0" />
    <input name="var3" type="text" value="0" />
    <input name="var4" type="text" value="0" />
    <input name="recruit" type="submit" value="Recruit" />
    <input name="disband" type="submit" value="Disband" />
    </form>
    [/HTML]

    As you can see, it has two submit buttons. What I want to do is validate the data that is about to be submitted, but I need to determine which button is pressed using javascript. Here is my javascript so far:

    [HTML]<script type="text/javascript">
    function check_form()
    {
    if ( typeof( window[ 'recruit' ] ) != undefined )
    {
    if ( document.traini ng_form.var1.va lue + document.traini ng_form.var2.va lue + document.traini ng_form.var3.va lue + document.traini ng_form.var4.va lue == 0 )
    {
    alert('You must enter the number of units to train.');
    return false;
    }
    else if ( isNaN(document. training_form.v ar1.value) || isNaN(document. training_form.v ar2.value) || isNaN(document. training_form.v ar3.value) || isNaN(document. training_form.v ar4.value) || )
    {
    alert('You may only use numbers.');
    return false;
    }
    else if ( isDigit(documen t.training_form .var1.value) || isDigit(documen t.training_form .var2.value) || isDigit(documen t.training_form .var3.value) || isDigit(documen t.training_form .var4.value) )
    {
    alert('You may only use whole numbers.');
    return false;
    }
    else
    {
    return true;
    }
    }
    }
    </script>[/HTML]

    At the moment the form still runs regardless of whether recruit or disband is pressed. I think it's because the form is sending a value for recruit when disband is pressed. How can I text if it was recruit or disband that was pressed? I do not want to make many files, but have a simple if statement to distinguish. Also, I have used the isDigit() function. I couldn't get it to work before, so can you tell me if it exists or if I am using it wrong?
  • pronerd
    Recognized Expert Contributor
    • Nov 2006
    • 392

    #2
    Originally posted by TheServant
    I need to determine which button is pressed using javascript.
    The simplest way to do this would be to move the event to the buttons instead of the form. Then have the function being called test the value being passed.

    [HTML]<form action="trainin g_form.php" method="POST" >
    <input name="var1" type="text" value="0" />
    <input name="var2" type="text" value="0" />
    <input name="var3" type="text" value="0" />
    <input name="var4" type="text" value="0" />
    <input name="recruit" type="submit" value="Recruit" onClick="return check_form('Rec ruit')"/>
    <input name="disband" type="submit" value="Disband" onClick="return check_form('Dis band')"/>
    </form>
    [/HTML]




    Originally posted by TheServant
    At the moment the form still runs regardless of whether recruit or disband is pressed.
    Why wouldn't it? Both buttons are type "submit" so both will submit the form.



    Originally posted by TheServant
    I have used the isDigit() function. I couldn't get it to work before
    Where you using it in JavaScript. I do not know of any such function in any of the JavaScript DOM references.

    Comment

    • TheServant
      Recognized Expert Top Contributor
      • Feb 2008
      • 1168

      #3
      Cheers mate, I will try it when I get home.

      Originally posted by pronerd
      Where you using it in JavaScript. I do not know of any such function in any of the JavaScript DOM references.
      That would make sense that it doesn't exist. I have been looking for a way to test if something is numeric and not a float. So 123abc, abd, 12.23 will all fail, but 12 or 134 will not. Do you know how I can do this?

      Comment

      • TheServant
        Recognized Expert Top Contributor
        • Feb 2008
        • 1168

        #4
        Yeah, I mist be doing the checking wrong. Can you have a look and tell me how to check the variable that I am sending the function?

        [HTML]<form action="trainin g_form.php" method="POST">
        <input name="var1" type="text" value="0" />
        <input name="var2" type="text" value="0" />
        <input name="var3" type="text" value="0" />
        <input name="var4" type="text" value="0" />
        <input name="recruit" type="submit" value="Recruit" onclick="return check_form('rec ruit')" />
        <input name="disband" type="submit" value="Disband" onclick="return check_form('dis band')" />
        </form>
        [/HTML]


        [code=javascript]<script type="text/javascript">
        function check_form ( type_submitted )
        {
        if ( type_submitted == 'recruit' )
        {
        if ( document.traini ng_form.var1.va lue + document.traini ng_form.var2.va lue == 0 )
        {
        alert('You must enter the number of units to train.');
        return false;
        }
        else if ( isNaN(document. training_form.v ar1.value) || isNaN(document. training_form.v ar2.value) )
        {
        alert('You may only use numbers.');
        return false;
        }
        else
        {
        return true;
        }
        }
        if ( type_submitted == 'disband' )
        {
        if ( document.traini ng_form.var3.va lue + document.traini ng_form.var4.va lue == 0 )
        {
        alert('You must enter the number of units to train.');
        return false;
        }
        else if ( isNaN(document. training_form.v ar3.value) || isNaN(document. training_form.v ar4.value) )
        {
        alert('You may only use numbers.');
        return false;
        }
        else
        {
        return true;
        }
        }
        }
        </script>[/code]

        Comment

        • pronerd
          Recognized Expert Contributor
          • Nov 2006
          • 392

          #5
          Originally posted by TheServant
          I have been looking for a way to test if something is numeric and not a float. So 123abc, abd, 12.23 will all fail, but 12 or 134 will not. Do you know how I can do this?
          To see if a value is numeric you can do this.
          [HTML]
          <html>
          <body></body>
          <script>
          var numAndLetters = '12drw34';
          var num = '1234';
          alert(' 1 : is not a number : '+ isNaN(numAndLet ters)+'\n 2 : is not a number : '+ isNaN(num));
          </script>
          </html>

          [/HTML]

          It test to see if it is a floating point number you could use the indexOf() function to see if it as a "." in it.

          Comment

          • pronerd
            Recognized Expert Contributor
            • Nov 2006
            • 392

            #6
            Originally posted by TheServant
            Yeah, I mist be doing the checking wrong. Can you have a look and tell me how to check the variable that I am sending the function?
            They are correct and working. I added some alert() function calls, and they show the logic is triggering correctly.
            Code:
            function check_form ( type_submitted )   {
                alert('  function called : '+type_submitted);		  
                      if ( type_submitted == 'recruit' )  {
            alert('Recruit triggered');
                          .....
                          .....
                          .....
                         
                      if ( type_submitted == 'disband' ) {
            alert('Disband triggered');
                                        .....
                          .....
                          .....
                         
                      }
                  }

            Comment

            • TheServant
              Recognized Expert Top Contributor
              • Feb 2008
              • 1168

              #7
              Originally posted by pronerd
              They are correct and working. I added some alert() function calls, and they show the logic is triggering correctly.
              Code:
              function check_form ( type_submitted )   {
                  alert('  function called : '+type_submitted);		  
                        if ( type_submitted == 'recruit' )  {
              alert('Recruit triggered');
                            .....
                            .....
                            .....
                           
                        if ( type_submitted == 'disband' ) {
              alert('Disband triggered');
                                          .....
                            .....
                            .....
                           
                        }
                    }
              Thanks for your help, I probably had a typo but all your alerts worked and so did mine! Thanks again! I will continue to play around with the float numbers later.

              Comment

              Working...