Как получить значение текстового поля и метку из формы через JQuery

0

Я новичок в 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>

Может кто-нибудь мне помочь?

  • 0
    покажи свой JS. что ты уже испробовал?
  • 0
    Покажите код jquery, который вы пробовали.
Показать ещё 7 комментариев
Теги:

5 ответов

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

  • 0
    офигенно .. именно то, что я хотел, спасибо
  • 0
    Могу ли я получить значение и метку вместе ... что-то вроде Label: значение
Показать ещё 3 комментария
0

ознакомьтесь с этой скрипкой, которую вы можете использовать

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

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

0

если вы записываете $('.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()); })
  • 0
    получить имя класса, но как получить значение текстового поля?
  • 0
    я редактирую и добавляю это
0
$('form input[type="text"]').each(function(){ 
 // Do your magic here

});

Если вы получили идентификатор формы:

$('#formId input[type="text"]').each(function(){ // Do your magic here });
  • 0
    отличный приятель работал как шарм
  • 0
    @ user3164335: наслаждайся кодом !!! :)
0

Использование jquery для легкого извлечения значения

Вы должны указать в html textbox id = 'email' Для текстового поля

например.

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

Для метки

например.

$('#email').text('result');
  • 1
    ОП хочет получить все входные значения и соответствующие метки в форме. Вы предлагаете ему или ей жестко закодировать все идентификаторы в JS?

Ещё вопросы

Сообщество Overcoder
Наверх
Меню