CODEWITHSUNDEEP
htmlreactjsforms
jpierson
jpierson

Reputation: 17384

On an HTML form with two buttons, how can I get one button to submit the form and the other one not?

See the example below using ReactJS for brevity.

<form onSubmit={(e) => alert('form submitted');}>
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit">Submit</button>
    <button type="button" onClick={(e) => alert('button clicked, please don't submit!!!')}>Don't Submit</button>
</form>

In the above example what I would like to have is so that when the Submit button is clicked the alert "form submitted" is shown and when the Don't Submit button is clicked the user should see the "button clicked, please don't submit!!!" alert without begin followed by the "Submit" alert. Additionally neither of these buttons should cause an actual true form submission to post back to the server. So far I'm tried every way to prevent submit from occurring such as e.preventDefault() but nothing seems to work.

Upvotes: 1

Views: 684

Answers (4)

Allan
Allan

Reputation: 273

Check this:

<form onsubmit="alert('form submitted');">
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit">Submit</button>
    <button type="button" onclick="alert('button clicked, please don\'t submit!!!')">Don't Submit</button>
</form>

https://jsfiddle.net/81kx5otf/1/

Here the button type submit shows an alert with 'form submitted' message, and the button type button shows 'button clicked, please don't submit!!!'.

For ReactJS

render: function(){

    function onsubmit(e){
      e.preventDefault();

      alert('form submitted');
    }

    function myfunc(){
      alert('button clicked, please don\'t submit!!!');
    }

    return (

        <form onSubmit={onsubmit}>
            <input id="text1" />
            <input id="text2" />
            <button type="submit">{"Submit"}</button>
            <button type="button" onClick={myfunc}>{"Don't Submit"}</button>
        </form>
    );
}

Upvotes: 4

jpierson
jpierson

Reputation: 17384

So I found one solution that works however it avoids using the form's submit directly which from what I can recall gets rid of some of the form niceties related to validation and automatic Enter key support and such.

<form onSubmit={(e) => e.preventDefault();}>
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit" onClick={(e) => alert('form submitted');}>Submit</button>
    <button type="button" onClick={(e) => alert('button clicked, please don't submit!!!')}>Don't Submit</button>
</form>

I would prefer a solution that still makes use of the form's onSubmit method without actually submitting the form though. Using ngForm I remember having a real nice behavior that I guess I'm trying to replicate. Benvorth's solution may give me more of what I'm looking for in this regard.

Upvotes: 1

Vitalik Teremasov
Vitalik Teremasov

Reputation: 658

Here is another simple way

your form:

<form id="form" >
    <input id="text1"/>
    <input id="text2"/>
    <button type="submit">Submit</button>
    <button type="button" onClick="alert('Don\'t Submit')">Don't Submit</button>
</form>

Little script:

<script>
    var form = document.getElementById("form")
    form.addEventListener("submit", function(e){
        e.preventDefault()
        alert("submitting")
    })
</script>

Upvotes: 1

Benvorth
Benvorth

Reputation: 7722

Try something like this:

<form onSubmit={(e) => {if (e.target.id === 'sub') {alert('form submitted');}}}>
<input id="text1"/>
<input id="text2"/>
<button id="sub" type="submit">Submit</button>
<button type="button" onClick={(e) => alert('button clicked, please don't submit!!!')}>Don't Submit</button>
</form>

Upvotes: 1

Related Questions