Проблема JS или jQuery при изменении значений объекта формы - PullRequest
Новая
       9

Проблема JS или jQuery при изменении значений объекта формы

1 голос
/ 24 мая 2011

Я использую 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значение вообще ...

Чего мне не хватает, чтобы получить значение формы Пауза, чтобы изменить на Возобновить?

Ответы [ 3 ]

0 голосов
/ 24 мая 2011

Область действия переменных в вашей функции сбивает с толку, потому что вы опустите ключевое слово 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()?Кроме того, вы на самом деле не объяснили что ваша проблема точно ... не могли бы вы побаловать нас?

0 голосов
/ 24 мая 2011

Не используйте кнопки отправки, используйте <input type="button" ...>. Ваша форма публикует и возвращает новую страницу с настройками по умолчанию для кнопок.

Вы можете забыть разметку в стиле xml, это просто потерянные символы. И void - это оператор, а не функция, поэтому вам не нужно следовать за ним с помощью оператора группировки (). В любом случае он вам не нужен, обязательный атрибут действия может быть любым, в этом случае достаточно «#» - если форма не отправлена, она никуда не денется. 

<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>

По соглашению идентификаторы, начинающиеся с заглавной буквы, зарезервированы для конструкторов, а идентификаторы со всеми заглавными буквами для констант.

0 голосов
/ 24 мая 2011

Если вы используете jquery, вы можете делать: if ($ ('input [name = pause]'). val () == "Pause") { $ ( 'Вход [имя = пауза]') Val ( "Резюме"). }

вместо

if (document.theTimer.pause.value == "Пауза") { document.theTimer.pause.value = "Резюме"; }

...