2013-05-01 3 views
4

Я хочу установить свою переменную в значение моего текстового поля num1. Что я делаю неправильно с этим?jquery val() или получение значения текстового поля по id

aa = $("#num1").val(); 
alert(aa); 


//var bb = document.getElementById('num1').value; 
//alert(bb); 

здесь весь код http://jsfiddle.net/EmRLE/

<!DOCTYPE html> 
<html> 
<head> 
    <style> 
    #box { font-family:Arial; float:right; background: blue; color: orange; width:200px; height: 200px; padding:10px; margin: 10px; border : 10px solid gray; } 
    </style> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 



$(document).ready(function(){ 
    $("#a").click(function(){ 
    alert("Background color = " + $("div").css("background-color") + "  " + "\nfont is " + $("div").css("font-family") + " \nFloat property is " + $("div").css("float") + "  " + 


    " \ncolor of the text is " + $("div").css("color") + "  " + 
    "\nthe width is " + $("div").css("width") + "  " + 

+ $("div").css("width") + "  " + " \nthe height is " + $("div").css("height") + "  " + "\nthe margin is " + $("div").css("margin") + "  " + "\n the padding is " + $("div").css("padding") + "."); 
    }); 

$("#b").click(function(){ 
aa = $("#num1").val(); 
alert(aa); 


//var bb = document.getElementById('num1').value; 
//alert(bb); 


    if (isNaN(aa) || aa < 0 || aa > 500) { 
    alert("please enter number between 0 and 500"); 
    } 
    else 
    { 
    $("div").css("height",aa); 
    } 

    }); 

$("#c").click(function(){ 
    var bb = $("num2").val(); 
    alert(bb); 


    if (!/^[A-Za-z]+$/.test(bb) ) 
    { 
     alert("please enter a color that is a letter"); 
    } 
    else 
    { 
    $("div").css("background-color",bb); 
    } 
    }); 

    }); 




    </script> 
</head> 
<body> 

<div id="box">My Div</div> 
<button id = "a" >Display CSS Values </button><br><br><br> 
<button id = "b" >Enter height value: </button><input type="text" name="num1" /> <br><br><br> 
<button id = "c" >Enter background color: </button><input type="text" name="num2" /> 







</body> 
</html> 
+4

'$ ("# num1")' неверно, num1 - это имя входа, а не идентификатор. –

+0

Также используйте фактические названия для ваших варов. сэкономит вам много догадок, чтобы работать с cssHeight вместо aa – mplungjan

+0

спасибо всем. работает сейчас. – user1760790

ответ

7

$ ("# Num1") ищет поле с идентификатором num1. Ваше поле определяется с именем num1:

<input type="text" name="num1" /> 

Попробуйте вместо этого:

<input type="text" id="num1" name="num1" /> 
+0

спасибо. теперь отлично работает. – user1760790

+0

@ user1760790 обязательно подтвердите свой ответ и примите его, чтобы все знали, что решило проблему. – Yatrix

+0

работал для меня. Спасибо. –

3

В качестве альтернативы ответа SteveP, в если вы не хотите «num1» в качестве идентификатора для какой-то причине, вы можете выбрать атрибут name с помощью $('[name="num1"]'). Имейте в виду, что вытащите ВСЕ элементы с помощью name="num1".

1

Потому что с этим селектором $("#num1").val(); вы ищете элемент с id num1, но ваше поле ввода имеет набор атрибутов name.

Попробуйте изменить его:

<input type="text" id="num1" name="num1" /> 

Вот рабочая скрипку: http://jsfiddle.net/IrvinDominin/EmRLE/2/ (я поставил Jquery и в голову не-обертка, чтобы она работает)