javascript - 提交后显示值

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>。
• firstbutton 不应该是 of type="submit"，它应该是 oftype="button"或者是一个<button>标签。
• 你的第二个按钮可以是一个常规的提交按钮，不需要任何花哨的东西。只要您的表单发布到正确的操作链接，表单就可以正常提交。
• 切勿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');
  });
});