Повторно открыть переключатель после отправки формы - PullRequest
Новая
       7

Повторно открыть переключатель после отправки формы

0 голосов
/ 02 апреля 2019

Я все еще работаю над своим школьным проектом, который почти закончен.С вашей помощью я успешно создал работающую систему, которая позволяет пользователям записывать, редактировать и удалять данные в / из базы данных.Единственная проблема, которая у меня сейчас у нас - «удобная форма».Мне удалось создать автофокус, вставить правильные значения при редактировании, чтобы пользователь мог видеть, что было ранее написано в этом поле, и т. Д. Мои формы скрыты с помощью jquery.Когда пользователь нажимает кнопку «Добавить», форма вставляется. Мне нужно: «когда пользователь нажимает кнопку« Отправить », страница обновляется и добавляет элемент в базу данных, форма должна появиться снова, чтобы пользователи могли быстрее добавлять данные. "

Вот мой код. 

  $(document).ready(function() {
    $('#x').click(function() {
      $('.y').toggle("slide");
    });
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="x">Click</div>
<div class="y" style="display: none;">
  <div class="container">
    <form action="insertzunanja.php" method="POST" id="x">
      <input type="hidden" name="narocilo" value="0.1412312">
      <input type="hidden" name="id" value="id-1">
      <input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
      <input type="text" name="sirina" style="width:49%;" placeholder="Sirina (v cm)">
      <input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
      <input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
      <input type="submit" value="Send">
    </form>
  </div>
</div>

Спасибо и всего наилучшего.

Ответы [ 2 ]

1 голос
/ 02 апреля 2019

Вы можете использовать вызов AJAX для отправки данных в файл php вместо действия формы. Согласно вашему коду у вас будет что-то вроде этого: 

<div id="x">Dodaj</div>
 <div class="y" style="display: none;"> 
<div class="container">
<input type="hidden" name="narocilo" value="<?php echo $randomNum; ?>">
<input type="hidden" name="id" value="<?php echo $id; ?>">
    <input type="text" name="dolzina" style="width:49%;" placeholder="Dolzina (v cm)">
    <input type="text" name="sirina" style="width:49%;" placeholder="sirina (v cm)">
    <input type="text" name="kolicina" value="1" style="width:49%;" placeholder="Kolicina">
    <input type="text" name="opombe" style="width:49%;" placeholder="Opombe">
    <input id="sub" type="submit" value="Send">
</div>
</div>


$(document).ready(function(){
    $('#x').click(function() {
      $('.y').toggle("slide");
    });
});

$("sub").click(function(){
    $.post("insertzunanja.php",
    {
      dolzina: $("input[name=dolzina]"),
      sirin: $("input[name=sirina]")
    },
    function(){
       $("input[name=dolzina]").val("");
       $("input[name=sirina]").val("");
      if($('.y').is( ":hidden" )) {
        $('.y').toggle("slide");
      }
    });
  });

Обычно, когда вы нажимаете на кнопку, вы вызываете php с помощью запроса AJAX POST, передавая два значения dolzina и sirin, полученные html-кодом (примечание: у вас есть больше значений для передачи, поэтому измените их соответствующим образом) в файл php. Jquery удаляет значения полей ввода и проверяет, отображаются ли поля ввода. Если нет, отображаются поля ввода.

0 голосов
/ 02 апреля 2019

Если вы используете PHP для обработки отправки формы и генерации кода в вашем вопросе, и вы всегда хотите, чтобы форма отображалась после отправки, вы можете сделать это:

  1. В PHPотправка идентификатора кода (например, isset($_REQUEST['id'])).
  2. [если # 1 истинно] При создании кода jQuery добавьте $('.y').show(); в функцию готовности (но отделенную от существующей функции щелчка).

Пример: 

<?php
// your existing code...
?>
$(document).ready(function() {
    <?= ( isset($_REQUEST['id']) ? '$(".y").show();' : '' ); ?>

    $('#x').click(function() {
      $('.y').toggle("slide");
    });
  });
<?php
// your existing code...
?>
...