jquery - 获取用户在文本框中写入的文本，并使用 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 中。

例如。在第一个文本框中我写了“纽约”，在第二个文本框中写了“佛罗里达”。

在表单下的 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();
    });
});