Question

我在使用某些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;
}

想法很简单......我有一些按钮和输入来生成一个“行”文本，这些文本被转储到禁用的文本框中。如果操作员注意到他们做了类型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);
    }
}

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

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

现在......对于问题......有什么我对文本框不了解吗？为了让它发挥作用，我需要做些什么吗？我错了吗？除了“文本框”之外，我应该使用不同的工具吗？

非常感谢任何帮助!!

格雷格

Answer 1

您没有共享HTML，因此我假设您的标记看起来像什么。

Working jsFiddle here

上面的jsFiddle是你正在创建的简化版本。显然，它与你所做的完全不同，所以我可以快速创建它。

观察我是如何用jQuery做出某些事情的;采取有用的东西，忽略其余部分。

具体来说，您可以看到我最初如何禁用textarea控件：

$('#txtArea').attr({'disabled':'disabled'});

重新启用textarea控件进行编辑，同时隐藏“编辑”按钮并显示“保存”按钮：

$('#txtArea').removeAttr('disabled');
$('#btnSave').show();
$(this).hide();

重要的是，我确保每次添加都会增加（而不是覆盖）现有内容：

var ord = 'Requested By: ' + $('#txtReq').val() + '\r\n';

很可能你已经知道了很多（大多数？）我指出的事情，但是我不知道你知道什么，所以，再一次，保持你发现有用的一两件事，忽略其余的事情。 我只希望我已经设法击中你此刻难倒的那一刻。

我很少推荐W3Schools，但look here for their excellent summary / reference of jQuery selectors, events, methods。（继续按Next Chapter循环浏览此参考的所有页面。

Answer 2

在your jsFiddle找到错字。

我做的第一件事是添加：

alert('hi there');

到脚本的顶部，在$(document).ready()包装器内。请注意，在jsFiddle上你看不到document.ready包装器，它被隐藏起来，所以只需将警报放在javascript块的顶部就像我一样（链接到我的新jsFiddle是在答案的底部）

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

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

我继续删除/取消删除，直到我发现警报不再起作用的地方 - 并且揭示了违规的代码块。只需仔细研究该特定区域的语法并找到错误：

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

而不是

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

希望这对你的项目其余部分有所帮助，祝你好运。

这是the corrected jsFiddle

使用javascript更新文本框

2 个答案: