I'm a beginner about javascript, and I have some doubts about the variables of this language.
For example, I have this code:
<html>
<head>
<title>Prova_Index</title>
<script language="javascript" type="text/javascript">
function stampa(){
var Name = document.name.utente.value;
document.Write(Name);
}
</script>
</head>
<body>
<form name="name">
<p> Write some text:</p>
<input type="text" id="utente">
</form>
<input type="submit" value="Click me" onClick="stampa()">
</body>
</html>
This is the code, my doubts is specialy how save the values of the textbox with the id 'utente'.
write this code by replacing your code
function stampa()
{
var Name = document.getElementById('utente').value;
alert(Name);
return false;
}
<input type="text" id="utente">
<input type="submit" value="Click me" onclick="return stampa();" />
Instead of var Name = document.name.utente.value;, you probably want to use something like var Name = document.getElementById('utente').value;
Really, you might want to consider using jQuery instead. It's far more reliable for cross-browser oddities than using plain old DOM manipulation.
This Javascript should store the value of that input element into the variable 'Name' and then write it out.
var Name = document.getElementById("utente").value;
document.write(Name);
I will forewarn you that when you use HTML <form> tags and try to execute a function using a submit input, the page will submit and then the onClick function will not be executed.
First of all. Please explain us what you want to do. It isn't clear to us.
Second of all. I recommend using ID's when you are beginning with JavaScript programming.
When you take a look at your code. It will submit after the function is ready. So you can try and use this:
<input type="submit" value="click me" onclick="stampa( ); return false;" />
It won't submit the form and you can see your result.
You can also use an alert( ); function for debugging or console.log( ); if you use Firefox with Firebug or Opera with Dragonfly.
You can try this in your script:
console.log( document.getElementById( 'something' ).value( ) );
Related
I am trying to get a hyperlink element to act as a form submit button. This sort of question has been answered multiple times over the years but, for some reason, I am not able to get it to work even with cut-n-pasted code and I'm wondering if I'm missing something trivially simple that my eyes are too bugged out to see. The full code is here:
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function signup() {
alert("Form is " + document.signup_form);
document.signup_form.submit() ;
}
-->
</script>
</head>
<body>
<?php
echo("Submit is [" . $_POST['submit'] . "]");
?>
<form method="post" name="signup_form" id="signup_form" action="" >
<input type="text" name="from_email" placeholder="e-mail address"><br>
<input type="submit" name="submit" value="Send Email">
Sign Up!<br>
</form>
</body>
</html>
The input submit element ("Send Email") works fine. The hyperlink ("Sign Up!") also works fine and calls the javascript function so that the alert() box in the function shows up.
So, it's just the submit() call that's not doing anything--I even printed out document.signup_form in an alert() box to confirm that it's defined (it is). So what am I missing here?
Thanks for any help!
There is a weird thing with how forms work with Javascript - each field is accessible by using formElement.fieldName. Unfortunately, that means that if you name a field input submit, all of a sudden the built-in formElement.submit() function is replaced by your input element. So in your code, document.signup_form.submit() is failing because it is calling the element, not the method, and you can't call an element as a function. See this SO QA for details.
The fix is easy - change:
<input type="submit" name="submit" value="Send Email">
to:
<input type="submit" name="submitBtn" value="Send Email">
Also, as others have noted, you will want to give your form a valid action. Also, in general it might be preferred to access things by id (document.getElementById()) instead of by things like document.signup_form.
Your <form> element is missing a value in it's action attribute. Quoting the specs:
You also have to specify the URL of the service that will handle the
submitted data, using the action attribute
Link here
I'm trying to make a simple page to send IR codes to an app on my phone (OneRemoteToControlThemAll). This is how the dev of the app shows to communicate with it via html, which works 100% fine.
>"Send codes using URI "otrta://code?id=xxx" or "otrta://script?id=xxx" - use it for HTML layouts!"
<button type="button">Left</button>
But, this only works with a pre-entered id. So, I want to have a text box with a button that when the button is clicked it sends the code entered in the box. I've looked around for different methods and tried many, none quite working. Here's my most recent attempt:
<script type="text/javascript">
function myfunction()
{
var code = "otrta://code?id=" + document.getElementById("textbox1").value;
return code;
}
</script>
html:
<input type="text" name="textbox1" Id="textbox1" style="width: 194px"/>
<button type="button" id="submit">Submit</button>
Right now on chrome on my PC this takes me to a page and outputs otrta://code?id=1234 or whatever numbers I had entered. On my phone the button does nothing. Any solutions on how to make it act the same as the others and work? It doesn't need to be perfect form, just something that will work, thanks for any help.
Your return value is getting discarded. You need to set the href property of window.location.
<script type="text/javascript">
function set_href() {
var code = "otrta://code?id=" + document.getElementById("textbox1").value;
window.location.href = code;
}
</script>
--
<input type='submit' onclick='set_href()'>
Try replacing the href itself:
function myfunction(link) {
link.href = "otrta://code?id=" + document.getElementById("textbox1").value;
}
<input type="text" name="textbox1" Id="textbox1" style="width: 194px" />
<button type="button" id="submit"><a href="#" onclick='myfunction(this);'>Submit</a>
</button>
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'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>
I'm trying to intercept the submission of a form in order to change the value of my keywords label.
I have the following code:
<HTML>
<FORM name="searchForm" method="get" action="tmp.html" >
<input type="text" name="keywords" />
<input type="button" name="submit" value="submit" onclick="formIntercept();"/>
</FORM>
<SCRIPT language="JavaScript">
document.searchForm.keywords.focus();
function formIntercept( ) {
var f = document.forms['searchForm'];
f.keywords.value = 'boo';
f.submit();
};
</SCRIPT>
</HTML>
When I run this in chrome and click the submit button the keywords label changes to boo, but the javascript console says:
Uncaught TypeError: Property 'submit' of object <#an HtmlFormElement> is not a function.
How can I submit the form with the manipulated keywords?
The reason for the error when trying to call form.submit() is that your submit button is called "submit". This means that the "submit" property of your Form object is now a reference to the submit button, overriding the "submit" method of the form's prototype.
Renaming the submit button would allow you to call the submit() method without error.
The problem is that when some element is <input type="submit" name="submit" /> submit() method will not work. The best solution to this situation is to change the name of that submit type input to something else for example button-submit etc.
<html>
<head></head>
<body>
<form name="searchForm" method="get" action="tmp.html" onsubmit="formIntercept(this);">
<input type="text" name="keywords" />
<input type="submit" name="submit" value="submit"/>
</form>
<script type="text/javascript">
document.searchForm.keywords.focus();
function formIntercept( form ) {
form.keywords.value = 'boo';
//form.submit();
}
</script>
</body>
</html>
See jQuery .submit().
$("form").submit( function() {
// TODO tweak your form data before it gets sent
});
Just change the name of submit button and it'll work!
Chris Butler explained the issue well.
You can use a native submit method of HTMLFormElement to work around a problem.
In your case:
function formIntercept( ) {
var f = document.forms['searchForm'];
f.keywords.value = 'boo';
HTMLFormElement.prototype.submit.call(f);
};