.сериализовать для применения только к одной форме

ProgramBox

.сериализовать для применения только к одной форме

Post author:admin
Запись опубликована:27 октября, 2022
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

У меня есть страница, на которой я показываю два раза одну и ту же форму. Страница представляет собой мастер, и форма отображается два раза, но каждый раз с разными действиями при успешном выполнении. Дело в том, что когда я отправляю форму, я использую serialize для сбора данных, а serialize будет собирать значения из обеих форм. Мне нужно дедуплицировать результат сериализации, иначе на серверной части я получу значение, в два раза превышающее значение. Как я могу это сделать?

 $('.login-button').click(function(e){
            e.preventDefault();
            var submit_val= $('.login_form').serialize();
                  var step = $(this).parent().find('.step').val();
            dest = "https://" domain "/login/login.php";
            $.ajax({
                type:"POST",
                url: dest,
                data: submit_val,
                dataType: 'json',
                success:function(data){
                //actions on success...
                }
              });
            
        });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--first step of the wizard - first instance of the form-->
<form role="form" class="login_form subscription-form form-inline">
    <input type="text" name="username_login" placeholder="Username" class="input-box form-control">
        <input type="password" name="password_login" placeholder="Password" class="input-box form-control">
        <input type="hidden" class="step" value="1">
        <button type="submit" class="btn standard-button login-button">Accedi</button>
</form>
<!--different step of the wizard - again the same form-->
<form role="form" class="login_form subscription-form form-inline">
    <input type="text" name="username_login" placeholder="Username" class="input-box form-control">
        <input type="password" name="password_login" placeholder="Password" class="input-box form-control">
        <input type="hidden" class="step" value="4">
        <button type="submit" class="btn standard-button login-button">Accedi</button>
</form>

Развернуть фрагмент

Результатом сериализации будет:

 username_login=user_nameamp;password_login=user_passwordamp;username_login=amp;password_login=

где user_name и user_password — это значения, вставленные пользователем в одну из двух форм

1. Они оба очень идентичны. В чем причина их использования 2 раза? Они по разным причинам? AFAIK, это поведение по умолчанию. Может быть, вместо сериализации просто отправьте нужные вам значения на сервер. Или просто присвоите форме уникальный идентификатор для каждого мастера и отправьте его соответственно.

2. @Pirate Страница является мастером, и форма отображается два раза, но каждый раз с другим действием при успешном выполнении, как я сказал в вопросе. Назначая идентификатор, мне пришлось бы дублировать код javascript, который отправляет форму. Я также знаю, что могу создать запрос вручную, но я бы предпочел сохранить его с помощью serialize, чтобы, если я буду манипулировать формой, javascript всегда будет действительным. В противном случае мне придется вручную адаптировать запрос каждый раз

Ответ №1:

Вы также должны использовать .parent() при сериализации:

 var submit_val= $(this).parent().serialize();

ДЕМОНСТРАЦИЯ:

 $('.login-button').click(function(e) {
  e.preventDefault();
  var submit_val = $(this).parent().serialize();
  console.log("Serialized: "   submit_val)
});

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!--first step of the wizard - first instance of the form-->
<form role="form" class="login_form subscription-form form-inline">
  <input type="text" name="username_login" placeholder="Username" class="input-box form-control">
  <input type="password" name="password_login" placeholder="Password" class="input-box form-control">
  <input type="hidden" class="step" value="1">
  <button type="submit" class="btn standard-button login-button">Accedi</button>
</form>

<!--different step of the wizard - again the same form-->
<form role="form" class="login_form subscription-form form-inline">
  <input type="text" name="username_login" placeholder="Username" class="input-box form-control">
  <input type="password" name="password_login" placeholder="Password" class="input-box form-control">
  <input type="hidden" class="step" value="4">
  <button type="submit" class="btn standard-button login-button">Accedi</button>
</form>

Развернуть фрагмент