Question

我有一个要求，即在使用“提交”按钮提交表单时，我需要在数据库的文本输入字段中填充结果，同时使输入字段不可编辑。我目前有一个JQuery函数来执行此操作：

$(function(){
    $(".makeEditable").click(function(){
        $('input:text').removeAttr("readonly");    
    });
    $(".makeNonEditable").click(function(){
        $('input:text').attr("readonly", "readonly");    
    });               
})

当我用按钮测试时，此功能正常工作：

<input type="button" value="Make Non Editable" class="makeNonEditable" />

但是，这不适用于提交按钮：

<input type="submit" value="Search" class="makeNonEditable"/>

所以，我不明白为什么它不能与提交按钮一起使用，但可以使用普通按钮。任何帮助将不胜感激

Answer 1

在您的帖子中，您的按钮似乎都具有相同的班级makeNonEditable

您可以将readonly属性设置为默认的文本字段

<input type="text" value="" readonly="readonly">

提交按钮应更改为：

    $(function() {
       $(".makeEditable").click(function() {
            $('input:text').removeAttr("readonly");
       });
       $(".makeNonEditable").click(function(e) {

                // If you submit the for without ajax
                // then just make the text field default readonly="readonly"

            // OR

                // If you submit the form using ajax then use
                // $('input:text').removeAttr("readonly");
                // within success function
       });
   });

Answer 2

我不知道是否是这种情况，但提交类型会发送表单的数据并重新加载页面。尝试使用：

$('#yourForm').submit(function(){
  // do something...
});

使用JQuery单击“提交”按钮，使文本输入可编辑且不可编辑

2 个答案: