javascript - 使用 javascript 更新文本框

标签 javascript jquery forms textbox

我在使用某些 javascript 以及它如何控制 html“文本框”时遇到了一些问题。

首先,这是我所拥有的; JavaScript:

function UpdateOrder()
{
    // enable/disable appropriate buttons
    document.getElementById("reset").disabled=false;
    document.getElementById("add").disabled=false;
    document.getElementById("submit").disabled=false;
    document.getElementById("edit").disabled=false;
    document.getElementById("update").disabled=true;

    // Show display box, 'DispCurOrder'
    document.getElementById('all_labels').disabled=true;
}

function EditOrder()
{
    // enable/disable appropriate buttons
    document.getElementById("reset").disabled=true;
    document.getElementById("add").disabled=true;
    document.getElementById("submit").disabled=true;
    document.getElementById("edit").disabled=true;
    document.getElementById("update").disabled=false;

    document.getElementById('all_labels').disabled=false;
}

这个想法很简单...我有一些按钮和输入来生成一行文本,并将其转储到禁用的文本框中。如果运算符(operator)注意到他们输入了“o”或想要更改某些内容,则他们单击“编辑订单”,它会禁用所有常规按钮,并启用文本框和“更新”按钮。 “更新顺序”按钮则相反。

现在,当我仅使用向文本框添加行时,一切正常。您可以看到每一行都附加到文本框(还有另一个 java 函数可以执行一堆错误检查等操作,但关键在于它获取文本框的内容,将“\n”上的内容解析为数组,然后附加新的文本行。然后它获取该数组并将其作为一个新字符串组合在一起,然后将其放回文本框中。这是没有所有错误检查内容的部分;

function AppendOrder()
{
    // let's set up an error flag.
    var AppendError="";
    var str1=document.forms["MyForm"].DataEntry1.value;
    var str2=document.forms["MyForm"].DataEntry2.value;

    if( /* checking variable str1 for errors */)
    {
        AppendError="Error in str 1 here";
    }

    if( /* checking variable str1 for errors */)
    {
        AppendError=AppendError+"Error in str 2 here";
    }

    // Display the error message, if there are no errors, it will clear what was there.
    $('#AppendStatus').html(AppendError);

    if(AppendError=="")
    {
        // it's all good, update the display
        // create line of text
        curEntry=str1 + " -- " + str2;

        // let's get the current order into a list
        str=document.getElementById('all_data').innerHTML;

        if(str1=="Empty")
        {
            // make curOrder = to 1 element array of curEntry
            var curOrder=[curEntry];
        }
        else
        {
            // parse str1 into an array and parse it to curOrder.
                    // Then push curEntry on the end.
            var curOrder=str1.split("\n");
            curOrder.push(curEntry);
        }

        // now we should have an array called 'curOrder[]'.  Let's show it 
            // on the web page.
        $('#all_labels').html(curOrder);
    }
}

现在,我遇到的问题是,使用“添加”按钮向显示添加一两行(或更多行),然后进入“编辑”模式(启用文本框) )并且我进行了所有更改,“添加”按钮不起作用。

奇怪的是,当我按下“重置”按钮(这只是一个重置按钮)时,它会显示我在编辑后所做的所有添加,并且编辑的内容消失了。

现在...问题...我对文本框有什么不理解的地方吗?我需要做一些技巧才能让它发挥作用吗?我这一切都错了吗?除了“文本框”之外,我应该使用不同的工具吗?

非常感谢任何帮助!!

格雷格

最佳答案

your jsFiddle 中发现拼写错误.

我做的第一件事是添加:

alert('hi there');

到脚本的最顶部,位于 $(document).ready() 包装器内。请注意,在 jsFiddle 上,您看不到 document.ready 包装器,它是不可见的,因此只需像我一样将警报放在 javascript block 的顶部(链接到我的新 jsFiddle 位于答案的底部)

接下来,我注意到您通过 ID 单独引用多个控件来启用/禁用它们。如果多个控件共享同一个类,则可以一次引用它们,因此我发明了 class="orderentry" 并将该属性添加到每个控件中。这删除了 ​​8 行代码,使故障排除更加容易。

然后,我开始删除/取消删除。首先,我删除了 javascript 面板中除 alert('hi There'); 之外的所有内容,并运行了 jsFiddle。警报弹出。伟大的。所以我使用 Ctrl+z 取消删除所有内容。接下来,我选择了除下一个代码块之外的所有内容,并删除了选择。我运行 jsFiddle,再次弹出警报。

我继续删除/取消删除,直到发现警报不再起作用的地方 - 这揭示了有问题的代码块。只需仔细研究该特定区域的语法并发现错误:

$('#txtOrder').attr({'disabled':'disabled')};  <== ERROR: note final parentheses

而不是

$('#txtOrder').attr({'disabled':'disabled'});  <== CORRECT: note final parentheses

希望这对您有所帮助,祝您项目的其余部分一切顺利。

这里是the corrected jsFiddle

关于javascript - 使用 javascript 更新文本框,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18623500/

相关文章:

javascript - 在 ES6/Typescript 中使用带有箭头函数的 _(下划线)变量

javascript - 无限滚动更新后附加事件处理程序

javascript - jQuery 动态创建表/tr/td 等并附加属性

javascript - 提交处理程序仅在第二次尝试时起作用

javascript - 使用 d3.js 的多个圆/线

javascript - 使用 Protractor 获取同一元素的不同值的数组

jquery - 如何修复此错误: "Module not found :can' t resolve popper. js”

javascript - 构建 "queryable"javascript/JSON 对象

javascript - 禁用 HTML 表单中的选项卡

javascript - React 中的数据管理策略