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

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

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

5 个答案: