CODEWITHSUNDEEP
javascriptjqueryhtmlinput
Stef
Stef

Reputation: 139

Use jQuery to Show/Hide a Form on submit

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?

enter image description here

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.

Upvotes: 1

Views: 80

Answers (2)

zer00ne
zer00ne

Reputation: 43910

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>

Upvotes: 1

Obsidian Age
Obsidian Age

Reputation: 42304

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>

Upvotes: 1

Related Questions