Как получить значение элемента DOM на странице с помощью jquery - PullRequest
Новая
       6

Как получить значение элемента DOM на странице с помощью jquery

1 голос
/ 22 января 2011

Допустим, у меня есть два поля с идентификатором "имя" и "адрес".Я хочу показать фактическое значение в сообщении div, когда я показываю его пользователю.И я сделал 

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

Я пытался 

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

Я получаю пустое имя и адрес.

Вопрос в том, как это исправить, есть ли лучший подход?как 

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

и использовать jquery для замены значений?

Ответы [ 4 ]

1 голос
/ 22 января 2011

.val() возвращает значение, но не записывает его в DOM. Вы можете заставить его работать, используя 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>

Но лучший способ был бы более похож на 

<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>
1 голос
/ 22 января 2011

Попробуйте это: 

<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>
0 голосов
/ 22 января 2011

Дайте два результата div-идентификаторов и, таким образом, включающий (скрытый) 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>
0 голосов
/ 22 января 2011

Я создал jsfiddle здесь: 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>
...