1

我是 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 中，我得到以下结果：

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

我希望有人能帮助我。

谢谢。

4

5 回答 5

2

我建议：

$('#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();
    });
});
于 2013-04-06T16:48:52.033 回答
1

为了将文本从输入中放入另一个 div：

HTML：

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

JS：

$('#submit').click(function(e) {
   e.preventDefault();
   $('#routeStartTxt').html($('#routeStart').val());
   // do the other inputs here
});
于 2013-04-06T16:47:55.767 回答
0

您可以使用 jQuery 的.val()方法来获取文本框的值。然后，您可以使用该.html()方法设置另一个元素的 html。

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

或作为一个班轮

$('div').html($('input').val());
于 2013-04-06T16:49:02.843 回答
0

试试这个：

添加一个新的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);
});
于 2013-04-06T16:52:55.207 回答
0

你可以这样做：

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

});

演示

于 2013-04-06T16:58:23.597 回答