Question

我有一个带有两个输入字段的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" />

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

Answer 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" />

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

在按钮单击时将两个输入文本值替换为彼此的值

3 个答案: