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

nope Published at Dev

Nope

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>

LinkinTED

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>

Collected from the Internet

Please contact [email protected] to delete if infringement.