Changing input type=text to type=submit with javascript trigger the submit

i'm trying to code form where you can navigate inside with a next button ( who will hide the current fieldset and show the next one ) and a previous one ( who will hide the current fieldset and show the previous one ). Those two input have a onclick function that will change the fieldset className to active from inactive depending on which fieldset we are. I want to change the next button input type when the user reach the final fieldset so he can submit, but it seems that it automatically trigger the submit event, which means when the user get to the final fieldset, he cant fill any input because the form will submit automatically.

So here's the code :

//When the last fieldset show  if (fieldset[4].className == "active") {     var next = document.getElementById('next');     next.onclick='';     next.type="submit";     next.value="Submit";     next.id='submit'; } 

Is there something that i should add to stop the submit auto-firing ?

4 Answers

Answers 1

I've tested your code in JSFiddle and it works good. It means there is something that trigger submit. May be you can post whole javascript in that page and then I can check what is the issue.

var next = document.getElementById("next");    //next.type="submit";  next.setAttribute('type', 'submit'); // I prefer using .setAttribute method  next.onclick='';  next.value="Submit";  next.id='submit';

<form>  	<input name="q" value="hello">  	<input type="text" id="next">  </form>

Answers 2

I think instead of trying to "hack" the existing button and turn it into the submit, you could just have two buttons, one "next" and another one "submit-button" (hidden initially), once the user advances to the final step, you can hide the "next" button and show the "submit-button" button.

It can be something like this:

//When the last fieldset show  if (fieldset[4].className == "active") {     // hide the next button     document.getElementById('next').style.display='none';     // show the submit button     document.getElementById('submit-button').style.display=''; } 

And it would be not complex to make these buttons to appear exactly on the same place with css, so the user will not notice the replacement.

Answers 3

There are browsers who do not allow you to change the type for security reasons. So you will often have problems with it. Just switch between two inputs as boris mentioned (or replace it completely). But to answer your question:

You can catch the autosubmit with another on submit event. First on click mark the button with a class or data attribute like "preventSubmit". Within the submit event check if this class or data attribute exists and prevent the submit (f.ex with prevent default()) and remove the class that all wanted submits by users clicks are not stopped.

Answers 4

Why not just add an event to submit the form you are currently on:

if (fieldset[4].className == "active") {    var next = document.getElementById('next');    next.onclick=(function() { document.forms[0].submit(); });    //next.type="submit";    next.value="Submit";    next.className="MySubmit"; // try to style it as a button for better UX    //next.id='submit'; } 

If You Enjoyed This, Take 5 Seconds To Share It

• Facebook
• Twitter
• Google+
• StumbleUpon
• Digg
• Delicious
• LinkedIn
• Reddit
• Technorati