CODEWITHSUNDEEP
jquerydomelement
Jon
Jon

Reputation: 13

How to get dom element value in the page using jquery

Let say I have two fields with id "name" and "address". I want to show the actual value in the div message when I show it to user. And I did

<input type="text" id="name" value="MyName" />
<input type="text" id="address" value="myaddress" />

<div style="visibility:hidden">
    <div>Your name is $(name)</div>
    <div>Your address is $(address)</div>
</div>

I tried

<div style="visibility:hidden">
    <div>Your name is <script>$("input[id=name]").val()</script></div>
    <div>Your address is <script>$("input[id=address]").val())</script></div>
</div>

I am getting empty name and address.

Questtion is how can I fix it, is there any better approach? like

<div style="visibility:hidden">
    <div>Your name is <script>GetValue(name)</script></div>
    <div>Your address is <script>GetValue(address)</</script></div>
</div>

and use jquery to replace values?

Upvotes: 1

Views: 8266

Answers (4)

doc_id
doc_id

Reputation: 1433

Give the two result divs ids, and so the enclosing (hidden) div:

<input type="text" id="name" value="MyName" />
<input type="text" id="address" value="myaddress" />

<div id="result" style="visibility:hidden">
    <div id="result_name"></div>
    <div id="result_address"></div>
</div>

<script type="text/javascript">
jQuery(document).ready(function(){
    jQuery('#name').change(function() { 
        jQuery('#result_name').text('Your name is ' + jQuery(this).val()); 
    });

    jQuery('#address').change(function() { 
        jQuery('#result_address').text('Your address is ' + jQuery(this).val()); 
    });

    jQuery('#result').css('display', 'block');
});
</script>

Upvotes: 0

superUntitled
superUntitled

Reputation: 22527

I have created a jsfiddle here: http://jsfiddle.net/7se87/

$("input").keyup(function () {
    var spanclass = $(this).attr('id');
    var value = $(this).val();
    $("span."+spanclass).text(value);
}).keyup();

<input type="text" id="name" value="MyName" />
<input type="text" id="address" value="myaddress" />

<div style="display:block;">
    <div>Your name is <span class='name'></span></div>
    <div>Your address is <span class='address'></span></div>
</div>

Upvotes: 0

Emmett
Emmett

Reputation: 14327

.val() returns the value, but doesn't write it to the DOM. You can get it to work by using document.write:

<div style="visibility:hidden">
    <div>Your name is <script>document.write($("input[id=name]").val());</script></div>
    <div>Your address is <script>document.write($("input[id=address]").val());</script></div>
</div>

But a way better approach would be more along the lines of 

<div style="visibility:hidden">
    <div id="name-div"></div>
    <div id="address-div"></div>
</div>

<script>
$("#name-div").text("Your name is " + $("#name").val());
$("#address-div").text("Your address is " + $("#address").val());
</script>

Upvotes: 1

Chandu
Chandu

Reputation: 82893

Try this:

<input type="text" id="name" value="MyName" /> 
<input type="text" id="address" value="myaddress" />  
<div style="visibility:hidden">     
    <div>Your name is <span id="userName"></span></div>
    <div>Your address is <span  id="userAddress"></span></div> 
</div> 
<script type="text/javascript">  
    $(function(){
        $("#userName").text($("#name").val());
        $("#userAddress").text($("#address").val());
    });
</script>

Upvotes: 1

Related Questions