1

私は単純なフォームのデモに取り組んでおり、入力をフォームの下に表示したいと考えています。現在、コンソールに入力しています。送信ボタンをクリックしたときに 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());
    });
});                 
4

6 に答える 6

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

多分これはあなたが求めているものですか??

于 2012-10-17T15:49:56.427 に答える
1

さて、あなたは現在、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>");                    
    });
});
于 2012-10-17T15:50:44.047 に答える
1
$(document).ready(function() {
    $('.submitForm').on('click',function(event){
        event.preventDefault();     
        $(this).after('<div>First name: '+$('#firstName').val()+'<br>'+
        'Last name: '+$('#lastName').val()+
        ' .... ');

    });
});  
于 2012-10-17T15:51:17.073 に答える
1

まず第一に、 を読んで.val()何もしない 4 行は本質的に無駄なサイクルです。おそらくそれらを変数に格納するつもりでした:

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

他の要素でそれらを表示するには.val()、入力タイプのセッター バージョンを使用するか.text()、表示タイプ (div、span など) の場合:

$('#someOtherElement').text(firstName + '\n' + 
    lastName + '\n' 
    phoneNumber + '\n' 
    address);
于 2012-10-17T15:52:20.693 に答える
-1

たとえば、.append() を使用して必要な div に追加できます。

$("#divYouWantToAddTo").append($('#firstName'));
于 2012-10-17T15:50:27.957 に答える
-1

どこから始めたらいいのかわからない...$('#....').val()途中で結果を捨てるためだけに時間を無駄にしているのは何ですか..?

document.getElementById('...').value些細なことにアクセスするためだけに jQuery オブジェクト全体を作成して時間を無駄にする代わりに、何が問題なのですか?

ノードにテキストを追加するのは簡単でcontainer.appendChild(document.createTextNode(sometext));、それらの間に改行を入れたい場合は、container.appendChild(document.createElement('br'));.

ここではjQueryはまったく必要ありません...

于 2012-10-17T15:50:41.710 に答える