Cant get my function to work and add the value of the button to the text field when clicked by user.
HTML
<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"></textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">
JavaScript
<script language="javascript" type="text/javascript">
function addToField(crd){
document.testing.field.value += crd;
}
</script>
Really stuck trying to understand whats wrong here.
Hope this shows what I am trying to achieve: https://jsfiddle.net/034hyjo2/6/
You're accessing the object incorrectly
<script language="javascript" type="text/javascript">
function addToField(crd){
document.getElementByName("testing").value += crd;
}
</script>
Or, give the element an ID and use getElementByID("testing").value.
I usually find that works better anyway...
If you're just getting it in the fiddle, it works by putting the script tag above your HTML:
<script>
var addToField = function(c) {
document.testing.field.value += c;
};
</script>
<form name="testing" action="test.php" method="get">Chords:
<textarea name="field"> </textarea>
<input type="button" value="G" onClick="addToField('G');">
<input type="button" value="C" onClick="addToField('C');">
<input type="button" value="Am" onClick="addToField('Am');">
<input type="button" value="F" onClick="addToField('F');">
</form>
Your JSFiddle is way wrong. You're question here is better. You want to be using document.getElementById('field').value += crd; instead of document.testing.field.value += crd;
try this:
<form name="testing" action="test.php" method="get">Chords:
<textarea id="field" name="field"> </textarea> ---note the addition of the ID parameter
<input type="button" value="G" onClick="AddToField('G');">
<input type="button" value="C" onClick="AddToField('C');">
<input type="button" value="Am" onClick="AddToField('Am');">
<input type="button" value="F" onClick="AddToField('F');">
</form>
<script>
function AddToField(c) {
document.getElementById('field').value += c;
};
</script>
Also functions shouldn't be camelCase but Pascal case ;)
Related
Here the code that I made and not working looking to see how I would get my sum into the result field, Also looking how to make a reset button to clear all the text from the fields.
JSBin.
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.result.submit()
}
function reset() {}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form>
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
</body>
</html>
Why do you want to submit the form?
You can use document.forms. to access the form.
Try this:
<html>
<head>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
document.forms.calculator.submit()
}
function reset() {
document.forms.calculator.reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form name="calculator">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Do you want this one?
jsbin
<html>
<head>
<script src="https://code.jquery.com/jquery-3.0.0-alpha1.js"></script>
<script>
function addition() {
var x = +document.getElementById('num1').value;
var y = +document.getElementById('num2').value;
document.getElementById('result').value = x + y;
//document.result.submit()
//if you want use submit, use this code. if only see the result, don't use this
//Submit is receive data, so you can't see a result.
//document.getElementById('formId').submit();
//jquery submit
//$("form")[0].submit();
}
function reset() {
//no jquery
document.getElementById('formId').reset();
//jquery
//$("form")[0].reset();
}
</script>
</head>
<body>
<header>
<h1>Calculator Using Forms & JavaScript</h1>
</header>
<form id="formId">
Number 1:
<input type="number" id="num1" value="0" autofocus>
<br> Number 2:
<input type="number" id="num2" value="0">
<br> Result:
<input type="text" id="result" value="0" readonly>
<br>
</form>
<input type="button" onclick="addition()" value="addition">
<input type="button" onclick="reset()" value="reset">
</body>
</html>
Note that forms can be submitted without clicking the submit button, so if you want something to happen on submit, attach a listener to the form's submit handler. To reset a form only requires a reset button, no code.
Form controls must have a name to be successful and submit their value with the form, and you can pass a reference to the form using this from the listener so you don't need to use getElementById.
Implementing the above significantly reduces the amount of code required.
In the following, the submit listener returns false so prevents the form from submitting. If you want the form to submit, just remove the return statement from the in–line listener:
function addition(form) {
form.result.value = +form.num1.value + +form.num2.value;
}
<form name="calculator" onsubmit="addition(this); return false;">
Number 1:
<input type="number" name="num1" value="0" autofocus>
<br> Number 2:
<input type="number" name="num2" value="0">
<br> Result:
<input type="text" name="result" value="0" readonly>
<br>
<input type="submit" value="Submit form">
<input type="reset">
</form>
You may not want to submit the form at all, in that case you can make the submit button a plain button and call the function from there, but remember to stop the form submitting otherwise.
just give an id to the form and in your reset function, just do
document.getElementById("myForm").reset();
updates:
according to ROBG's comments, you don't need to bind a function to the button.
you can simply add a
<input type="reset">
to reset all fields of the form, and if the button is out the form, you can do
<input form="formID" type="reset">
to associate to specific form.
What I want the program to do is make a form and have 2 radio buttons and 1 text.
Then I want it to collapse the text and radio value together into one and take me to that page:
If I input text with like "facebook" and the radiobutton value is .com I want it to take facebook + .com and send me to that page.
<!doctype html>
<html>
<head>
<title>A Basic Form</title>
<style type="text/css">
</style>
</head>
<body onunload="Bye()">
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
}
</script>
</body>
</html>
Change type="submit" to type="button".
Change this line:
<input type="submit" id="submit" name="submit" value="Submit" onclick="go()">
to:
<input type="button" id="submit" name="submit" value="Submit" onclick="go()">
In this case you don't need to submit a form. You are just trying to redirect the url. You didn't specify where to submit the form so it is submitting to itself that is your problem.
Alternatively, return false from the onclick handler to prevent the form submit.
Try this code:
<html>
<head>
</head>
<body>
<form>
<fieldset>
<legend>Redirection: </legend>
<div>
<label>Where do you want to go?</label>
<input type="text" id="input" name="input" size="7">
<input type="submit" id="submit" name="submit" value="Submit" onclick="return go()">
</div>
<div>
<input type="radio" id="no" name="end" value=".no">
<label for=".no">.no</label>
<br />
<input type="radio" id="com" name="end" value=".com">
<label for=".com">.com</label>
</div>
</fieldset>
</form>
<script type="text/javascript">
function go() {
var end = "";
if (document.getElementById("no").checked) {
end = document.getElementById("no").value;
} else {
end = document.getElementById("com").value;
}
var input = document.getElementById("input").value;
var together = input + end;
window.location.replace("http://www." + together);
return false;
}
</script>
</body>
</html>
brso05's analysis seems to be spot on... But I can't really explain it. It seems that Chrome is delaying the side effects of the location.href.replace (which should be navigating away from the page) until after the form submit... I have a feeling you have hit a browser bug here. I can't imagine this is spec-compliant.
THis is the code :
<script>
function searchFor(searchEngine,searchQuery){
if (searchEngine="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x
}
}
</script>
<form>
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br>
<input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"
</form>
Why is it not working?
Once i click the submit button, nothing happened.
Pls help. Thx.
You should write
<script>
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x
}
}
</script>
'==' instead of '=' in comparison
Change submit button also,
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search" />
Certain error
a) it should be window.location.href
b) close the submit button tag
c) use '==' equal to for comparision
<script>
function searchFor(searchEngine,searchQuery){
for (var i = 0; i < searchEngine.length; i++) {
if (searchEngine[i].type === 'radio' && searchEngine[i].checked) {
value = searchEngine[i].value;
}
}
if (value=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location.href=x
}
if (value=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location.href=x
}
}
</script>
<form>
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br><input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc,this.form.searchContent.value);return false;" value="Search" />
</form>
<script type="text/javascript">
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location=x;
}
}
</script>
<form onsubmit="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;">
<input type="radio" name="searchLoc" value="google"> Google <input type="radio" name="searchLoc" value="yahoo"> Yahoo
<br><input type="text" name="searchContent">
<input type="submit" value="Search"/>
</form>
Modify the code as above. searchEngine="google" should be searchEngine == "google" and use onsubmit on tag instead of onclick on submit button.
instead of:
if (searchEngine="google")
try this:
if (searchEngine === "google")
I don't want to pass the value to the function, I want it to find the value itself.
<script type="text/javascript">
function add(buttonNum)
{
var elements = document.getElementsByTagName("button");
alert(document.myform.elements[buttonNum].value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(0)"/>
<input type="button" value="w" onclick="add(1)"/>
<input type="button" value="e" onclick="add(2)"/>
<input type="button" value="r" onclick="add(3)"/>
<input type="button" value="t" onclick="add(4)"/>
<input type="button" value="y" onclick="add(5)"/>
</form>
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
What approaches do I need to take? Something tells me that I need to get the length, run a for loop, and attach a handler. I'm just not sure on where to start.
simply pass this as parameter so that you can access all the attributes of the element but here only value:
<script type="text/javascript">
function add(elem)
{
alert(elem.value);
}
</script>
<form name="myform">
<input type="button" value="q" onclick="add(this)"/>
<input type="button" value="w" onclick="add(this)"/>
<input type="button" value="e" onclick="add(this)"/>
<input type="button" value="r" onclick="add(this)"/>
<input type="button" value="t" onclick="add(this)"/>
<input type="button" value="y" onclick="add(this)"/>
</form>
Compare:
getElementsByTagName("button");
<input>
You are getting the wrong element type.
If I wanted to click on a button and display the value of the button into lets say a div; I don't want to code every button with an onclick(passing a parameter).
Use addEventListener. You can identify the element clicked with event.target
e.g.
addEventListener('click', function (evt) {
if (evt.target.type == "button") {
alert(evt.target.value);
}
});
Quick newbie question, i'm sure it is simple to you, but i cant get my head around to figure out why my code wont work. Checked online, seems that i'm doing everything fine, but still wont work... All i'm trying to do, is to make simple calc and display that in diff field. I have tryed external and internal JS.
Here's my code:
<script type="text/javascript">
function calculate(){
var a = document.calculate.first.value;
var b = document.calculate.second.value;
var c = parseInt(a) + parseInt(b);
document.calculate.result.value = c;
}
</script>
<body>
<form name="calculate">
<input type="text" name="first" size="5">
<input type="text" name="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" name="result" id="result" size="5">
</form>
</body>
Chrome says:
Uncaught TypeError: object is not a function (onclick)
Give a different name to the form and the onclick handler! Here is a test.
Here is the corrected code :
<html>
<head>
<script type="text/javascript">
function calculate(){
var a = document.getElementById('first').value;
var b = document.getElementById('second').value;
var c = parseInt(a) + parseInt(b);
document.getElementById('result').value = c;
}
</script>
</head>
<body>
<form name="calculateform">
<input type="text" id="first" size="5">
<input type="text" id="second" size="5">
<input type="button" onclick="calculate()">
<input type="text" id="result" id="result" size="5">
</form>
</body>
</html>
Its probably because you are using the same name for the form as for your js function.
Working example:
<html>
<head>
<script type="text/javascript">
function calculate(){
alert(document.calculatex.first.value);
var a = document.calculatex.first.value;
var b = document.calculatex.first.value;
var c = parseInt(a) + parseInt(b);
document.calculatex.result.value= c;
}
</script>
</head>
<body>
<form name="calculatex">
<input type="text" name="first" size="5"/>
<input type="text" name="second" size="5"/>
<input type="button" value="calculate" onclick="calculate();"/>
<input type="text" name="result" id="result" size="5"/>
</form>
</body>
Have a look into JQuery library (convenient for getting/setting field values).