I am trying to send the result from a number input to a js function, and can't seem to make it work. I have tried with some answers from other questions in the site, but was still unable.
My code goes something like this:
<input type="number" name="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="how(example)">
<script type="text/javascript">
function how(example){
alert("example");
}
</script>
Thanks!
Give the id of your number input. May be it will useful.
<input type="number" name="example" id="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="how()">
<script type="text/javascript">
function how(){
var number = $('#example').val();
alert(number);
}
</script>
Use .value to get the value of a text/number input or textarea element.
const numInput = document.querySelector('input[type="number"]')
document.querySelector('input[type="button"]')
.addEventListener('click', () => {
console.log(numInput.value);
});
<input type="number" name="example">
<input type="button" value='click'>
Try to use addEventListener rather than HTML-inline-eval handlers, or on*-handlers; keeping all of your Javascript in the Javascript itself is helpful and is a good habit to get into.
This might help you (this code will make it so that it alerts the value in number):
function alertval(){
alert(document.getElementById("example").value);
}
<input type="number" name="example" id="example">
<INPUT TYPE="button" NAME="button" Value="Click" onClick="alertval()">
Related
I am trying to take the input of two different text boxes, and swap the text on a button click
Sadly, nothing is happening. Am I missing something super simple?
<input type="text" id="string1" class="str_1 inputs" value="type something pointless"/>
<input type="button" onClick="switchITup();" id="theButton" value="do something amazing">
<input type="text" id="string2" class="str_2 inputs" value="type something meaningful"/>
function switchITup(){
var val1 = $('#string1').val;
var val2 = $('#string2').val;
$('#string1').text(val2);
$('#string2').text(val1);
$('#string1').removeClass('inputs');
$('#string1').addClass('YooHoo');
};
Codepen here.
In your code (val need to be val() and text() need to be val()):-
function switchITup(){
var val1 = $('#string1').val();
var val2 = $('#string2').val();
$('#string1').val(val2);
$('#string2').val(val1);
$('#string1').removeClass('inputs');
$('#string1').addClass('YooHoo');
};
.inputs{
font-size:20px;
}
.YooHoo{
font-size:12px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="string1" class="str_1 inputs" value="type something pointless"/>
<input type="button" onClick="switchITup();" id="theButton" value="do something amazing">
<input type="text" id="string2" class="str_2 inputs" value="type something meaningful"/>
Note:- added some style to show you that it worked fine
I believe it should be .val() instead of .val
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("input:text").val("new value");
});
});
</script>
</head>
<body>
<p>Name: <input type="text" name="user"></p>
<button>Set the value of the input field</button>
</body>
</html>
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 ;)
I am extremely new to JavaScript, so bear with me.
I have the following code:
<input id="test" name="test" type="text" value="" />
<input id="test" type="button" value="Go!" />
<script type="text/javascript">
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
</script>
I would like the code to only be executed upon a button click. The function is to add the user input data to the end of the url and then upon the button click, load that url.
As of now, when I load the page, it automatically executes and goes to the url.
You have two input fields with the same ID, that's a no go!
Change the second one to something different!
Put your current javascript code into a function
function clickHandler(event) {
// Your code...
}
Attach an event listener to your container
var myContainer;
// assign element from DOM
myContainer = document.getElementById(ID_OF_CONTAINER);
// attach event handler
myContainer.addEventListener('click', clickHandler);
That should do the trick
<input id="test" name="test" type="text" value="" />
<input id="test2" type="button" onclick="fnc()" value="Go!" />
<script type="text/javascript">
function fnc(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>
You need to wrap your code in a function, and then call the function based on an event. Here, the onclick event of the button. NOTE that IDs must be unique. Change your code to:
<input id="test" name="test" type="text" value="" />
<input id="test2" type="button" value="Go!" onclick="foo()" />
<script type="text/javascript">
function foo(){
window.location.href="http://www.thenewendurancefitness.com/" + document.getElementById('test').value;
}
</script>
jsFiddle example
Note that ID's are unique, and that you would use an event listener for that
<input id="test" name="test" type="text" value="" />
<input id="button" type="button" value="Go!" />
<script type="text/javascript">
document.getElementById('button').addEventListener('click', function() {
var val = document.getElementById('test').value;
window.location.href="http://www.thenewendurancefitness.com/" + val;
}, false):
</script>
<form onsubmit="return submit()">
<input id="test" name="test" type="text" value="" />
<input id="submit" type="submit" value="Go!" />
</form>
<script type="text/javascript">
function submit() {
location.href="http://www.thenewendurancefitness.com/"+document.getElementById('test').value;
}
</script>
can anybody tell me how to make preview before submit in one form using javascript in php
i have an example like
<script type="text/javascript">
$(document).ready(function() {
`$('#db').hide();
});
function preview()
{
var add=document.getElementById('Address_Street').value;
if(add.trim()!="")
{
$('#db').show();
document.getElementById('p_Address_Street').value=add;
}
}
<body>
<form name="approval" id="approval" method="post" enctype="multipart/form-data" action="">
<input type="text" name="Address_Street" id="Address_Street" size="36" value="">
<input type="submit" value="Submit" >`
<input type="button" value="Preview" onclick="preview()">
</form>
<div id="db">
Address Street: <input type="text" name="p_Address_Street" id="p_Address_Street" size="36" value="" readonly="readonly">
</div>
</body>
can everybody tell me the right one please :(
Add id to your Preview button
<input id="Preview" type="button" value="Preview">
Then try this Js
$(document).ready(function() {
$('#db').hide();
$('#Preview').on('click', function(){
var add=$("#Address_Street").val();
if(add.trim()!="")
{
$('#db').show();
$('#p_Address_Street').val(add);
}
});
});
You have an error on this line
`$('#db').hide(); try to remove the ` char
And then, if you're using JQuery, stick to it.
var add = $('#Address_Street').val();
To debug, remove the if statement. Maybe the error is there.
The example:
http://jsfiddle.net/fa295/
Im trying to call a js function on a HTML element which I have appended to the page using JQUERY.
<body>
<div id='father'>
</div>
<input type="submit" value="choice one" onclick='choice_one()'/>
<input type="submit" value="choice two" onclick='choice_two()'/>
<input type="submit" value="choice three" onclick='choice_three()'/>
</body>
My jQuery is in a js function..
<script>
function choice_one(){
var container = "<div id='field'>
<form>
<input type="text" id='choice_one_answer' value="" />
<input type="submit" value="submit" onclick='answer_one()'/>
</form>
</div>";
$('ul#field').remove();
$("div#father").append(container);
}
function choice_two(){
var container = "<div id='field'>
<form>
<input type="text" id='choice_two_answer1' value="" />
<input type="text" id='choice_two_answer3' value="" />
<input type="submit" value="submit" onclick='answer_two()'/>
</form>
</div>";
$('ul#field').remove();
$("div#father").append(container);
}
</script>
So the third part is using the answers and with js then reloading anther field. Then loading another function --> new answer field.
<script>
function answer_one(){
var answer = document.getElementById('choice_one_answer');
do something with answer...
choice_two();
}
function answer_two(){
var answer_one = document.getElementById('choice_two_answer1');
var answer_two = document.getElementById('choice_two_answer2');
do something with answer...
choice_one();
}
other functions....
</script>
So when I try to call the js functions eg answer_one()/ answer_two() the function cannot grab the variable from the input Id's ---> i presume their is because the element were not loaded when the page loaded!
Is there a jQuery/ js workaround for this... any thoughts??
Is there a work around for something like this??
I think it's a good practice to append html in one line, like this:
var container = "<div id='field'><form><input type="text" id='choice_one_answer' value="" /><input type="submit" value="submit" onclick='answer_one()'/></form></div>";
Don't have the time to test anything, but the jQuery workaround for accessing inserted code is .live()
Why are you using jQuery but not using $()/jQuery() selector for selecting the element?
Try to comment out the //$('ul#id').remove() line and dupm $('ul#id').size() to console in order to know that your element exists.