I have a simple form like this:
<form method="post" id="login">
Username: <input type="text" value="" name="usr" />
Password: <input type="password" value="" name="pw"/>
<input type="submit" id="log" name="log" value="Login" style="width:250px;"/><br/>
</form>
But i keep getting cannot read property for my javascript with this line:
var usr = login.usr.value;
var pw = login.pw.value;
What is the reason i get this error ?
Try to give your form a name and change your code like below :
<form method="post" id="login" name="login">
Username: <input type="text" value="" name="usr" />
Password: <input type="password" value="" name="pw"/>
<input type="submit" id="log" name="log" value="Login" style="width:250px;"/><br/>
</form>
and the in your javascript :
var usr = document.login.usr.value;
You can check here (jsfiddle link).
<input type="text" value="" name="usr" /> does not magically become the variable login.usr, you need to define the value based on the DOM.
var usr = document.login.usr.value;
Try using getElementsByName:
The getElementsByName() method accesses all elements with the specified name.
var usr = document.getElementsByName('usr')[0].value;
var pw = document.getElementsByName('pw')[0].value;
http://jsfiddle.net/L3RvL/
Method 1:
<form method="post" id="login">
Username: <input type="text" value="" name="usr" />
var form = document.getElementById("login"); //DOM access
var usr = form.elements["usr"]; // Forms access
Method 2 - not valid xhtml:
<form method="post" name="login">
Username: <input type="text" value="" name="usr" />
var form = document.login; // Forms access
var usr = form.elements["usr"]; // Forms access
Method 3:
<form method="post">
Username: <input type="text" value="" name="usr" />
var usr = document.getElementsByName("usr")[0]; // first field on page named this
Method 4: - preferred these days since ID MUST be unique - less useful if there are more forms with usr on the page that needs same validation
<form method="post">
Username: <input type="text" value="" id="usr" name="usr" />
var usr = document.getElementById("usr");
Works in every browser:
document.forms["login"].elements["usr"].value;
document.forms["login"].elements["pw"].value;
Related
Trying to get my form to submit to no avail. Totally new to javascript and HTML so any help would be much appreciated!
<form class="form" id="MyForm" onsubmit="submit(get('name').value, get('email').value, get('information').value); return false;">
I assume that you have an input element with type="submit" attribute.
If you want to keep the input values while submitting. You could use "this.[name].value" as a onsubmit function parameter.
So that, an example form should be like this:
function myFunction(name, email, information) {
alert("name" + value);
alert("email" + value);
alert("information" + value);
}
<p>Example form that returns input value as an alert.</p>
<form onsubmit="myFunction(this.name.value, this.email.value, this.information.value)">
name: <input type="text" name="name"><br>
email: <input type="text" name="email"><br>
information: <input type="text" name="information"><br>
<input type="submit" value="Submit">
</form>
try this
<form onsubmit="myFunction()">
Enter name: <input id="name" name="name" type="text">
Enter email: <input id="email" name="email" type="text">
<!--And more inputs...-->
<input type="submit" value="Submit">
</form>
add this code below your form
<script type="text/javascript">
function myFunction() {
// My Example code (I think you want get input value, True??)
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
// Or put your code in here
}
</script>
I hope its works, good luck.
I want to save values from inputs in the form into variables Like this example.
<form action="test3" method="POST">
Activity name: <input type="text" name="fname" id='nm'><br>
input1: <input type="text" name="input1" id='in1'><br>
input2: <input type="text" name="input2" id='in2'><br>
output1: <input type="text" name="output1" id='out1'><br>
output2: <input type="text" name="output2" id='out2'><br>
<input type="submit" value="Submit">
</form>
var valname=document.getElementById("nm").value;
var valin1=document.getElementById("in1").value;
var valin2=document.getElementById("in2").value;
var valout1=document.getElementById("out1").value;
var valout2=document.getElementById("out2").value;
Now, how can i get value into a general variable like : var valeur=valin1;
You could use FormData
var form = document.querySelector('form');
var data = new FormData(form);
Best off adding an ID to the form though and getById as if you had multiple forms on a page, this wouldn't solve it.
Mozilla API Docs
when i try to get the text value from the input text, the value returned is "undefined". This function return: "username: undefined" and my input text have a value.
this.loadForm = function() {
$("#response-container").load("formLogin.php", function() {
$("#formLogin").submit(function(event) {
var user = $("#username").val();
alert("username: "+user);
event.preventDefault();
});
});
}; //END loadForm FUNCTION
formLogin.php
<form id="formLogin" method="get" action="20.html">
USERNAME:
<br>
<input type="text" name="username" />
<br> PASSWORD:
<br>
<input type="password" name="password" />
<br>
<br>
<input type="submit" value="Log in" name="login" id="btnInputLogin" onsubmit="return false" />
</form>
Check Your Selector
You need to use an id attribute if you are using the $('#id') syntax in jQuery as the # indicates that you are explicitly targeting an element with the id attribute that follows the # character:
<input type="text" id='username' name="username" />
If you want to reference something by a name, you would need to use an attribute equals selector to explicitly target the name attribute :
var user = $('[name="username"]').val();
There is no input with #username. Either add that id attribute or use
$('input[name="username"]')
Replace:
<input type="text" name="username" />
To
<input type="text" name="username" id="username"/>
Looks like your jquery here: $("#username").val(); is trying to get an id that doesn't exist.
You could add an id to the password input <input id="password"> which should work.
Or you can get it with the current name $('[name="password"]').val()
JS prints incoming form names correctly however I'm getting error message below when validating form element. Form names are generated dynamically in a loop.
Thanks
ERROR
TypeError: document.form_name is undefined
JS
function validate_update(form_id)
{
var form_name = 'form_bottom_update_' + form_id;
//alert (form_name); //Prints form name correctly as form_1, form_2, form_3
var bg_name = (document.form_name.bg_name.value).replace(/ /gi, "");
if (bg_name == '')
{
alert('Enter a Name');
return false;
}
return true;
}
HTML
<form name="form_1" action="update.php" method="POST" onsubmit="return validate_update(1);">
<input type="text" name="bg_name" value="" />
<input type="submit" name="submit" value="Update" />
</form>
<form name="form_2" action="update.php" method="POST" onsubmit="return validate_update(2);">
<input type="text" name="bg_name" value="" />
<input type="submit" name="submit" value="Update" />
</form>
<form name="form_3" action="update.php" method="POST" onsubmit="return validate_update(3);">
<input type="text" name="bg_name" value="" />
<input type="submit" name="submit" value="Update" />
</form>
Shoudn't that:
var bg_name = (document.form_name.bg_name.value).replace(/ /gi, "");
be:
var bg_name = (form_name.bg_name.value).replace(/ /gi, "");
You print the form_name variable, but later you use document.form_name which is a different object.
Either use the later, or when assigning the bg_name, use the document:
document.form_name = 'form_bottom_update_' + form_id;
Changes approach to solve the problem. Form name remain same, text name becomes dynamic.
function validate_update(form_id)
{
var element_name = 'bg_name_' + form_id;
var bg_name = (document.getElementsByName(element_name)[0].value).replace(/ /gi, "");
if (bg_name == '')
{
alert('Enter a Name');
return false;
}
return true;
}
<form name="form" action="update.php" method="POST" onsubmit="return validate_update(2);">
<input type="text" name="bg_name_2" value="" />
<input type="submit" name="submit" value="Update" />
</form>
you haven't used form_id anywhere in your html so how could you call it in javascript
I have a form
<form id="post_comment" action="cmt.php" method="post">
<input type="hidden" name="type" value="sub" />
<textarea id="body"></textarea>
</form>
I am accessing the form using this code
$("#post_comment").submit(function(event){
var form = $(this);
});
How can I get the value of <input type="hidden" name="type" value="sub" /> from this form.
I tried to get using form.input("type") but it is not working.
$("#post_comment").submit(function(event){
var inputValue = $("input[name='type']",this).val();
});
Try using an id like this:
<form id="post_comment" action="cmt.php" method="post">
<input type="hidden" id='hidden' name="type" value="sub" />
<textarea id="body"></textarea>
</form>
and later:
$("#post_comment").submit(function(event){
var hiddenValue = $("#hidden").val();
});
<form id="post_comment" action="" method="post">
<input type="hidden" class="hidden" name="type" value="sub" />
<textarea id="body"></textarea>
<input type="submit" value="submit" class="submit"/>
</form>
$(".submit").click(function(){
var hiddenVal=jQuery("#post_comment .hidden").val();
//alert(hiddenVal);
});
var form = $(this);
var inputValue = form.find('input[name="type"]').val();
or
var form = $(this);
var inputValue = form.find('input:hidden').val();
Another approach for this
Consider if you have multiple forms with multiple input fields having name attribute than this code will be helpful for you :
$("#formId input[name='valueOfNameAttribute']").val()
$("#formId textarea[name='message']").val()
Hope it'll help somebody.
$("#post_comment").submit(function(event){
var form = $("input[name='type']").val();
})