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.
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>
My code looks like this :
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
What I'm looking for this :
The input field's name should be "one" if the first button is clicked and "two" if the second button is clicked.
The form's action should be "first" if the first button is clicked and "second" if the second button is clicked.
So, if the user fills in "foo" in the text box and presses the first button, the browser should go to http://www.example.com/one?first=foo. If the user fills in "bar" and presses the second button, the browser should go to http://www.example.com/two?second=bar.
The easiest way to do it, is to use jQuery.
Full code :
<html>
<head>
</head>
<body>
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$('input[type=submit]').on('click', function (e) {
$('input[type=text]').attr('name', $(this).attr('value'));
$('form').attr('action', $(this).attr('formaction'));
});
</script>
</body>
</html>
Note 1 :
You need to make sure your jQuery code is at the bottom of your HTML page, so all of your HTML elements will be loaded when it is executed.
Alternatively, you could also use $( document ).ready() :
<html>
<head>
<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>
<script>
$( document ).ready(function() {
$('input[type=submit]').on('click', function (e) {
$('input[type=text]').attr('name', $(this).attr('value'));
$('form').attr('action', $(this).attr('formaction'));
});
});
</script>
</head>
<body>
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
</body>
</html>
Note 2 :
If you don't like to use jQuery, here's how you do the same thing with "vanilla" JavaScript :
<html>
<head>
</head>
<body>
<form method="get">
<input type="text">
<input type="submit" formaction="one" value="first">
<input type="submit" formaction="two" value="second">
</form>
<script>
Array.prototype.slice.call(document.querySelectorAll("input[type=submit]")).forEach(function(btn) {
btn.addEventListener("click", function(e) {
document.querySelector("input[type=text]").setAttribute('name', e.target.value);
e.target.form.action = e.target.getAttribute('formaction');
});
});
</script>
</body>
</html>
I want to change my form destination based on an input value.
How can I do this?
<form id="form" method="POST" action="x.php" onSubmit="">
<input type="url" id="address" value="google.com">
<input type="submit" id="go" value="Go">
</form>
Example: When I set http://google.com as address value, so send this form to google.com.
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#address").blur(function () {
var form = document.getElementById('form');
form.action = $("#address").val();
});
});
</script>
<form id="form" method="POST" action="x.php" onSubmit="">
<input type="text" id="address" value="google.com">
<input type="submit" id="go" value="Go">
</form>
I use
"How do I get the value of text input field using JavaScript?"
&
"How can I set the form action through JavaScript?" to write my code:
<script type="text/javascript">
function get_action(form) {
form.action = 'http://'+document.getElementById("address").value;
}
</script>
<form onsubmit="get_action(this);">
<input type="text" id="address" value="google.com">
<input type="submit" id="go" value="Go">
</form>
<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'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>