Question

我是jquery的新手。

我想从表单中检索每个文本框值和标签。在这里，我将在DOM中获得动态表单。

即使在我的DOM中，我也会触发表单提交，以及它的工作......

$('.wpc_contact').submit(function(event){
   // here i want textbox value and label
}

我尝试过做每个（），但我没有得到......

<form method="POST" id="contact" name="17" class="form-horizontal wpc_contact">
    <fieldset>
        <div id="legend" class="">
            <legend class="">Demo</legend> <div id="alert-message" class="alert hidden"></div>
        </div>

        <div class="control-group">
            <label class="control-label" for="input01">Name</label>
            <div class="controls">
                <input type="text" placeholder="Name" class="input-xlarge">
                <p class="help-block"></p>
            </div>
        </div>
        <div class="control-group">
           <label class="control-label" for="input01">Email</label>
           <div class="controls">
           <input type="text" placeholder="Email" class="input-xlarge">
           <p class="help-block"></p>
        </div>
    </div>
    <div class="control-group">    
        <div class="controls">
            <button class="btn btn-success">Send</button>
        </div>
    </div>
    </fieldset>
</form>

任何人都可以帮助我吗？

Answer 1

试试这个：

$('.wpc_contact').submit(function(event){
       // here i want textbox value and label
    $(this).find('input').each(function(){
      alert('text box value:'+$(this).val());
    });
    $(this).find('label').each(function(){
      alert('label text:'+$(this).text());      
    });
});

使用$(this).find('input')：它会在包含input text boxes类的表单中找到所有wpc_contact。同样，$(this).find('label')。

<强> DEMO Link

需要像{label：value}对一样同时获取标签和值，您可以尝试：

$('.wpc_contact').submit(function(event){
  var data = {};
  $('.control-group').each(function(){
    var key = $(this).find('label').text();
    var value = $(this).find('input').val();
    data[key] = value;
  });

  console.log(data);   // data contains label : value pair
});

<强> DEMO Link2

Answer 2

使用jquery轻松检索值

你必须在html文本框中输入id ='email' 对于文本框

例如

$('#email').val('result');

对于标签

例如

$('#email').text('result');

Answer 3

$('form input[type="text"]').each(function(){ 
 // Do your magic here

});

如果你有表格id：

$('#formId input[type="text"]').each(function(){ // Do your magic here });

Answer 4

如果你写$('.wpc_contact').each(function(){ alert($(this).attr("class")); })

它找到所有具有'wpc_contact'类但你有一个元素的元素!!!

你应该使用find

   $('input').each(function () { alert($(this).attr("class")); })
        $.find('span').each(function () { alert($(this).attr("class")); })

如果你想要价值：

//text box
$('input').each(function () { alert($(this).val()); })
//label
        $.find('span').each(function () { alert($(this).text()); })

Answer 5

看看这个小提琴你可以用

$('.wpc_contact input').each(function () {
    alert($(this).val());
});

http://jsfiddle.net/8DMy4/2/

如何从表单到jquery检索文本框值和标签

5 个答案: