Use jQuery to Show/Hide a Form on submit

Question

I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?

I tried as following:

HTML:

First Texfield:

<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>

Second Textfield:

<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>

JQuery:

 <script>
  $("#formButton").click(function(){
   $("#form1").toggle();
    });
 </script>

Thank you so much for your support.

So first question. What happens when you submit the first field? Does it do a form submit? Does it do ajax and cancel the form submit? — Taplar, May 14 '18 at 21:34

score 1 · Answer 1 · answered May 14 '18 at 21:37

The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.

Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.

Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().

This can be seen in the following:

$("#formButton").click(function() {
  $(".form1").show();
});

.form1 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<tr>
  <td>
    <input type="text" id="source">
    <button type="submit" id="formButton">Submit</button>
  </td>
</tr>

<tr>
  <td>
    <input type="text" size="62" id="target" class="form1">
    <button onClick="myFunct()" class="form1">Copy</button>
  </td>
</tr>

Obsidian Age, thank you for the explanation and support!! – Stef May 14 '18 at 22:23 — Stef, May 14 '18 at 22:23

score 1 · Accepted Answer · edited Jun 20 '20 at 09:12

If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:

$('#main').on('submit', function() {...

When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...

$('.row2').removeClass('hide');

...Remove the class .hide form tr.row2 which removes the style display:none

BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.

Demo

$("#main").on('submit', function() {
  $(".row2").removeClass('hide');
});

.hide {
  display: none
}

<form id='main' action='https://httpbin.org/post' method='post' target='view'>
  <table>
    <tr>
      <td><input type="text" id="source" name='source'>
        <button type="submit">Submit</button></td>
    </tr>

    <tr class='row2 hide'>
      <td><input type="text" size="62" id="target" name='target'>
        <button type='button'>Copy</button></td>
    </tr>
  </table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Use jQuery to Show/Hide a Form on submit

2 Answers2

Demo