After my test,
The first way to write
<form name="form" >
<input type="text" id="tx1" value="123"><br>
</form>
<script>
alert(form.tx1.value);
</script>
The second way to write
<form id="form" >
<input type="text" id="tx1" value="123"><br>
</form>
<script>
alert(form.tx1.value);
</script>
The third way to write
<form id="form" >
<input type="text" id="tx1" value="123"><br>
</form>
<script>
alert(form.elements['tx1'].value);
</script>
The forth way to write
<form id="form" >
<input type="text" name="tx1" value="123"><br>
</form>
<script>
alert(form.elements['tx1'].value);
</script>
........
Permutations and combinations are many, pay attention to the form's id, name and input the id, the name, combined with the wording of the js, no matter how you write, are no problem. .
There is no standard at all. . . .
Actually, there is a standard: http://www.w3.org/TR/2003/REC-DOM-Level-2-HTML-20030109/html.html#ID-40002357
On top of the standard, most browsers implement additional features.
The safest way to refer to form elements through a named collection is:
<form name="formname">
<input type="text" name="tx1" value="123">
</form>
<script>
alert(document.forms['formname'].elements['tx1'].value);
</script>
document.forms is a HTMLCollection of <form> elements. In each of these form, the elements property is a collection of all form input elements. All elements have to be referred by name.
What about this?
<form id="form" >
<input type="text" id="tx1" value="123"><br/>
</form>
<script>
alert(tx1.value);
</script>
Related
How to add arguments in a form action using input type="hidden".
My HTML snippet...
<form id="form1">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
My JavaScript snippet...
function add()
{
document.getElementsByName('usID').value=789;
document.getElementsByName('usname').value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
After entering "text" in the textbox and pressing ADD, the link looks like this...
http://localhost:3000/page?txt=text&usID=123&usname=name1
Why hasn't the usID and usname changed to 789 and "name2" respectively?
Any other alternative if not this?
getElementsByName is going to return a collection of html elements (NodeList), not a single html element. meaning the return value doesnt have a value attribute that will change the input. you need to either give them an id and find them with getElementById and then change the value, or grab the first element of your collection
document.getElementsByName('usname')[0].value="name2";
or (preferred way)
<input type="hidden" name="usname" value="name1" id="usname"/>
function add(){
document.getElementById('usname').value="name2";
...
}
though i have to ask, is there a reason you're changing the hidden field element like this?
this help you :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function add()
{
var usID = document.forms["frm"]["usID"];
var usname = document.forms["frm"]["usname"];
usID.value=789;
usname.value="name2";
document.getElementById('form1').action = "/page";
document.getElementById('form1').submit();
}
</script>
<h3>Please select the <span>first letter</span> of your <span>last name</span>: </h3>
<form id="form1" name="frm">
<input type="text" name="txt"/>
<input type="hidden" name="usID" value=123/>
<input type="hidden" name="usname" value="name1"/>
<input type="submit" onclick="add()" value="ADD"/>
</form>
</body>
</html>
I have this input:
<input type="hidden" name="rekord" id="rekord" value="21" />
I have this code:
<script type="text/javascript">
var foo = document.getElementById('rekord').value;
</script>
Now I need to have this 21 in PHP.
How to do that?
<form method="POST" action="">
<input
type="hidden"
name="rekord"
id="rekord"
value="21"
onchange="this.form.submit()" />
</form>
If this doesn't work, you could use the JavaScript, which changes this input-field, to also send this form. You need an id for the form:
<form method="POST" action="" id="rekordForm">
then you can add to your JS sth like:
document.getElementById("rekordForm").submit();
I have a form like :
<form name="myform">
<input type="text" name="input" />
</form>
But my input is not available in $scope.myform.input and neither by {{ myform.input }}. I tried to add a ng-minlength:
<form name="myform" novalidate>
<input type="text" name="input" ng-minlength="10" />
</form>
And even by typing something shorter than 10, myform is still valid. It's like the input is not part of the form at all.
Here is an example hosted on jsfiddle: http://jsfiddle.net/saag0agc/
AngularJS Documentation on input text: https://docs.angularjs.org/api/ng/input/input%5Btext%5D
You need an ng-model attribute. For example:
<form name="myform">
<input type="text" name="input" ng-model="input" />
</form>
Then you can access the content via:
{{ input }}
Although I would suggest using a name/model other than input.
The ng-model property is missing on the input.
<form name="myform">
<input type="text" name="input" ng-model="myform.input" />
</form>
i'm studying javascript but i can't find some clear reference about how getting and treat data out of the HTML forms.
Here an example:
THE FORM:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script></HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" > </FORM>
</BODY>
<HTML>
//HERE JAVASCRIPT Javascript BASIC.js:
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
}
I would like to know what i'm doing wrong, because nothing happen when i click submit. And which is the better solution for handling forms with javascript?? Using "action"? or which of other attributes?
The value of form elements are contained in their value attribute. Try the modified code snippet below.
Note: ("idsearched") should be without quote because it is a variable and not a string.
var idsearched=document.getElementById("id").value;
document.write(idsearched);
You must add an id attribute to the form element.
<INPUT TYPE="TEXT" NAME="id" id="id">
Use this line to manually submit your form
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
<INPUT TYPE="button" value="Submit" onclick="submitForm();" >
do not use document.write use document.getElementById("myID").innerHTML
a full working example like you wanted is that:
<HTML>
<HEAD>
<TITLE>Database Lookup</TITLE>
<script src="basic.js"></script>
</HEAD>
<BODY>
<H1>Database Lookup</H1>
<FORM action="javascript: submitForm();">
Please enter the ID of the publisher you want to find: <BR>
<INPUT TYPE="TEXT" id="id" NAME="id">
<BR>
<INPUT TYPE="SUBMIT" value="Submit" >
</FORM>
<script type="text/javascript">
function submitForm()
{
var idsearched=document.getElementById("id").innerHTML;
document.write("idsearched");
return false;
}
</script>
</BODY>
<HTML>
How to take content from a div class one by one and then load it into array? Then I need to insert these one by one to some other div class.
Basically, I have 2 forms, one of which is dummy and this dummy gets its content from CMS. The dummy form is hidden, while real form is shown, but empty at first.
I need to use jquery to take dummy text from form and insert it to real form.
Something like this:
<form name="real" method="post" action="">
<input type="text" name="first" id="a"/>
<input type="text" name="second" id="b"/>
<input type="text" name="third" id="c"/>
<input type="text" name="fourth" id="d"/>
<input type="submit" value="submit"/>
</form>
<form name="extract" style="display:none;">
<div class="generic">data_1</div>
<div class="generic">data_2</div>
<div class="generic">data_3</div>
<div class="generic">data_4</div>
</form>
must become something like this:
<form name="real" method="post" action="">
data_1 <input type="text" name="first" id="a"/>
data_2 <input type="text" name="second" id="b"/>
data_3 <input type="text" name="third" id="c"/>
data_4 <input type="text" name="fourth" id="d"/>
<input type="submit" value="submit"/>
</form>
Is there a way to do this?
Thanks!
There are many ways to do this. For example:
$('[name=extract] div').each(function(index){
$('[name=real] input:eq('+index+')').before($(this).text());
});
http://jsfiddle.net/seeSv/
edit: here are the api pages to the methods used:
http://api.jquery.com/attribute-equals-selector/
http://api.jquery.com/each/
http://api.jquery.com/eq-selector/
http://api.jquery.com/before/
You may want to check out the jQuery DataLink Plugin
I'll offer this version:
$('.generic').each(
function(i){
$('input:text').eq(i).val($(this).text());
});
JS Fiddle demo.
Assumptions:
a 1:1 ratio between div.generic:input[type=text]
References:
each(),
:text pseudo-selector
eq().