How do you submit text box input to a javascript function without submitting the server?
<input type="text" id="test" value="" />
<br/>
<button onclick="submitMe(value typed into text box)" id="testButton" >Submit Response</button>
Javascript:
function submitMe(input) {
alert(input); //should output text box input
}
Thanks
No need to pass by parameter, just the the element by id.
function submitMe() {
var value = document.getElementById('test').value;
alert(value);
}
Or you could pass the id like:
<input type="text" id="test" value="" />
<br/>
<button onclick="submitMe('test')" id="testButton" >Submit Response</button>
js:
function submitMe(id) {
var value = document.getElementById(id).value;
alert(value);
}
Try
<input type="text" id="test" value="" />
<br/>
<button onclick="submitMe(document.getElementById('test').value)" id="testButton" >Submit Response</button>
DEMO
Related
I am new to Javascript. I can not change value of textarea when I press Goodbye button. But When I click hello it is working fine! Can you help to change the value of textarea when it is pressed the second time.
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
</script>
Your goodbye and hello input fields has the same id - that when call your myFunction the text variable will always be the value of your first input.
You have to use different ids for each input the you can handle click events separately for each button.
function handleHelloClick() {
var text = document.getElementById("text-hello").value;
setTextarea(text);
}
function handleGoodbyeClick() {
var text = document.getElementById("text-goodbye").value;
setTextarea(text);
}
function setTextarea(text) {
document.getElementById("myTextarea").value = text;
}
Comment:<br />
<textarea id="myTextarea"></textarea><br />
<input id="text-hello" type="text" value="Hello" name="text" /><br />
<button type="button" onclick="handleHelloClick()">hello</button><br />
<input id="text-goodbye" type="text" value="Goodbye" name="text" /><br />
<button type="button" onclick="handleGoodbyeClick()">Gooodbye</button>
You cannot have two elements with the same ID. This is why it does not work.
You will want something like this;
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="text" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction()">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction2()">Gooodbye</button>
<script>
function myFunction() {
var text =document.getElementById("text").value;
document.getElementById("myTextarea").value=text;
}
function myFunction2() {
var text =document.getElementById("text2").value;
document.getElementById("myTextarea").value=text;
}
</script>
You should have different id's for different inputs.
It's a bad practice to have same ID for all the elements.
<textarea id="myTextarea">
</textarea><br>
<input id="hello-input" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('hello-input')">hello</button><br>
<input id="bye-input" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('bye-input')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text =document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
You can start from learning JavaScript: https://javascript.info/
Two inputs with the same id is not a correct HTML, ids should be uniques on a page.
Try this:
<textarea id="myTextarea">
</textarea><br>
<input id="text1" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myFunction('text1')">hello</button><br>
<input id="text2" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myFunction('text2')">Gooodbye</button>
<script>
function myFunction(inputId) {
var text = document.getElementById(inputId).value;
document.getElementById("myTextarea").value=text;
}
</script>
In JavaScript when you assign the same ID to two different elements and then try to fetch an element using document.getElementById() it will fetch only the first element that matches the ID name.
So, you can probably assign a different ID to the goodbye element. Also, you can have different functions to handle two different button clicks.
Please check out the example below.
console.log(document.getElementById("text"));
Comment:<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello" type="text" value="Hello" name="text"><br>
<button type="button" onclick="hello()">hello</button><br>
<input id="goodbye" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="goodbye()">Gooodbye</button>
<script>
function hello() {
var text =document.getElementById("hello").value;
document.getElementById("myTextarea").value=text;
}
function goodbye() {
var text =document.getElementById("goodbye").value;
document.getElementById("myTextarea").value=text;
}
</script>
It's never a good idea to use an id twice. If you call document.getElementById("some-id") the browser will return the first element it finds. So the browser will never return the goodbye button.
function myHelloFunction() {
var text =document.getElementById("hello-button").value;
document.getElementById("myTextarea").value=text;
};
function myGoodbyeFunction() {
var text =document.getElementById("goodbye-button").value;
document.getElementById("myTextarea").value=text;
}
<br>
<textarea id="myTextarea">
</textarea><br>
<input id="hello-button" type="text" value="Hello" name="text"><br>
<button type="button" onclick="myHelloFunction()">hello</button><br>
<input id="goodbye-button" type="text" value="Goodbye" name="text"><br>
<button type="button" onclick="myGoodbyeFunction()">Gooodbye</button>
Copy button works perfect copy text from first input field and click on paste button paste in it
<input type="text" id="txt1">Some text</input>
<input type="button" value="copy" >
<input type="text" id="txt2">Some text 2</input>
<input type="button" value="copy2" >
<input type="text"></input>
<input type="button" value="paste text" >
Try this solution. Add handler to the copy buttons and on each click get the previous input field's value and store in a variable. Then in the paste click set the text into the value of the paste button.
If you have this structure of html, in this way it will be easy to do (with prev()).
var text = '';
$('.copy').on('click', function(){
text = $(this).prev().val();
});
$('#paste').on('click', function(){
$(this).prev().val(text);
});
input {
display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" id="txt1" value="Some Text 1"/>
<input type="button" class="copy" value="copy" >
<input type="text" id="txt2" value="Some Text 2"/>
<input type="button" class="copy" value="copy2" >
<input type="text"/>
<input id="paste" type="button" value="paste text" >
since you said it's working perfectly then i understand your question is which language is used there, it's neither javascript or jquery, pure html is used only for that
var copy_text= '';
$('.copy_button').on('click', function(){
copy_text = $(this).prev().val();
});
$('.paste_button').on('click', function(){
$(this).prev().val(copy_text);
});
I am having trouble outputing text to a div in Javascript. When I call the function on button click it displays the text for a fraction of second and then disappears. Why is it so? The code is given below;
Code:
function val(){
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
HTML:
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="submit" onclick="val()">Sign Up</button>
</form>
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" id="asd">Sign Up</button>
</form>
$('#asd').click(function () {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
});
FIDDLE
I made a few changes. I changed the button type from submit to button also i added an id for the button. check it
You have a submit button in a form, its default action is to submit the form that is why the result is disappearing(the page is getting refreshed).
Since you really don't want to submit the form(here you are just doing some dynamic changes to the page), one easy solution is to change the type of the button to button
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
Another solution is to prevent the default action of the submit button click by returning false
Try this:
Your code works as expected but as you have taken button type as submit, i submits the form.
function val() {
var x = document.getElementById('us').value
document.getElementById("demo").innerHTML = x;
}
<form method="post">
<p id="demo"></p>
<br />
<input type="text" id="us" name="username"></input>
<br />
<button type="button" onclick="val()">Sign Up</button>
</form>
I am trying to add a input text just before the submit button using jquery
<form>
<input type="text" id ="text1" />
<input type="text" id ="text2" />
<input type="submit" name="submit">
</form>
I want to dynamically add another textbox just above the submit button
You can do this way:
$('form').find('input:submit').before('<input type="text"/>')
FIDDLE:
http://jsfiddle.net/ehsansajjad465/r4o09rdd/
Give your button an id attribute like so:
<input type="submit" id="submitbtn" name="submit">
Then, this should do it
$( '#submitbtn' ).before( '<input type="text" id="text3" />' );
I'm assuming you wish to append the text box on button click.
<input type="submit" id="btn">
Jquery code
$("#btn").click(function(){
$("#btn").before("<input type='text' id='text3' />");
});
If you wish to keep adding input tags and keep each id dynamic
var i = 3;
$("#btn").click(function(){
$("#btn").before('<input type='text' id="text'+id+" />');
i++;
});
If you give an id to your form, It would be asier to select only the form you want.
In jQuery there is a method called before:
$("input[type=submit]").before("<input type='text' id='text3' />");
Here is an example for both adding and removing elements dynamically using jQuery:
http://jsfiddle.net/EdsonF/pax9jqte/
This is the HTML:
<form role="form" action="/wohoo" method="POST">
<label>Stuff</label>
<div class="multi-field-wrapper">
<div class="multi-fields">
<div class="multi-field">
<input type="text" name="stuff[]">
<button type="button" class="remove-field">Remove</button>
</div>
</div>
<button type="button" class="add-field">Add field</button>
</div>
</form>
This is the Javascript:
$('.multi-field-wrapper').each(function() {
var $wrapper = $('.multi-fields', this);
$(".add-field", $(this)).click(function(e) {
$('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).find('input').val('').focus();
});
$('.multi-field .remove-field', $wrapper).click(function() {
if ($('.multi-field', $wrapper).length > 1)
$(this).parent('.multi-field').remove();
});
});
the final result allows you to do the following:
Try this
<input type="button" onclick="addInput()" value="Add input" />
<script>
function addInput(){
var _input = '<input type="text" name="anInput" value="Hola" />';
_input.insertBefore('.submit');
}
Also replace your submit input by
<input type="submit" name="submit" class="submit">
This is my demo cord.
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" onclick="doMath();" />
<script type="text/javascript">
function doMath()
{
// Capture the entered values of two input boxes
var my_input1 = document.getElementById('my_input1').value;
var my_input2 = document.getElementById('my_input2').value;
// Add them together and display
var sum = parseFloat(my_input1) + parseFloat(my_input2);
document.getElementById('total').value=sum;
}
I want to work this function when my_input2 is enter it's value. Just like onclick method for button is there any event to set value to total tetxfeild after key release event?
<script type="text/javascript">
$(document).ready(function () {
$("#my_input2").blur(function () {
var sum = parseInt($("#my_input1").val()) + parseInt($("#my_input2").val());
$("#total").val(sum);
});
});
</script>
<div>
<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="text" id="total" />
<input type="button" value="Add Them Together" />
</div>
And also u should frame ur question correctly bcz u have added code in button click and asking us it should work after leaving textbox
Put onkeyup() on second input field this will fire your function.
Something like that:
<input type="text" id="my_input2" onkeyup="doMath();" />
try this
<input type="text" id="my_input2" onchange="doMath();" />