获取用户在文本框中编写的文本，并使用jQuery在另一个div中显示它

我是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>

我想要这样的东西：

当有人填写文本框并单击submit按钮时，他放在文本框中的文本将发布在另一个div中

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

在表单下的div中，我得到以下结果：

第一个文本（在本例中为纽约），第二个文本（在本例中为佛罗里达）

我希望有人能帮助我

---

谢谢。

要将输入的文本放入另一个div中：

HTML:

我建议：

$('#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的

.val（）

方法获取文本框的值。然后可以使用

.html（）

方法设置另一个元素的html

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

还是作为一个班轮

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

试试这个：

添加一个新的div：

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

您可以这样做：

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>");

});

$（“表单#路由表单”）。提交（函数（e）{
e、 预防默认值（）；
var firstVal=$（“#路由启动”）.val（）；
var SecondVal=$（“#routeEnd”）.val（）；
$（“#append”）.append（“”+firstVal+”+SecondVal+”
”）；
});

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

$('#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);
});

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

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

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

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

});