I've just been testing some code, and I can't get this to work:
<HTML>
<head>
<title> Page 1 </title>
<script>
function myFunction()
{
var x=document.getElementById("myEmail")
document.write(x)
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</HTML>
All I'm trying to is have the user type something into a text, being read by the parser, putting it into a variable, then printing the variable on screen. It would help me a lot with other projects I've got on if I knew this. Can anyone help?
NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something?
Step 1 is to use HTML 5, indent your code, and use semicolons.
<!DOCTYPE html>
<html>
<head>
<title> Page 1 </title>
<script>
function myFunction() {
var x = document.getElementById("myEmail");
document.write(x);
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>
Step 2 is to look at what’s being written, see that it’s null, intuit when document.getElementById would return null, and realize that there is no element with an id of myEmail in your document. It just has a name. Drop the form while you’re at it.
<body>
<p>Input your email </p>
<input id="myEmail" type="text">
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
The next step is to try that again and realize that x is an element, not a string, and you want to get its value.
function myFunction() {
var x = document.getElementById("myEmail");
document.write(x.value);
}
The “good future practice” steps are, in no particular order:
Put your script at the bottom and stop using inline event listeners
Put your script in an external file
Use a <label>
If you’re not going to do something more useful than write the e-mail back, consider also using document.body.appendChild(document.createTextNode(…)), which will not obliterate the rest of the document. The DOM is really great.
Add an id to the input
<input name="myEmail" type="text" id="myEmail">
then write the value
document.write(x.value)
document.getElementById returns the DOM element. Printing the DOM element is not meaningful and its output may vary by browser.
What you want is to print the input value of the input field, so check the value property:
function myFunction()
{
var x=document.getElementById("myEmail").value
document.write(x)
}
Secondly, your HTML code does not have an ID attribute on the element, so the getElementById lookup will fail. Add an ID:
<input name="myEmail" type="text" id="myEmail">
Regarding your note about HTML 4 vs. HTML 5.
NOTE: I don't want to use HTML5 because it removes some of the tags that I like, so could we use HTML 4.01 or something?
That comment is interesting. Without knowing specifically which tags you are referring to, I cannot say why they are removed, but I imagine there is likely an equivalent. HTML 5 does not remove any capabilities of HTML that I am aware of.
That is like saying you won't drive a car with an automatic transmission because it doesn't have a clutch.
All you have to do is add an id attribute having the same value as the value of your name attribute of input type="text" and modify your script to store value instead of the element itself.
<html>
<head>
<title> Page 1 </title>
<script>
function myFunction()
{
var x=document.getElementById("myEmail").value;
document.write(x);
}
</script>
</head>
<body>
<form>
<p> Input your email </p>
<input name="myEmail" id="myEmail" type="text">
</form>
<button type="button" onclick="myFunction()">Submit Email</button>
</body>
</html>
Related
I've searched around both stackoverflow and the web for answers to my question, but can't find the right solution.
I am trying to create a text field and button, so that a user can enter a number in the text field and when they click the button it takes them to a URL with that number added to the end of the URL.
For example http://www.website.com/trackingid/NUMBERHERE
If the user typed 000000 in the text field and then hit the button the URL navigated would be http://www.website.com/trackingid/000000
Any help much appreciated.
Thanks
There are two ways of addressing this:
You could use JavaScript's window.location
You could make the button a link and change it's href
Using window.location
Let's assume your html structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" id="number" placeholder="Enter number here" />
<!-- The button -->
<button onclick="forward();">Send</button>
</form>
When you click the button, the forward() javascript method gets called. This method looks like this:
function forward() {
// select the input field
number = document.getElementById("number");
// forward to the new page
window.location = "http://www.website.com/trackingid/" + number.value;
}
Changing the link's href
Now the structure looks like this:
<form>
<!-- The field in which the user types the number -->
<input type="text" oninput="changeLink(this.value);" placeholder="Enter number here" />
<!-- The button -->
<a id="buttonLink"><button>Send</button></a>
</form>
Notice that the <a>-tag is still completely empty except it's id.
The oninput= calls the JavaScript function changeLink(); with it's current value as a parameter whenever something is written or deleted in it.
This function should look like this;
function changeLink(value) {
// select the link
link = document.getElementById("buttonLink");
// change it's href
link.href = "http://www.website.com/trackingid/" + value
}
I hope this helps. If you have any questions, feel free to ask.
You need JavaScript to do this.
HTML:
<input type="text" id="inputId">
<button type="button" id="buttonId">Click me</button>
JavaScript:
document.getElementById('buttonId').addEventListener('click', function() {
window.location.href = "http://www.website.com/trackingid/" + document.getElementById('inputId').value;
});
Solved your issue please check my solution
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<title>nirajpatel.mdl#gmail.com</title>
</head>
<body>
<input type="text" id="num" name="num">
<button id="button">Go Url</button>
</body>
<script type="text/javascript">
$(document).ready(function(){
url = "http://www.website.com/trackingid/";
$("#button").click(function(){
var num = $("#num").val();
window.location.replace(url+num);
});
});
</script>
</html>
This is my HTML:
<html>
<head>
<script>
function ppid() {
var ppidtxt = document.getElementById('ppid').value;
var newppidtxt = ppidtxt.toUpperCase();
var ppide = document.getElementById('ppid');
ppide.value = newppidtxt;
}
</script>
</head>
<body>
<form>
<center><input type="text" id="ppid" class="form-control" name="ppid" placeholder="Personal Project ID" onchange="ppid();" /></center>
</form>
</body>
</html>
I've tried this is JSFiddle, on my local PC, pretty much everywhere but for some reason, whenever I type something in the form's text box with the id "ppid" it isn't capitalizing it. What have I done wrong?
Try using onkeyup instead, e.g.
<input type="text" onkeyup="this.value=this.value.toUpperCase()" />
I don't know why this happens, but when onchange is called, 'ppid' contains the HTMLInputElement (probably because of its id).
If you rename the function to something unique (like 'myFunc') it works.
#MelanciaUK brought the answer with this link: Why JS function name conflicts with element ID?
I have a page in which buttons are dynamically generated by PHP based on a MySQL table. Each button is inside an anchor tag. When the anchor tag is clicked, it calls a Javascript function which performs several operations.
For one of these operations, I need to get the value of the button and pass it as a parameter. AFAIK, I can't use an ID because the buttons are dynamically generated and there may be any number of them.
Here's the button/anchor code:
<button type="button" class="regbutton" value="'.$row['instance_id'].'">'.$row['DATE'].'</button></span>';
It seems that jQuery functions like .next() only apply to sets of elements like li as opposed to two dissimilar element types. Any ideas?
Maybe it's not valid HTML, but you can make it work.
I made a JSFiddle example, by selecting the button element of the children i retrieve the value.
<script>
function updateDetails(a, b, c){
alert(c);
}
</script>
<button type="button" class="regbutton" value="test">click</button>
I hope this solution fits for you :).
Stefan
I hope this works fine if you are using JavaScript.
<!DOCTYPE html>
<html>
<head>
<script>
function test()
{
alert("Hiii");
var x=document.myForm.click.value;
alert(x);
}
</script>
</head>
<body>
<form name="myForm" action="html_form_action.asp" method="get">
<input type="button" name="click" value="click" onclick="test()"/>
</form>
</body>
</html>
I'm a beginner javascript user and I'm trying to get this html form to pass to this javascript function and output the name variable but all that happens when I click the button to submit is that the form input clears and it stays on the form not passing to the javascript.
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Life Insurance Calculator</title>
<script type="text/javascript">
var title = "Welcome to Life Insurance Co..!";
//Declaring variable title
document.writeln(title.fontsize(8).fontcolor('red'));
//Printing out the title on the page
function Name(form){
var customername = document.getElementByID("name").value;
document.write(customername);
}
</script>
</head>
<body>
<form name = "LifeCalcForm" action="" method="get">
<p>To get a life insurance quote, please tell us about yourself.</p>
<p><i>Note:only those under the age of 80 and non-smokers may apply</i></p>
<p>Enter your name: <input type="text" name="name" /></p>
<input type="submit" value="Calculate" onClick="Name(this.form)">
</form>
</body>
</html>
When you do document.write(customername); after the page has loaded (specifically, after the load event), it will first clear the entire page (including scripts) and write the new content.
Instead do something like:
alert(customername);
Once you clear the alert (e.g. click "OK"), the form will submit and the page will reload.
Incidentally, since you pass a reference to the function in the call, and the form control has a name, you can use:
alert(form.name.value);
Be aware that form control names and IDs are used to create properties of the form object, so having a form control with a name of "name" overwrites the form's own name property (forms also have properties like submit, action, elements, reset and so on). So never use a control name that might be the same as a standard form property name, use things like "userName" or such.
Variable names are, by convention, reserved for constructor functions so use lower case for normal functions. Also, functions are do things so it's generally best to use a verb that describes what it does, e.g.
function getUserName(form) {
return form.userName.value;
}
Try this:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Life Insurance Calculator</title>
<script type="text/javascript">
var title = "Welcome to Life Insurance Co..!";
// Declaring variable title
document.writeln(title.fontsize(8).fontcolor('red'));
// Printing out the title on the page
function Name(){
var customername = document.getElementById("name").value;
document.write(customername);
}
</script>
</head>
<body>
<form name = "LifeCalcForm" action="" method="get">
<p>To get a life insurance quote, please tell us about yourself.</p>
<p><i>Note:only those under the age of 80 and non-smokers may apply</i></p>
<p>Enter your name: <input type="text" id="name" name="name" /></p>
<input type="button" value="Calculate" onClick="Name()">
</form>
</body>
</html>
I'm working on a simple javascript quiz, and I can't for the life of me get Javascript to submit the form and open the result in the same page, regardless of whether I use location.href, open.window, or whether I set "_self" as the target. Doesn't seem to matter what I do...
function answer() {
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location.href('right.html');
else
location.href('wrong.html');
}
<form onSubmit="answer()" id="answer" target="_self">
<input type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
So, what I want to happen is, when the user submits the form, they go to "right.html" if they typed correctanswer into the text box, or "wrong.html" if they typed anything else.
I've got it running fine, except for the fact that no matter what I do I can't get the resulting page to open in _self, but rather in another window. Every time.
Been driving me crazy all night.
Five things:
Remove the target attribute of form entirely. The default is the same window. Although it doesn't really matter, because:
Cancel the submit event by returning false in your onSubmit, since you're handling the form in your own code. One easy way to do this is have your function return false, and in the onSubmit, return the result of the call.
This line is incorrect:
var response = document.getElementById('answer').value;
form elements don't have a value. You'd want to put the id on the input type="text" element instead.
The href on location is not a function, it's a property. You just assign to it (or just assign directly to location).
This one's a bit subtle: Because you have a global function called answer, and you have an element with an id "answer", there's a conflict: Both want to end up as properties of the window object (one of many reasons not to use old DOM0 onxyz attributes — or global functions, come to that). So you need to change the name of one of them, e.g., change the function to checkAnswer or similar.
So:
<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
And:
function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location = 'right.html';
else
location = 'wrong.html';
return false;
}
Full Example: Live Copy | Live Source
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
<form onSubmit="return checkAnswer();">
<input id="answer" type="text" maxlength="55" class="box" autofocus />
<input type="submit" class="submit" value="SUBMIT" />
</form>
<script>
function checkAnswer(){
var response = document.getElementById('answer').value;
if (response == "correctanswer")
location = 'http://jsbin.com/ukifoh/1'; // 'right.html';
else
location = 'http://jsbin.com/ukifoh/2'; // 'wrong.html';
return false;
}
</script>
</body>
</html>
I would recommend always using consistent, useful code indentation, and I'm a big fan of always using blocks, not just statements, with control structures.