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>
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>
Javascript validation is not working! Form is submitting even if function returns false. Where i should make changes? Here is the part of the code i wrote.
<html>
<head>
<script>
function check()
{
temp=document.getElementById("name").value;
if(temp=="")
{
document.getElementById("err").innerHTML="error found";
document.getElementById("name").focus();
return false;
}
}
</script>
</head>
<body>
<form>
<input type="text" id="name">
<div id="err"></div>
<input type="submit" onClick="check()">
</form>
</body>
</html>
I would suggest you to use onSubmit event of form instead of onClick event of button.
You also need to use return with HTML onevent attributes
HTML
<form onSubmit="return check()">
<input type="text" id="name"/>
<div id="err"></div>
<input type="submit" />
</form>
DEMO
I want to make an html where you enter a keyword.
<html>
<head>
<title>Options</title>
</head>
<body>
<input name="Keyword" type="text">
<input name="Submit" type="submit" value="Submit">
</body>
</html>
I want to use that keyword in a javascript between these quotations
var shoeName = "";
This is for a chrome extension so on the options page I want to enter a keyword, submit it and have it automatically put it into the javascript
You can do it by setting an ID for the element and accessing the element using the ID.
HTML:
<html>
<head>
<title>Options</title>
</head>
<body>
<input id="keyText" name="Keyword" type="text">
<input name="Submit" type="submit" value="Submit">
</body>
</html>
JS:
<script>
var shoeName = document.getElementById("keyText").value;
</script>
Happy coding.
You can get the input value using
shoeName = $("input[name='Keyword']").val(); // if you can not add id
if id can be added just do
$('#inputid").val()
or if you want data on form submit do
<form name="myForm" id="testForm" method="POST" action="send.php">
<input name="Keyword" type="text">
<input name="Submit" type="submit" value="Submit"
</form>
var shoeName = "";
$("form[name='myForm']").submit(function(){
shoeName = $("input[name='Keyword']").val()
// other processing
});
Try this:
var shoeName;
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('keyword').addEventListener('keyup', function() {
shoeName = this.value;
});
});
Every time text is added to the textbox, shoeName is being updated.
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
</body>
now its working but output shows as id:name:address no entered values are displayed
You spelled alert wrong in your script
I'm not JS expert, but maybe You need <form> tags around submit form. You could also just use getelementbyid.
your alret should be alert. now it works :)
<title>Javascript</title>
<script>
function buttonreport(id,name,address){
var userid ="Id:"+id;
var username="Name :"+name+"\n";
var useraddress ="Address:"+address+"\n";
alert(userid+username+useraddress);
}
</script>
</head>
<body>
ID:<input type="text" name="id"/><br/>
NAME:<input type="text" name="name"/><br/>
ADDRESS:<input type="text" name="address"/><br/>
<input type="submit" value="Submit" onclick="buttonreport(this.id,this.name,this.address)"/>
I have my HTML structure in the following format
<div>
<form class="form-inline" style="padding-top:10px" action="javascript:function()"> <!-- a search bar-->
<input id="id" type="text" " placeholder="Something">
</form>
<button onClick="somefunction()"> b</button>
</div>
the problem is I want the search bar to work when I press enter in it but unfortunately it is submitting the button element , I am slightly confused as the button is not a form element and I have specifically defined onClick. I am new to javascript so I am sure it is something small but I have not been able to solve it.
ie when I press enter , the "somefunction()" gets active as opposed to "function()"
Try this
HTML
<div>
<form class="form-inline" style="padding-top:10px" action="someFile.php" onsubmit="return someFunc();">
<input id="id" type="text" placeholder="Something">
<input type="submit" name="btn_submit" value="Submit" />
</form>
</div>
JS
function someFunc(){
// code goes here
return false;
}
Just an example.
You may put your button inside the form and have the function called in onClick return false, as discussed here.
EDIT
According to your edit and your comments on what you want, you may do the following:
<html>
<head>
<script>
function formfunction(){
alert("form function is called.");
}
function somefunction(){
alert("the button is clicked.");
}
</script>
</head>
<body>
<div>
<form name="myform" action="#" onsubmit="formfunction(); return false;">
<input id="id" type="text" placeholder="Something">
</form>
<button type="button" onClick="somefunction()"> b</button>
</form>
</div>
</body>
</html>