Question

我正在进行一个简单的表单演示，我希望输入显示在表单下方。目前我在控制台中填充它。当我点击提交按钮时，我如何在div中显示？我的代码：

$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();     

        $('#firstName').val();
        $('#lastName').val();
        $('#phoneNumber').val();
        $('#address').val();    

        console.log($('#firstName').val());
        console.log($('#lastName').val());
        console.log($('#phoneNumber').val());
        console.log($('#address').val());
    });
});

Answer 1

$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();                         
        //$('#firstName').val();
        //$('#lastName').val();
        //$('#phoneNumber').val();
        //$('#address').val();   

        var htmlContent = $('#firstName').val() + '<br />' + $('#lastName').val() + '<br />' + $('#phoneNumber').val() + '<br />' + $('#address').val();

        $('#ID_OF_YOUR_DIV_HERE').html(htmlContent);
    }); 
});

也许这就是你所追求的？

Answer 2

好吧，您目前没有将值放在console.log中。

我希望看到类似的东西（让我们调用你想要值的div，“输出”）：

$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();

        // Borrowing from another response, this is better
        // Putting these in variables protects you from 
        // 1) accidentally modifying your form values
        // 2) invalid input, if you add some basic checks, like
        //    testing to see if the length is > 0, doesn't contain
        //    bad characters, etc.
        var firstName = $('#firstName').val(),
            lastName  = $('#lastName').val(),
            phone     = $('#phoneNumber').val(),
            address   = $('#address').val();

        // get a reference to the div you want to populate
        var $out = $("#output");

        // This is a better way of dealing with this
        // because every call to .append() forces DOM
        // reparsing, and if you do this too often, it can cause
        // browser slowness. Better to put together one string
        // and add it all at once.
        $out.html("<p>" + firstName + "</p>" + 
                  "<p>" + $('#lastName').val() + "</p>" +
                  "<p>" + $('#phoneNumber').val() + "</p>" + 
                  "<p>" + $('#address').val() + "</p>");                    
    });
});

Answer 3

$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();     
        $(this).after('<div>First name: '+$('#firstName').val()+'<br>'+
        'Last name: '+$('#lastName').val()+
        ' .... ');

    });
});

Answer 4

首先，您阅读.val()但不对其执行任何操作的四行基本上是浪费的周期，您可能想将它们存储在变量中：

var firstName = $('#firstName').val();
var lastName = $('#lastName').val();
var phoneNumber = $('#phoneNumber').val();
var address = $('#address').val();

要在其他元素中显示它们，请将.val()的setter版本用于输入类型，如果是显示类型（div，span等），则使用.text()：

$('#someOtherElement').text(firstName + '\n' + 
    lastName + '\n' 
    phoneNumber + '\n' 
    address);

Answer 5

您可以使用.append（）将其添加到所需的div中，例如

$("#divYouWantToAddTo").append($('#firstName'));

Answer 6

我不知道从哪里开始......那里的$('#....').val()是什么，浪费时间只是为了扔掉结果......？

document.getElementById('...').value有什么问题，而不是浪费时间创建一个完整的jQuery对象只是为了访问一些微不足道的东西？

向节点添加文字就像container.appendChild(document.createTextNode(sometext));一样简单 - 如果您想在它们之间添加换行符，您也可以container.appendChild(document.createElement('br'));。

这里根本不需要jQuery ......

在同一页面中显示表单输入

6 个答案: