Блог

Главная - Вопросы по программированию - Замена двух входных текстовых значений значениями друг из друга при нажатии кнопки

Замена двух входных текстовых значений значениями друг из друга при нажатии кнопки

#javascript #onclick #switch-statement

#javascript #onclick #switch-инструкция

Вопрос:

У меня есть HTML-форма с двумя полями ввода, в первом пользователь вводит название первого города, а в другом второго города, после отправки формы пользователи получают указания, как добраться из первого города во второй город.

Я хочу, чтобы пользователь мог нажать кнопку «Изменить направление» и автоматически изменить название первого города на второе, а название второго города на первое и наоборот. (от A до B, от B до A)

Я предполагаю, что я должен использовать javascript, но я новичок в этом и нигде не могу получить подсказки.

Кто-нибудь может мне помочь, пожалуйста?

 input type="text" size="25" id="fromAddress" name="from"
 value=""/>
  <input name="submit1" type="submit" value="Change directions" />
<input type="text" size="25" id="toAddress" name="to"
 value="" />
<input name="submit" type="submit" value="OK" />

Комментарии:

1. Чтение руководства по JavaScript и об обработке событий — хорошее начало…

Ответ №1:

Вы можете создать новую кнопку <button id="change">Change</button>
А затем добавьте к нему onclick событие.

 document.getElementById('change').onclick = function() {
    var tmp = document.getElementById('fromAddress').value;
    document.getElementById('fromAddress').value = document.getElementById('toAddress').value;
    document.getElementById('toAddress').value = tmp;
};

Взгляните сюда: http://jsfiddle.net/xskKn

Комментарии:

1. Большое вам спасибо! Теперь это так просто и логично.

Ответ №2:

Ниже приведен пример кода того, чего вы хотите достичь, наслаждайтесь 🙂

         function swap1() {
            var data1 = document.getElementById("fromAddress").value;
            var data2 = document.getElementById("toAddress").value;
            document.getElementById("fromAddress").value = data2;
            document.getElementById("toAddress").value = data1;
            document.getElementById("swap_button").onclcik = function () {swap2()};
        }

        function swap2() {
            var data1 = document.getElementById("toAddress").value;
            var data2 = document.getElementById("fromAddress").value;
            document.getElementById("toAddress").value = data2;
            document.getElementById("toAddress").value = data1;
            document.getElementById("swap_button").onclcik = function () {swap2()};
        }


    <input type="text" size="25" id="fromAddress" name="from" value=""/>
    <input id="swap_button" type="button" value="Change directions" onclick="swap1()" />
    <input type="text" size="25" id="toAddress" name="to" value="" />
    <input name="submit" type="submit" value="OK" />

Комментарии:

1. большое вам спасибо, измените последнюю строку функции swap1() на document.getElementById("swap_button").onclick = function () {swap1()}; и работает отлично, не уверен, зачем мне нужен swap2, он меняет направление обратно, если дважды щелкнуть сейчас.

Ответ №3:

Я бы рекомендовал jQuery, если вы новичок.

 jQuery('#submit1').click(function() {
     var fromAddress = jQuery('#fromAddress').val();
     var toAddress = jQuery('#toAddress').val();

     jQuery('#fromAddress').val('toAddress');
     jQuery('#toAddress').val('fromAddress');
});

Это всего лишь краткий пример того, как вы могли бы это сделать. Вам понадобится библиотека jQuery, и я бы рекомендовал базовые знания jQuery .

http://jquery.com/