CODEWITHSUNDEEP
javascriptjquery
Kalpit
Kalpit

Reputation: 4936

How to retrieve textbox value and label from form through jquery

I am newbie in jquery.

I want to retrieve each textbox value and label from the form. Here I am getting dynamic form in my DOM.

i am triggering form submit even in my DOM something like this and its working..

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

I have tried with doing each() but I didn't get..

<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>

Can anyone help me?

Upvotes: 1

Views: 3684

Answers (5)

Dhanu Gurung
Dhanu Gurung

Reputation: 8840

Try this:

$('.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());      
    });
});

Use of $(this).find('input'): It will find all input text boxes within the form having class wpc_contact. Similarly, $(this).find('label').

DEMO Link

Requirement to get both label and value together like { label : value } pair, you can try:

$('.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

Upvotes: 2

El_L
El_L

Reputation: 355

if yo write $('.wpc_contact').each(function(){ alert($(this).attr("class")); })

it find all elements that have 'wpc_contact' class but you have one element!!!

you should use with find

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

if you want value:

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

Upvotes: 0

Abhidev
Abhidev

Reputation: 7253

check out this fiddle you can use 

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

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

Upvotes: 0

user3164358
user3164358

Reputation: 1

Using jquery to retrieve the value easily

You have to give in html textbox id='email' For textbox

eg.

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

For Label

eg.

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

Upvotes: 0

Susai
Susai

Reputation: 565

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

});

If you got the form id:

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

Upvotes: 0

Related Questions