獲取用戶在文本框中寫入的文本，並用jQuery在另一個div中顯示它

Question

我是jQuery中的新手。我有一個簡單的形式包裹着這個代碼：

<div class="search_container"> 
    <form action="mode" onSubmit="calcRoute();return false;" id="routeForm"> 
      <input type="text" id="routeStart" PlaceHolder="Pikënisja" ><br/> 
      <input type="text" id="routeEnd" class="routeEnd" PlaceHolder="Destinacioni"> 
     <button id="submit"><i class="icon-map-marker"></i></button> 
    </form> 
</div> 

我想是這樣的：

當有人在文本框中填寫，並點擊提交按鈕，他把在文本框中的文本會張貼在另一個div。

Ex。在第一個文本框中，我寫了「紐約」，在第二個文本框中，我寫了「佛羅里達」。

在窗體中下一個div，我得到這樣的結果：

第一個文本（在這種情況下，紐約），第二個文本（在這種情況下，佛羅里達州）。

我希望有人能幫助我。

謝謝。

Answer 1

我建議：

$('#submit').click(function(e){ 
    // prevents the form's submission 
    e.preventDefault(); 
    $('selector').text($('#routeStart').val()); // sets the text of the element 
    $('otherSelector').text($('#routeEnd').val()); // to the value of the input 
}); 

假設元素到要插入文本具有一個可預測的後綴（如「TXT」），以及一類，上面可以使用下面的步驟進行更具可擴展性：

<div class="search_container"> 
    <form action="mode" onSubmit="calcRoute();return false;" id="routeForm"> 
      <input type="text" id="routeStart" PlaceHolder="Pikënisja" ><br/> 
      <input type="text" id="routeEnd" class="routeEnd" PlaceHolder="Destinacioni"> 
     <button id="submit"><i class="icon-map-marker"></i></button> 
    </form> 
</div> 
<div class="waypoints" id="routeStartTxt"></div> 
<div class="waypoints" id="routeEndTxt"></div> 

而jQuery的：

$('#submit').click(function(e){ 
    e.preventDefault(); // prevents form-submission 
    $('.waypoints').text(function(){ // iterates over each of the .waypoints elements 
     /* finds the element whose id matches the id of the current .waypoint element, 
      *without* the 'Txt' suffix, and sets the text of the current .waypoint to 
      be the value found in that element. */ 
     $('#' + this.id.replace('Txt','')).val(); 
    }); 
}); 

Answer 2

爲了把文本從另一個DIV的輸入和地點：

HTML：

<div id="routeStartTxt"></div> 

JS：

$('#submit').click(function(e) { 
    e.preventDefault(); 
    $('#routeStartTxt').html($('#routeStart').val()); 
    // do the other inputs here 
}); 

Answer 3

您可以使用jQuery的.val()方法獲取文本框的值。然後，您可以使用.html()方法來設置另一個元素的html。

value = $('input').val(); 
$('div').html(value); 

或作爲一個襯墊

$('div').html($('input').val()); 

Answer 4

試試這個：

添加一個新的div：

<div id="route"></div> 

JS：

$('#submit').click(function (e) { 

    // 1. First prevent the default action of button click 
    e.preventDefault(); 

    // 2. Get the textbox values and trim it 
    var routeStart = $.trim($('#routeStart').val()); 
    var routeEnd = $.trim($('#routeEnd').val()); 

    // 3. Check it the values are not empty 
    if (routeStart == '' || routeStart == '') 
     $('#route').html('Please enter some text!'); 
    else 
     $('#route').html(routeStart + ' ' + routeEnd); 
}); 

Answer 5

你可以這樣做：

HTML：

<div class="search_container"> 
    <form action="mode" onSubmit="calcRoute();return false;" id="routeForm"> 
     <input type="text" id="routeStart" PlaceHolder="Pikënisja" /><br/> 
     <input type="text" id="routeEnd" class="routeEnd" PlaceHolder="Destinacioni" /> 
     <button id="submit">Submit</button> 
    </form> 
</div> 

<div id="append"></div> 

jQuery的

$("form#routeForm").submit(function(e) { 
    e.preventDefault(); 

    var firstVal = $("#routeStart").val(); 
    var SecondVal = $("#routeEnd").val(); 

    $("#append").append("<p>" + firstVal + " " + SecondVal + "</p>"); 

}); 

Demo