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?
Related
I am new to java script. I have created an input which is requires the user to input some text to enable the submit button.
<input class="param" name="test" id="test" required ng-model="test">
How can I fill in the input text box using Java Script so I can submit the form (as if the user has entered the text). Currently, when I use for example the following script to update the value, the submit button on the form is not active.
document.getElementById("test").value =1
Could you update the attribute that ng-model is bound to? That should apply the value to the text field correctly.
I have created this example code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function updateValue() {
document.getElementById("test").value = 'test';
}
window.onload = function () {
updateValue();
}
</script>
</head>
<body>
<form action="" method="post">
<input type="text" id="test" name="test" required>
<input type="submit" value="Okay">
</form>
</body>
</html>
This is what Phani Kumar M and Claies were asking for. I tested it on Windows 10 in Firefox 55.0.3 and Chrome 60.0.3112.113. In both browsers it works correctly. The form can be submitted without adding anything to the field.
Others can check other platforms. As mentioned, the required attribute will not work in Safari.
Your problem is somewhere else. I don't know anything about AngularJS, which you seem to be using without even mentioning it, but it might be there.
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>
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 am currently in the middle of the development of a website. If a user presses a button an javascript function needs to be called. I simplified this function to:
<html>
<head>
<script type="text/javascript">
function newProd(number,customer,software,hardware,name)
{
//I simplified this function
alert('number is: '+number+'customer is: '+customer+' software is: '+software+' hardware is: '+hardware+' name is: '+name);
}
</script>
</head>
<body>
<input type="text" name="textfieldCustomer"><br>
<input type="text" name="textfieldSoftware"><br>
<input type="text" name="textfieldHardware"><br>
<input type="text" name="textfieldDescription"><br>
<input type="button" name="button" value="go to function" onClick="newProd('a number',textfieldCustomer.value,textfieldSoftware.value,textfieldHardware.value,textfieldDescription.value)">
</body>
when the user presses the button in Internet explorer, the function works perfectly! Unfortunately the function does not work in Chrome or Safari.
Does anyone have any idea what is going wrong?
The form fields are not supposed to be defined as global variables. Maybe in IE they are but that's not a behavior you can depend on. Try this:
onClick="newProd('a number',
this.form.textfieldCustomer.value,
this.form.textfieldSoftware.value,
this.form.textfieldHardware.value,
this.form.textfieldDescription.value)">
Oh, and add a form to wrap the inputs of course.
Demo: http://jsfiddle.net/kdUMc/
In my eyes there are two big mistakes in your code. First, the access to inputs fields is wrong. It needs a connection to an instance variable, like 'document'. The second one, the form tag is missing. If you wrap the input fields into a form tag you can access the values as Esailija has posted.
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( ) );