如果成功,如何检查是否使用jQuery提交表单?

问题描述 投票:-1回答:1

我有以下代码作为表单,我想检查表单是否已成功提交。

我想知道如何在控制台上进行检查。我想检查表单是否已成功提交,以便可以显示其他表单。

<form id="signup" data-magellan-target="signup" action="http://app-service-staging.com" class="epic_app-signup" method="POST">
  <div class="grid__column " style="width: 100%;">
    <input type="text" name="first_name" placeholder="Name" required/>
  </div>
  <div class="grid__column " style="width: 100%;">
    <input type="text" name="password" placeholder="Password" required/>
  </div>
  <div class="grid__column " style="width: 100%;">
    <input type="text" name="confimred-password" placeholder="Confirmed password" />
  </div>
  <div class="grid__column " style="width: 100%;">
    <input type="date" name="startdate" id="startdate" min="2019-12-16">
  </div>
  </div>
  <button type="submit" class="grid__column" style="width: 50%;"></button>
  </div>
  </div>
  </div>
</form>

和脚本,

  $('.epic_app-signup').on('submit', function(e) {
    e.preventDefault();
    var formData = $('.epic_app-signup').serializeArray();
    var jsonData = {};
    formData.forEach(function(item, index) {
      jsonData[item.name] = item.value;
    });
    console.log('data\n', jsonData);
    $.ajax({
      url: 'http://app-service-staging.com/api/auth/register',
      type:'POST',
      data: jsonData,
      contentType: 'application/json'
    }).done(function(data, textStatus, jqXHR) {
        if (textStatus === 'success') {

        }
    });
  });
});
javascript jquery ajax post
1个回答
-1
投票

您现在可以通过各种方式来执行此操作,如果您不使用ajax来实现此目的,则不使用ajax请求,请按照以下步骤操作

  • 当用户单击提交按钮时,您提交的表单将在处理成功重定向到新表单后收到表单信息(您在表单提交的操作属性中定义路径)

第二种解决方案使用jquery ajax请求

//first form
<form action='test.php' id='form_1' method='post'>
<label>Full Name</label>
<input type='text' name='full_name'>
<input type='submit'>
</form>

//second form

<form action='test.php' id='form_2' method='post' style='display:none'>
<label>Father Name</label>
<input type='text' name='father_name'>
<input type='submit'>
</form>

使用jQuery CDN

<script src='https://code.jquery.com/jquery-git.js'></script>
<script>
$("#form_1").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert("form submitted successfully");
                $('#form_1').hide();
                $('#form_2').show();


           },
           error:function(data){
               alert("there is an error kindly check it now");
           }

         });

        return false;

});
</script>
© www.soinside.com 2019 - 2024. All rights reserved.