CODEWITHSUNDEEP
javascriptjquery
gtsongi
gtsongi

Reputation: 97

JQuery can't get value of dynamically added fields

I have a hidden div with a simple form:

<div id="mb_clookup" style="display: none;">
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
    <font color="#FFF">
        Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
        <span id="cl_search">Search</span>
    </font>
</div>

This is displayed when the user clicks a button on the page. The user puts in the ZIP code, click on search and a JSON query is called. I have managed to make the Search button work with .live() but I cannot get the value of the input field. Here is the code:

$(document).ready(function(){ 
    $(document).on( "click", "#cl_search", function() {
        var pc = $('#cl_zipcode').val();

        if(pc === '') {
           alert('Please type in a post code first.');
        }
        else {
            // JSON
        }
    });
});

Th pc variable comes up empty. I tried:$(this).find('#cl_zipcode').val() this comes up with undefined. Please advise.

Upvotes: 2

Views: 4276

Answers (4)

Ankit K
Ankit K

Reputation: 1326

Your code is working fine i checked it in jsfiddle by removing display none attribute. You can check it here

HTML

<div id="mb_clookup">
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
    <font color="#FFF">
    Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
        <button id="cl_search">Search</button>
    </font>
</div>

JS

$(document).ready(function(){ 
    $(document).on( "click", "#cl_search", function() {
        var pc = $('#cl_zipcode').val();
        if(pc === '') {
           alert('Please type in a post code first.');
        }
        else {
            alert(pc);
        }
    });
});

Upvotes: 0

AVM
AVM

Reputation: 592

You can use the following

var pc= $("#mb_clookup").find('#cl_zipcode').val();

or 

var pc= $("#mb_clookup :input").val();

check fiddle

Upvotes: 3

iCollect.it Ltd
iCollect.it Ltd

Reputation: 93561

With regard to $(this).find('#cl_zipcode').val() the input elements is beside the clicked span, so your find will search from the span on down (and it contains nothing aside from the text).

You need to move up the DOM first before you find it.

$(this).parent().find('#cl_zipcode').val()

Please note that as IDs are unique, so your original code is actually fine (so long as you only have one of these added): http://jsfiddle.net/TrueBlueAussie/djqfharu/

If you load more than one of these (you mention dynamic adding of fields) you will need to switch to classes to identify the elements.

e.g

$(document).ready(function(){ 
    $(document).on( "click", ".cl_search", function() {
        var pc = $(this).parent().find('.cl_zipcode').val()
        if(pc === '') {
           alert('Please type in a post code first.');
        }
        else {
            // JSON
        }
    });
});

This is because browser keeps a fast-lookup dictionary, of IDs vs DOM elements, so only a single entry is retained per ID. The upshot of that is that jQuery can only ever find the first matching element for a search of a duplicated ID. The solution there is to switch to using classes and class-based searched.

I strongly suggest you post the rest of your code as the part shown is not the problem in isolation.

Upvotes: 1

Haydar C.
Haydar C.

Reputation: 805

i thing your html code wrong. Becouse tag not in use tag tag not support HTML5..

change this 

<div id="mb_clookup" style="display:block;">
    <strong><font color="#0066CC">Search for existing customers</font></strong><br /><br />
    <span style="color="#FFF">
        Postcode: <input type="text" name="cl_zipcode" id="cl_zipcode" />
        <span id="cl_search">Search</span>
    </span>
</div>

good luck

Upvotes: 0

Related Questions