Regular button and submit button in one form don't work

Question

I have a form returned back from a PHP request. The form has a submit button and a regular button. The submit seems to work just fine, but the regular one won't work! Please advise.

Here is my HTML:

<tr id='actionRow' name='actionRow' hidden='hidden'>
    <td>
        <input class='actionBtn' type='submit' id='confirm' name='confirm' 
            value='Confirm' onclick='genChanged();'/> 
    </td>
    <td>                                
        <input class='actionBtn' type='button' id='cancel' name='cancel' 
            value='Cancel' onclick='cancel();' /> 
    </td>
</tr>

And here is the cancel() function:

function cancel(){
        alert('in cancel');
        document.getElementById('editRow').hidden = false;
        document.getElementById('actionRow').hidden = true;
        window.location.replace("admin.php");
    };

The alert never appears!

Is it even right to put multiple non-submit buttons in one form?

UPDATE my form looks something like:

<form action='save.php' method='POST' id='myForm'>

I've added the line document.getElementById('myForm').submit(); to the getChange(); function, to make the button be:

<input class='actionBtn' type='button' id='confirm' name='confirm' 
       value='Confirm' onclick='genChanged();'/>

Yet, cancel(); function still doesn't work!

Take a look at this related answer: http://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms?rq=1 — rtimoshenko, Jul 23 '13 at 01:43
The thing is, i want to post data without using AJAX (it's an assignment), however, the submit button must submit the form with the method="POST", yet the cancel must hide some elements. — Roshdy, Jul 23 '13 at 01:47
@rtimoshenko this example doesn't clarify how the submit action is handled. besides, cancel doesn't submit, which achieves what your _link_ says, but why doesn't it call the associated function with **onclick** event? — Roshdy, Jul 23 '13 at 01:59
Change onclick='cancel();' to onclick='cancel();return false;' to prevent the button from submitting the form. — Andrew McGivery, Jul 23 '13 at 02:07
@Roshdy Well, theoretically, your existing button should work. Re-check your syntax in your entire code. I'm sure you'll find something that's "out of whack". — Funk Forty Niner, Jul 23 '13 at 02:35
OMG!!!!! The problem was the name of the function!!! i've changed it to cancelEdits() and it worked just fine!!! — Roshdy, Jul 23 '13 at 02:38
@Fred yes, but what does the name has to do with anything? If you have an answer, I'll be glad to hear it =) — Roshdy, Jul 23 '13 at 20:07
@Roshdy It's ok. My answer was basically to say that, "you need to check the name of your function", which happened to be just that. — Funk Forty Niner, Jul 23 '13 at 20:16

score 1 · Accepted Answer · edited May 23 '17 at 12:21

You can't use the same name for the id and the function name.

In my sample 'a' have the same id and function name test() and b have different id and function name cancel()... cancel work fine and test don't.

<script>
    function cancel(){
        alert('in cancel');
    };
    function test(){
        alert("in test")
    };
</script>

<body>
  <form action='save.php' method='POST' id='myForm'>
    <tr id='actionRow' name='actionRow' hidden='hidden'>
      <td>
        <input class='actionBtn' type='button' id='test' name='a' 
           value='a' onclick='test();'/>
      </td>
      <td>                                
        <input class='actionBtn' type='button' id='b' name='b' 
          value='b' onclick='cancel()' /> 
      </td>
   </tr> 
 </form>
</body>

For more informations you can see this helpful answer : https://stackoverflow.com/a/9160009/1318727

Regular button and submit button in one form don't work

1 Answers1