Question

我有一个带有两个提交按钮的html表单，其中一个已启用。如果用户正在填写表单，则启用提交，另一个按钮被激活。当用户点击提交按钮时，其他按钮被启用并显示所有字段值只读。当点击第二个按钮时，数据输入数据库，使用 jquery 或 javascript 是否有可能

$('input[type="text"]').each(function(){
            $(this).attr('readonly','readonly');
});

Answer 1

如果我正确阅读了您的问题，第一个按钮实际上并未提交表单？

$("#firstbutton").click(function() {
    $("#myForm input").attr("readonly", "readonly"); //this makes the input fields readonly

    $("#secondbutton").attr("disabled","disabled"; //this enable the second button

    $(this).removeAttr('disabled'); //this disables the #firstbutton
}

确保：

在页面加载时，第二个按钮已被禁用。
如果您的表单中有下拉列表，则必须同时设置这些列表，因为它们不是<input>，而是<select>项目。
第一个按钮不应该是type="submit"，它应该是type="button"或者是<button>标记。
您的第二个按钮可以是常规提交按钮，不需要任何花哨的东西。只要您的表单发布到正确的actionlink，表单就会被提交。
切勿在输入字段中使用disabled属性。如果您这样做，表单提交将忽略这些字段，而不是按预期发布。你已经通过readonly使用了。

Answer 2

$(document).ready(function(){
  $('#myForm').submit(function(e){
    e.preventDefault();

    $myForm = $(this);

    $myForm.find('input[type=submit]').attr('disabled','disabled');
    $myForm.find('input#other-button').attr('enabled','enabled');


    //do a $.post request
    $.post('/path/to/my-file.php',
           $myForm.serialize(),
           function(data){
             // make something after the post is complete
             $myForm.find("input[type=text]").attr('readonly','readonly');
           },
           'json');
  });
});

提交后显示值

2 个答案: