jQuery表单重新提交不发送新值

时间:2018-02-21 19:44:38

标签: jquery json ajax html5 forms

我有一个表单允许用户通过模仿来自其他应用的JSON数据来测试应用。想法是用户编辑表单,点击提交,从服务器接收样本响应,然后允许编辑表单并再次提交。表单由jQuery AJAX提交。我使用序列化功能收集数据并将其转换为字符串。

提交表单是第一次运行,但每次后续提交都会发送相同的数据,除非刷新页面。我认为问题是jQuery只基于$( '#graphForm ')构建表单对象一次,并且在第二次提交时不更新字段值。或者,我没有以获取更新值的方式获取$.serializeFormJSON() UDF中的值。

//Grab the form data, parse values and stringify
(function ($) {

    $.fn.serializeFormJSON = function () {
        var data = {}, form = this.serializeArray();

        $.each( form, function () {
            //correct the value formats and variable typing
            if ( this.value.match( /^\-?\d+$/ ) ) {
                this.value = parseInt( this.value );
            } else if ( this.value.match( /^\-?\d+\.\d+$/ ) ) {
                this.value = parseFloat( this.value );
            } else if ( this.value == "null" ) {
                this.value = null;
            }
            //fill the data object
            if ( data[this.name]) {
                if ( !data[this.name].push) {
                    data[this.name] = [data[this.name]];
                }
                data[this.name].push(this.value);
            } else {
                data[this.name] = this.value;
            }
        });
        return JSON.stringify( data );
    };

})(jQuery);

$( document ).ready(function(){
    //grab form data from last session
    if ( oldFormDataCookie = Cookies.get( "formData" ) ) {
        oldFormData = JSON.parse( oldFormDataCookie );
        $.each(oldFormData, function( name, value ) {
            $( '*[name="' + name + '"]' ).val( value );
            console.log('*[name="' + name + '"] : ' + value);
        });
    }
    $( "#closeOverlay, #overlay, #overlayContent" ).click( function() {
        $( "#overlay" ).fadeOut();
    });

    //Serialize values, submit form, show the sample, save values
    $( "#graphForm" ).submit( function( e ){
        e.preventDefault();
        var formData = $( this ).serializeFormJSON();
        $.ajax(
            {
                url: $( "#graphForm" ).attr( 'action' ),
                type: "POST",
                data: formData,
                dataType: "json",
                success: function( response ) {
                    Cookies.set("formData", formData );
                    console.log( response );
                    $( "#overlayContent" ).html( '<img src="' + response.url + '">' );
                    $( "#overlay" ).fadeIn();
                }
            }
        );    
    });
});

0 个答案:

没有答案