How to open another submit form after submitting one on html or javascript?

Question

I am trying to open another form to get inputs after submitting one. In my code, I want to edit a node in my array and by getting the first input I make the program find my node to edit. If the input is valid -the input is one of the nodes in my array-, I want it to open another on the same place as the first one. How can I do that?

<p>
  <a href="#" style="font-size: 20px" onclick="toggle_visibility('editNodeForm');">EDIT AN EXISTING NODE</a> 
</p>
<form action="#" style="display: none;" id="editNodeForm">ID or Name:
  <input type="text" id="toEdit" size="20" style="width: 50%; height: 2em;">
  <br />
  <br />
  <button type="button" class="myButton" form="editNodeForm" style="width: 50%;" onclick="editExistingNode();">Submit</button>
  <br />
  <br />
</form>

Answer 1

What I would do is put all the fields inside a form, and separate the steps with divs.

On page load, you hide all the steps (except the first one). After clicking the button, the next step gets displayed.

The last step won't have a button, but a submit button, making it fire the form.

 $(function() { $('form>div:not(:first)').hide(); /* hide all but first step */ $('form').on('click', 'button', function(e) { e.preventDefault(); var currDiv = $(this).parent() , nextDiv = parent.next('div'); $(currDiv).hide(); $(nextDiv).show(); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <form> <div> Step 1 / 3 Add some value: <input type="text" /><br /> <button>Next step</button> </div> <div> Step 2 / 3 Add some value: <input type="text" /><br /> <button>Next step</button> </div> <div> Step 3 / 3 Add some value: <input type="text" /><br /> <input type="submit" value="Save form" /> </div> </form> 

Answer 2

Try to replace the the line

nextDiv = parent.next('div');

with:

nextDiv = $(this).parent().next('div');

in the code of the comment above, if it's not working