Sending form data to vanilla js - javascript

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

How to switch text from two different inputs on button click?

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>

JavaScript - Trying to add value to text field by clicking button

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 ;)

JS document.getElementById execute on Button click

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>

preview before submit

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/

Jquery accessing appended element id with another js script

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.

Categories

Resources