<form>
<p>
<label>Username</label>
<input name="username" placeholder="Username" required="" type="text">
</p>
</form>
<script language="JavaScript" type="text/javascript">
var username=$("#username").val();
</script>
I have read a lot of posts related to this problem, but I have not found solution.
I tried with Firebug and give me this:
username undefined
Where is the problem?
Because you don't have an element with the id "username". You have one with the name "username". So jQuery returns an empty set when you do $("#username") (as there are no matching elements). When you call val() on an empty set, it returns undefined.
You can either change your field to have an id:
<input id="username" name="username" placeholder="Username" required="" type="text">
Or change your selector to use the name:
var username = $("input[name=username]").val();
# is selector for ID, but you don't have ID on your input.
So you could add an ID:
<input name="username" placeholder="Username" id="username" required="" type="text">
Loot at this : Id Selector
try accessing element by name attribute:
$('input[name=username]').val()
or if you need to access by id, then add id attribute:
<input name="username" placeholder="Username" id="username" required="" type="text">
Related
I have a list of textbox which is dynamically generated and and named with multi-dimensional array for posting to php later.
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']">
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
However, before the values get posted, i am trying to get the value of the specific textbox and do the validation.
var nodeValue = document.getElementsByName("node['X22']['in']").value;
alert(nodeValue);
Tried the above but it is not working. May i know is there a good way to parse trough the textbox list and get the specific textbox's value, let's say for 'X22' -> 'in'?
getElementsByName returns not a single element, but array-like object. Access the [0] indexed element of the result.
If you have unique elements, it will be better to get them by id (getElementById) which returns a single element.
var nodeValue = document.getElementsByName("node['X22']['in']")[0].value
// ----^^^----
alert(nodeValue);
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']" value='SomeValue'>
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
you need a value to get one
<html>
<head></head>
<body>
<input type="text" name="node['A11']['in']">
<input type="text" name="node['A11']['out']">
<input type="text" name="node['X22']['in']">
<input type="text" name="node['X22']['out']">
<input type="text" name="node['C66']['in']">
<input type="text" name="node['C66']['out']">
</body>
<script>
parse = function(){
var nodeValue = document.getElementsByName("node['X22']['in']");
console.log(nodeValue[0]);//to demonstrate that a nodelist is indeed returned.
}
parse()
</script>
</html>
You could use the id attribute and give it an identifier.
var nodeValue = document.getElementById("X22in").value;
console.log(nodeValue);
<input type="text" id="X22in" name="node['X22']['in']" value="foo">
<!-- ^^^^^^^^^^ -->
How can i remove the property of required to the Second Element "Second Name" ?
Here is my Code :
<form action="#" novalidate>
First Name:
<input type="text" name="first" required>
Second Name :
<input type="text" name="second" required>
<input type="submit">
</form>
You can set required property to false
$("input[name=class]").prop("required", false);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
Name: <input type="text" name="name" required>
Class: <input type="text" name="class" required>
<input type="submit">
</form>
Using jQuery you can do:
$('input[name=second]').prop('required', false);
Example
Try using .removeAttr().
$('input[name="class"]').removeAttr('required')
Try this:
$('input[type="text"][name="second"]').prop('required', false);
it just removes the required property on the target element which has the name "second".
you can use the
removeAttribute command:
First set ID's for the inputs.
I set it to the same value as the name.
Next removeAttribute
document.getElementById("class").removeAttribute("required");
This should do the trick ;)
Here, have a fiddle:
Fiddle
I have a simple form that has some required fields in it.
<form name="form" method="post">
<pre>
<label> Name: </label><input type="text" name="name" required>
<label> Address: </label><input type="text" name="add" required>
<label>Telephone: </label><input type="text" name="tel">
<input type="submit" value="Submit Form">
</pre>
</form>
I know you can set the required attribute using document.forms['form']['name'].required = false. But is there a way where you can just check if the required attribute is set or not? I tried using getattribute() but it just returns blank. I also tried using the code below, but it always executes the statement, even if the required attribute isn't set (e.g. on the telephone field).
if( document.forms['form']['name'].required = true)
label.innerHTML += " (required)"
Does anyone know of a way I can do this?
Update: Both setting the if statement to == instead of = and using hasAttribute work, thanks.
Try this :
var elem = document.getElementsByTagName('input')[0];
if(elem.hasAttribute('required')){
//do your stuff
}
I am trying to get value of input using js but it doesn't work. Where is my mistake?
Alert doesn't work.
<body>
<form name="inputform" id="form1" action="html_form_action.asp" method="get" style="visibility:hidden">
Email: <input type="text" name="email" ></input>
<input type="button" value="Gönder" onclick="CreateU()"></input>
</form>
</body>
js file:
var xmail="";
CreateU = function(){
var xx = "";
xmail=document.getElementById('email').value;
alert(xmail);
xx= myAddress + xmail + ans + tf;
window.location.assign(xx);
}
Your email input doesn't have an ID:
<input type="text" name="email" id="email" />
Add id to your "Email" input: <input type="text" name="email" id="email" ></input>
Have a look: http://jsfiddle.net/K8kp9/
Note that now you possibly see nothing because of style="visibility:hidden" at your form tag..
Have some reading: Difference between id and name attributes in HTML
email is a name, just change 'name' to 'id' ^^
please set the id in email
<body>
<form name="inputform" id="form1" action="html_form_action.asp" method="get" style="visibility:hidden">
Email: <input type="text" name="email" id="email" ></input>
<input type="button" value="Gönder" onclick="CreateU()"></input>
use id attribute in the input to get the value by using document.getElementById().
<input type="text" name="email" id="email" ></input>
you forgot to mention id='email' in your input element.
In tornado's template in I passed from code dictionary data with keys username and code
data = {'username' : 'pal', 'code' : 16281}
in ready function I am trying to set passed values to two inputs on page
$(document).ready(function() {
var d = "{{data}}";
alert(d);
$('#code').val({{data['code']}});
$('#username').val(d['username']);
});
...
<label for="username" class="ui-hidden-accessible">Username:</label>
<input type="text" placeholder="Username" name="username" id="username" class="large_input">
<label for="code" class="ui-hidden-accessible">Code:</label>
<input type="text" placeholder="Code" name="code" id="code" class="large_input">
Alert shows that dictionary is ok, but when I try to access on any way I got undefined value. I tried with passed data and with js dictionary d but it didn't work.
How to set passed values into template's fields ?
For HTML this would work:
<input value="{{data["username"]}}" type="text" placeholder="Username" name="username" id="username" class="large_input">
For your JS I image you need to write this instead:
$('#code').val('{{data['code']}}');