序列化表单而不提交

时间:2015-12-15 20:00:13

标签: javascript ajax forms

有没有办法在不调用ajax调用的submit函数的情况下实现序列化?我到处检查过,似乎找到了一个适合这个特殊问题的答案。这是我单击表单中的按钮时调用的java脚本函数。

document.forms[FORMNAME].submit();

相反:

var form = $(document.forms[FORMNAME]);

$.ajax({
  type     : "POST",
  url      : form.attr('action'),
  data     : form.serializeArray(),
  success : function(data) {
    console.log("2");
  },
  error : function() {
    console.log("3");    
  },
  complete: function() {
    console.log("4");
  }
});

我跑步时遇到这个错误。

Uncaught TypeError: form.attr is not a function

我也试过这个。

var form = $(document.forms[FORMNAME]);

        $.ajax({
         type     : "POST",
         url      : $(form).attr('action'),
         data     : $(form).serialize(),
         success  : function(data) {
         console.log("2");
         },
         error    : function() {
         console.log("3");

         },
         complete : function() {
         console.log("4");
         }
        });

当我这样做时,我真的得到了我的表格$(document.forms[FORMNAME])

似乎只有在我使用它时才能工作,但这不是我想要的。

document.forms[FORMNAME].submit(function(event){

        // Stop form from submitting normally
        event.preventDefault();

        var $form = $(this);

        //AJAX STUFF
     });

2 个答案:

答案 0 :(得分:0)

您应该使用以避免未捕获的TypeError:form.attr不是函数

$(form).attr('action')

对于序列化表单数据使用

$(form).serialize()

答案 1 :(得分:0)

你可以拨打$(" form")。serialInile();在任何地方它会序列化值并返回一个字符串,只要有一个name属性附加到每个输入元素。

HTML

<form id = "someForm">
  <table>
    <tr><td>Name</td><td><input type="text" name ="name"></td></tr> 
    <tr><td>Surname</td><td><input type="text" name="sur"></td></tr> 
    <tr><td>DOB</td><td><input type="date" name="date"></td></tr> 
    <tr><td colspan="2">
         <button type = "button" id ="serForm">Serialize Form </button>
         </td>
     </tr> 
    </table>
</form>
<div id="sitVal"></div>

JS

$("#serForm").on('click',function(){
  var serializeVal = $( "form" ).serialize();
  $("#sitVal").text(serializeVal);
})

WORKING MODEL

注意:这仅适用于您可以根据需要更改的演示