get jQuery form - text value by id

Question

I have a simple html with jQuery form , and i want to: 1) get the value into a js var . 2)send it by JSON to a server . here is the form :

        <div data-role="main" class="ui-content">
            <data=role "form" name="seekerForm"  id="jobSeekerForm" >
                <label for="basic">First name :</label>
                <input type="text" name="seekerName" id="WfirstName" data-mini="true" />
                <label for="basic">Last name :</label>
                <input type="text" name="seekerLast" id="WlastName" data-mini="true" />
                <label for="basic" id="WEmail">E-mail:</label>
                <input type="text" name="seekerEmail" id="WEmail" data-mini="true" />

            <div data-role="fieldcontain" >
    <label for="select-choice-1" class="select" >Choose a field:</label>
    <select name="select-choice-1" id="selectField" >
        <option value="HI-TEC">Software Programming</option>
        <option value="webPro">Web Programming</option>
        <option value="QA">QA</option>
        <option value="systemInfo">System Information</option>
        <option value="DB">DBA</option>
        <option value="java">JAVA</option>
        <option value="c">c++</option>
        <option value="pyt">pyton</option>
    </select>
</div>
        <div data-role="fieldcontain" >
    <label for="select-choice-1" class="select" >Choose Experience level:</label>
    <select name="select-choice-1" id="selectPro" >
        <option value="junior">junior(0-2)</option>
        <option value="senior">senior(2-5)</option>
        <option value="exp">Expert(5-10)</option>
    </select>
                </div>
                </form>

3) same thing to the option value . Here is the way im sending :

// the object i want to send :

 var jobsData = {


    name: $name.val(),
            lname: $WlastName.val(),
            mail: $WEmail.val(),
            userlocation: location,
            field : $selectField.val(),
            Pro: $selectPro.val(),
            range: $sliderRange.val() 
    };
    // ajax - data: how i want to send that 

        $.ajax({
          type: 'GET',
          dataType: 'JSON',
          url:'http://localhost:8888',
          data: jobsData,
          success: function(jobs){
              $.each(jobs,function(i,job){
                  $('.jobRes').html(jobs);

              });

score 0 · Accepted Answer · answered Aug 18 '14 at 17:16

0

You can use .serialize() to get all the form values and send them to the server via ajax. Something like this would do:

$(function() {
    $('form').on('submit', function( e ) {
        e.preventDefault();
        $.ajax( url:'http://localhost:8888/', data: $(this).serialize(),  ..... );
    });
});

Your page must be running on the same localhost same port 8888 for this to work.

answered Aug 18 '14 at 17:16

PeterKA

24,158
5
26
48

there is my code : $(function() {var workerInfo = $( "#workerForm" ).serialize(); $( "#jobRes" ).html( workerInfo ); )} ; but it dont get values :seekerName=&seekerLast=&seekerEmail=&select-choice-1=HI-TEC&select-choice-1=jun‌ior&slider-1=40 – Itsik Mauyhas Aug 19 '14 at 06:45
That's because this code is running as soon as the page loads, **before the form is filled**. The code for getting the values **belongs in a submit handler as in the sample I provided**. A submit handler is executed **when** the form is submitted -- hopefully once you fill the form and click the submit button. – PeterKA Aug 19 '14 at 12:34
I use : $('#GoButton').click (function () {..} . thank u , u have helped me very much . should i change that to a form tag? or change it to submit button ? – Itsik Mauyhas Aug 19 '14 at 14:15
You're welcome. When submitting a form it's always recommended to use the `submit` event **on the form** rather than the `click` event **on some button or submit button**. I would use `$('form-selector').submit( .. );`. – PeterKA Aug 19 '14 at 14:21
that's working perfect! TY!! u know how to json that string ? – Itsik Mauyhas Aug 19 '14 at 14:35
Would [**`$('form').serializeArray()`**](http://api.jquery.com/serializearray/) serve your purposes? Or if you want `key/value` format, then take a look at http://stackoverflow.com/questions/11338774 – PeterKA Aug 19 '14 at 14:39

score 0 · Answer 2 · answered Aug 18 '14 at 17:19

0

You might want to checkout the jQuery .serialize() method for getting the form values. http://api.jquery.com/serialize/

answered Aug 18 '14 at 17:19

Gary Storey

1,779
2
14
19

there is my code : $(function() { var workerInfo = $( "#workerForm" ).serialize(); $( "#jobRes" ).html( workerInfo ); )} ; but it dont get values :seekerName=&seekerLast=&seekerEmail=&select-choice-1=HI-TEC&select-choice-1=junior&slider-1=40 – Itsik Mauyhas Aug 19 '14 at 06:44
try replacing `data=role "form"` with `
`. Everything must be inside the form tag you are trying to serialize.
– Gary Storey Aug 19 '14 at 14:08
And its OK to add ID? – Itsik Mauyhas Aug 19 '14 at 14:17
to the `
` element? Sure!
– Gary Storey Aug 19 '14 at 14:19

get jQuery form - text value by id

2 Answers2