JS 或 jQuery 问题更改表单对象的值答案

【问题标题】：JS or jQuery Problem Changing Values Of Form ObjectJS 或 jQuery 问题更改表单对象的值
【发布时间】：2011-05-23 21:43:43
【问题描述】：

我正在使用 jQuery Mobile 和 Phonegap 创建一个学习计时器，我正在尝试通过 JS 更改表单值。

表单值：

 <form action="javascript:void(null);" id="theTimer" name="theTimer">
     <input id="timerDisplay" type='text' name="theTime" readonly/>
     <br />
     <input type='submit' name="start" value="Start" onclick="Start()"/>
     <input type='submit' name="stop" value="Stop" onclick="Stop()"/>
     <input type='submit' name="pause" value="Pause" onclick="Pause()"/>
  </form>

JS代码：

function Pause() {
    if (timerID) {
        clearTimeout(timerID);
    }
    if (myTimer) {
        clearInterval(myTimer);
    }
    if (document.theTimer.pause.value == "Pause") {
        document.theTimer.pause.value = "Resume";
    } else {
        document.theTimer.pause.value = "Pause";
        tToday = new Date();
        total_time = tToday.getTime() - tDiff;
        tStart = new Date(total_time);
        timerID = setTimeout(UpdateTimer, 1000);
        startTimer();
    }
}

问题是，当我使用另一个框架时，表单值 Pause 会更改为 Resume 和 Resume 以通过 Pause() 函数暂停...现在它根本看不到 Pause 表单值...

我缺少什么来形成价值 Pause 以更改为 Resume？

【问题讨论】：

我没有看到问题...
我也不是 => 投我的票。

标签： javascript jquery forms jquery-mobile

【解决方案1】：

如果您使用的是 jquery，您可以这样做： if ($('input[name=pause]').val() == "Pause") { $('input[name=pause]').val("Resume"); }

而不是

if (document.theTimer.pause.value == "Pause") { document.theTimer.pause.value = "恢复"; }

【讨论】：

为什么？ jQuery 版本的代码更多，效率也低得多。两个版本都可以在本地存储它们的引用，但 POJS 仍然会更短、更快。
哦，我绝对不是说这是要走的路，只是展示了如何在 jQuery 中完成任务（这是原帖中提到的第一件事）.. 我绝对同意你根本不需要它，jQuery代码对我来说更容易记住。

【解决方案2】：

函数中变量的范围令人困惑，因为您在所有变量上都省略了var 关键字。我会首先清理你的变量声明，并使用 jQuery 的强大功能而不是手动通过 DOM 来设置值：

 <form action="javascript:void(null);" id="theTimer" name="theTimer">
     <input id="timerDisplay" type="text" name="theTime" readonly="readonly" />
     <br />
     <input type="submit" name="start" id="start" value="Start"/>
     <input type="submit" name="stop" id="stop" value="Stop"/>
     <input type="submit" name="pause" id="pause" value="Pause"/>
  </form>

我删除了您的 onclick 事件并修复了您的 readonly 属性和您的引号。我认为部分问题是您在单击按钮时提交了表单并且页面正在回发。当发生这种情况导致意外行为时，您的计时器正在重置。我正在使用 jQuery 添加回函数：

$(function() {
    $('#start').click(function() {
        Start();
        return false;
    });
    $('#stop').click(function() {
        Stop();
        return false;
    });
    $('#pause').click(function() {
        Pause();
        return false;
    });
});

var timerID, myTimer;

function Pause() {
    if (timerID) {
        clearTimeout(timerID);
    }
    if (myTimer) {
        clearInterval(myTimer);
    }
    if ($('#pause').val() == "Pause") {
        $('#pause').val("Resume");
    } else {
        $('#pause').val("Pause");
        var tToday = new Date();
        var total_time = tToday.getTime() - tDiff;
        var tStart = new Date(total_time);
        timerID = setTimeout(UpdateTimer, 1000);
        startTimer();
    }
}

也许你可以用startTimer() 和UpdateTimer() 来填补你的问题？另外，您还没有真正解释什么您的问题到底是什么......您能放过我们吗？

【讨论】：

您是否遇到语法错误或其他问题？我不确定javascript:void(null); 是否比在表单上完全省略该操作更好。在您的 onclick 值之后添加 return false; 将阻止表单提交。

【解决方案3】：

不要使用提交按钮，使用<input type="button" ...>。您的表单正在使用默认设置的按钮发布并返回一个新页面。

你可以忘记 xml 样式的标记，它只是浪费字符。而void是一个操作符，不是一个函数，所以不需要跟上分组操作符()。无论如何你都不需要它，所需的 action 属性可以是任何东西，'#' 在这种情况下就足够了 - 如果表单没有提交，它不会去任何地方。

<form action="#" id="theTimer" name="theTimer">
    <input id="timerDisplay" type="text" name="theTime" readonly>
    <br>
    <input type="button" name="start" value="Start" onclick="Start()">
    <input type="button" name="stop" value="Stop" onclick="Stop()">
    <input type="button" name="pause" value="Pause" onclick="Pause()">
</form>

按照惯例，以大写字母开头的标识符保留给构造函数，所有大写字母的标识符保留给常量。

【讨论】：