jQuery .click切换文本输入框

Question

I've been trying all day to get the below code to work. Basically what I want it to do is swap the text between the input boxes when the link is clicked. So the text from A to B and B to A. Any idea on how I can fix this or what I'm doing wrong?
I've tried the below:

 <script>
 $("#switchdir").click(function () 
            {
    $("#saddr").val($('#daddr').val());
    $("#daddr").val($('#saddr').val());
            }

 </script>


<form action="directions1.php" method="get">
  <h1><p>A: <input type="text"  class="directionsdata"  name="saddr"       placeholder="Enter Address, business or landmark" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Address, business or landmark'" style="color: CCCCCC; width:290px; height: 20px; padding:5px; border-radius: 5px;  border-style: solid; border-color: #CCCCCC;" /></p></h1> 
  <h1><p>B: <input type="text" class="directionsdata" name="daddr"  placeholder="Enter Address, business or landmark" onfocus="this.placeholder = ''" onblur="this.placeholder = 'Enter Address, business or landmark'" style="width:290px; height: 20px;padding:5px; border-radius: 5px;  border-style: solid; border-color: #CCCCCC;"/></p></h1> 
  <a href="#" id="switchdir">Switch</a>
  <input type="submit" value="Get Directions" class="button"/>
  </form>

Answer 1

Before assigning the value to the first input field you need to store the value in a variable, else once you assign the value you will loose it. Also your id selector is wrong as there is not id attribute for the input elements, use name attribute along with attribute selector instead

jQuery(function () {
    $("#switchdir").click(function (e) {
        var daddr = $('input[name="daddr"]').val();
        $('input[name="daddr"]').val($('input[name="saddr"]').val());
        $('input[name="saddr"]').val(daddr);
    })
})

Demo: Fiddle

Answer 2

You need a temporary variable. Also, you had a missing closed ) ... or maybe that was just a copy/paste error. Either way I fixed it.

Try this:

$("#switchdir").click(function () {
    var saddr=$("#saddr").val();
    $("#saddr").val($('#daddr').val());
    $("#daddr").val(saddr);
});

Answer 3

Here's an example, but you do need to first save one of the values that you'll start swapping with.

http://jsfiddle.net/mXna3/

html:

<input id="alpha" type="text"><br/>
<input id="beta" type="text">

<div id="swapper">Click me to swap input texts</div>

JS:

$('#swapper').on('click', function() {
    var alpha = $('#alpha'),
        beta = $('#beta'),
        temp = null;
    // Cache the first input's value
    temp = alpha.val();
    // Place 2nd inputs value in first
    alpha.val(beta.val());
    // Place first input value in second's
    beta.val(temp);
});

Answer 4

The answers above are correct, my additions include that you give values to the id attributes of the input elements as well. It makes your js code cleaner and it is easier to access using jquery.

<input type="text"  id="a_input" class="directionsdata"  name="saddr" ....

and

<input type="text" id="b_input" class="directionsdata" name="daddr" ....

JavaScript code below

$("#switchdir").click(function () {
    var a_val = $("#a_input").val();
    var b_val = $("#b_input").val();
    $("#a_input").val(b_val);
    $("#b_input").val(a_val);
});

Demo: Fiddle