Avatar billede fredand Forsker
18. april 2006 - 13:19 Der er 6 kommentarer og
1 løsning

Submit buttons with same name in one form?

Hello!

I got a form with 2 submit-buttons with the same name. Might sound stupid but it would be great if this approach is ok. How ever the problem is how to evaluate wich version of the submit button that got pressed on the client side.


On the server side it is easy to see which button that got pressed but how do I do it on the client???

My code looks like:
<html>
    <head>

    </head>
    <body>
        <form name="myform" action="" onsubmit="validateForm(this)">
            <input type="text" name="mytext" value="abc">
            <input type="submit" name="mysubmit" value="mysubmit 1">
            <input type="submit" name="mysubmit" value="mysubmit 2">
        </form>
        <script>
        function validateForm(form)
        {
            if(form["mysubmit"].value=="mysubmit 1")
            {
                alert(form["mysubmit"].value);
            }
            else if(form["mysubmit"].value=="mysubmit 2")
            {
                alert(form["mysubmit"].value);
            }
            else
            {
                alert(form["mysubmit"].value);
            }
            return true;
        }
        </script>
    </body>
</html>

I just get "undefiend" from the aboves alerts.

Any idea how to solve this would be great!

Best regards
Fredrik
Avatar billede softspot Forsker
18. april 2006 - 13:58 #1
What about validating on each submitbutton's click-event rather than validating on the form. This way you will know which button triggered the submit (by sending a reference to the button as a parameter to the validating function). Something like this:

<html>
    <head>

    </head>
    <body>
        <form name="myform" action="">
            <input type="text" name="mytext" value="abc">
            <input type="submit" name="mysubmit" onclick="validateForm(this)" value="mysubmit 1">
            <input type="submit" name="mysubmit" onclick="validateForm(this)" value="mysubmit 2">
        </form>
        <script>
        function validateForm(submitButton)
        {
            if(submitButton.value == "mysubmit 1")
            {
                alert(submitButton.value);
            }
            else if(submitButton.value == "mysubmit 2")
            {
                alert(submitButton.value);
            }
            else
            {
                alert(submitButton.value);
            }
            return true;
        }
        </script>
    </body>
</html>


In case you need to get to the form-node from the validating function you just refer to

submitButton.form

which is the contaning form for the current controlreference.
Avatar billede fredand Forsker
18. april 2006 - 14:30 #2
Hello!
Thanks for your reply.

Maybe this is a solution. I use Struts as a framwork for validation. In struts it looks like they call the automatically genreated validations-functions with like:
<html:form action="/ProductFormAction" method="post" onsubmit="return validateProductForm(this);">

Perhaps I could do a check before onsubmit.

Do you know how I do not submit if something is not correct?? For eg:

        function validateForm(submitButton)
        {
            if(submitButton.value == "mysubmit 1")
            {
                alert(submitButton.value);
                return false;
            }
            else if(submitButton.value == "mysubmit 2")
            {
                alert(submitButton.value);
                return true;
            }
        }

Would the case "submitButton.value == "mysubmit 2" submit the form and call onsubmit?
And would the case "submitButton.value == "mysubmit 1" not submit the form?

I do not seems to get it working!
Avatar billede softspot Forsker
18. april 2006 - 14:54 #3
Unfortunately I don't know Struts hence I can't supply specific help on how to do things with that framework.

I do know however that you have to return the return-value from your validating function in the inline onclick-event of the tag for the returnvalue to have any effect in cancelling the eventpropagation (i.e. not posting the form even though you push the submit button). This would render your form something like this:

  <form name="myform" action="">
    <input type="text" name="mytext" value="abc">
    <input type="submit" name="mysubmit" onclick="return validateForm(this)" value="mysubmit 1">
    <input type="submit" name="mysubmit" onclick="return validateForm(this)" value="mysubmit 2">
  </form>
Avatar billede fredand Forsker
18. april 2006 - 15:49 #4
Hello!

Yes the following seems to do the trick:

<html>
    <head>

    </head>
    <body>
        <form name="myform" action="" >
            <input type="text" name="mytext" value="abc">
            <input type="submit" name="mysubmit" onclick="return validateForm(this)" value="mysubmit 1">
            <input type="submit" name="mysubmit" onclick="return validateForm(this)" value="mysubmit 2">
        </form>
        <script>
        function validateForm(submitButton)
        {
            if(submitButton.value == "mysubmit 1")
            {
                alert(submitButton.value);
                return false;
            }
            else if(submitButton.value == "mysubmit 2")
            {
                alert(submitButton.value);
                return true;
            }
        }
        </script>
    </body>
</html>

Btw give a svar so I can reward you!

Best regrads
Fredrik
Avatar billede softspot Forsker
18. april 2006 - 15:51 #5
Here you go :)
Avatar billede fredand Forsker
18. april 2006 - 15:52 #6
Thanks Mate!
Avatar billede softspot Forsker
18. april 2006 - 15:55 #7
You are welcome :)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester