Question

我有一个自动提交并更新同一页面的表单。我有一个更改按钮值的java脚本函数，但AJAX不断发布旧值。

AJAX

$.ajax({
            type: 'POST',
            url: this.action,
            data: $('form').serialize()
});

JQUERY

function changevalue()
{
 $('#button').attr('value', 'grapes');
}

FORM

form...
<input type="submit"  name="button" id="button" value="apple" onclick="changevalue();" />
...

按钮将显示新的更改单词，但后面的代码（控制器）显示旧变量。

Answer 1

使用jQuery的.val()方法更改值。

function changevalue() {
    $('#button').val('grapes');
}

从jQuery 1.6.0开始，.attr()方法正确停止访问和更改属性值，它只更改属性。

Answer 2

您没有取消单击该按钮的提交按钮的默认操作，它正在刷新页面，这意味着将重新出现默认值。

使用代码添加事件处理程序，而不是内联标记。

<input type="submit"  name="button" id="button" value="apple" />

<script>
    $( function() {  
        $("#button").on("click", changevalue); //assign the click for 1.7+
        //$("#button").click( changevalue); //assign the click for 1.6.x and below
    });

    function changevalue(evt) {
        evt.preventDefault(); //cancel the click action
        $(this).val("grapes");  //set the value with val, do not use attr
    }
</script>

来自serialize

上的文档

注意：只有“成功控件”被序列化为字符串。 否由于表单未提交，因此提交按钮值已序列化 使用按钮。对于要包含在表单元素中的值序列化字符串，该元素必须具有name属性。价值来自复选框和单选按钮（“radio”或“checkbox”类型的输入）仅在检查时才包括在内。来自文件选择元素的数据没有序列化。

ajax不断发布过时的价值

2 个答案: