时间戳

首页 > 解决方案 > 多步表格 | 使用ajax提交表单

javascript - 多步表格 | 使用ajax提交表单

问题描述

我有一个多步骤表格。该页面有 3 个容器。当提交第一个容器上的表单时，第一个容器隐藏，第二个显示..

我想在步骤之间移动（没有页面刷新的容器）。问题是当我使用 ajax 发送数据并使用 event.preventDefault() 或返回 false 时 - 数据没有发送到我想将输入值从表单设置为会话的 php 页面。如果我删除 event.preventDefault 然后数据发布到 php 页面但它也会重新加载页面并且不移动到下一个“步骤”

这是js的样子：

$(document).ready(function(e) {

$('#myform').submit(function(event) {

event.preventDefault();

var formData = {
  '1': $('select[name=1]').val(),
  '2': $("#2").val(),
  '3': $('input[name=3]').val(),
  '4': $('input[name=4]').val(),
  '5': $('input[name=5]').val(),
  '6': $('input[name=6]').val(),
  '7': $('input[name=7]').val(),
};

$.ajax({
   type : 'POST',
   url : 'process.php', 
   data: formData,
})

$("#container1").css("display", "none");
$("#container2").css("display", "block");

});

});

标签： javascriptphphtml

解决方案

可以回避提交事件以避免所有这些。不确定您的 html 是什么样的，但如果您有一个按钮，您可以执行以下操作，通过 ajax 在单击事件而不是提交事件中提交：

<button class="submit-form-btn">Submit</button>

像这样的jQuery：

$('.submit-form-btn').on('click', function () {
  $.ajax({
     type : 'POST',
     url : 'process.php', 
     data: formData
  })

  // do your css to show/hide next form
})

推荐阅读