Используйте jQuery, чтобы показать / скрыть форму при отправке

Question

Я хотел бы показать второе текстовое поле вкл. скопируйте кнопку, как только я отправлю первое текстовое поле. как я могу скрыть второе текстовое поле и показать после отправки?

Я попытался следующим образом:

HTML:

Первый Тексфилд:

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

Второе текстовое поле:

<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>  

Большое спасибо за вашу поддержку.

Answer 1

Если вы намереваетесь отправлять данные на сервер в обычном режиме, ваши входы и кнопки должны быть заключены в тег <form>, поэтому я добавил один и настроил его так, чтобы он отправлялся на тестовый сервер в режиме реального времени. Также добавлен iframe для отображения ответа сервера. JQuery прост:

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

Когда form#main «слышит» событие submit (т. Е. При нажатии button[type=submit] ...

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

... Удалить класс .hide форму tr.row2, которая удаляет стиль display:none

Кстати, идентификаторы должны быть уникальными. #form1 дублируется, и в коде операции есть 2 идентификатора на одну кнопку.

Демо

$("#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>

Answer 2

Первая проблема состоит в том, что у вас есть дубликаты идентификаторов на кнопке (submit и formButton).Элемент может иметь только один идентификатор .Я пошел с последним в моем примере.

Во-вторых, у вас есть дубликаты form1 идентификаторов, которые также недопустимая разметка .Вместо этого просто используйте классы.

Тогда нужно просто скрыть эти элементы по умолчанию и показать их по нажатию кнопки.Я бы порекомендовал .show() для этого вместо .toggle().

Это можно увидеть в следующем:

$("#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>