如何通过ajax提交多步骤表单

我试图在不刷新页面的情况下提交表单,我使用这个库来执行多步表单,但是最后它通过加载到表单操作来强制提交表单,我试图通过将 form.submit 设置为来停止它错误,但是当我这样做时它停止发送请求vai ajax。


我的 multstepform.js


 (function ( $ ) {

  $.fn.multiStepForm = function(args) {

  if(args === null || typeof args !== 'object' || $.isArray(args))

    throw  " : Called with Invalid argument";

  var form = this;

  var tabs = form.find('.containerformtab');

  var steps = form.find('.stepform');

  steps.each(function(i, e){

    $(e).on('click', function(ev){

    });

  });

  form.navigateTo = function (i) {/*index*/

    /*Mark the current section with the class 'current'*/

    tabs.removeClass('currentform').eq(i).addClass('currentform');

    // Show only the navigation buttons that make sense for the current section:

    form.find('.previousform').toggle(i > 0);

    atTheEnd = i >= tabs.length - 1;

    form.find('.nextform').toggle(!atTheEnd);

    // console.log('atTheEnd='+atTheEnd);

    form.find('.submitform').toggle(atTheEnd);

    fixStepIndicator(curIndex());

    return form;

  }

  function curIndex() {

    /*Return the current index by looking at which section has the class 'current'*/

    return tabs.index(tabs.filter('.currentform'));

  }

  function fixStepIndicator(n) {

    steps.each(function(i, e){

      i == n ? $(e).addClass('activeform') : $(e).removeClass('activeform');

    });

  }

  /* Previous button is easy, just go back */

  form.find('.previousform').click(function() {

    form.navigateTo(curIndex() - 1);

  });


  /* Next button goes forward iff current block validates */

  form.find('.nextform').click(function() {

    if('validations' in args && typeof args.validations === 'object' && !$.isArray(args.validations)){

      if(!('noValidate' in args) || (typeof args.noValidate === 'boolean' && !args.noValidate)){

        form.validate(args.validations);

        if(form.valid() == true){

          form.navigateTo(curIndex() + 1);

          return true;

        }

        return false;

      }

    }

    form.navigateTo(curIndex() + 1);

  });

子衿沉夜
浏览 76回答 1
1回答

翻阅古今

使用.submit(或.on)监听submitJavaScript 事件。然后.preventDefault()在事件上取消默认行为(提交表单)$("#myForm").submit(function(e){    e.preventDefault();    return false;});
打开App,查看更多内容
随时随地看视频慕课网APP