unable to assign text box value to another text box in jquery - javascript

i want to display one text box value in another text box while clicking button. im able to show value on div but not in text box
Here is the JS
$(document).ready(function(){
$("#btnSubmit").click(function(){
var val= $("#txtValue").val();
$("#txtValue1").text(val);
$("#myDiv").text(val);
})
});
Here is the HTML
<input type="text" id="txtValue">
<div id="myDiv"></div>
<input type = "button" id = "btnSubmit" value="Submit">
<input type="text" id="txtValue1" text="">

For an input type='text' you need:
$("#txtValue1").val(val);
It is an input; inputs take values
Demo

Related

JavaScript/html show alert which includes label input

I'm using HTML5 and JavaScript
I want to be able to input any word into a label and when you click on the button it gives an alert which includes the given text.
I cannot get it to work with the text I put into the label the alert shows no text.
I've only found how to do it with predefined labels.
Here's my current html code
function getinput() {
var input = document.getElementById("form-scream").innerText;
alert(input);
};
<div>
<p>Word
<label id="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>
input element does not have innerText property, use value instead. Also, you have use for attribute in a label to associate an element (the element's id as the value of for):
function getinput()
{
var inputVal = document.getElementById("form-scream").value;
alert(inputVal);
};
<div>
<p>Word
<label for="form-scream"></label>
<input type="text" name="screaming" id="form-scream">
<button onclick="getinput()"> Click to scream</button>
</p>
<script src="assets/js/scream.js"></script>
</div>

Hide input text using jQuery

How can I make jQuery script that shows symbol (*) instead of a letter when typing text in input. Value of text input shouldn't change, only the visible text.
Input type password is not an option, because I would like to make that it could be possible to see original text again with a click of a button. Also, password input is autocompleted in Google Chrome and in this situation I don't want it to be autocompleted.
You should use a password field, set autocomplete="false" and toggle between text/password for the field
document.getElementById("fooVisible").addEventListener("change", function() {
if (this.checked) {
return document.getElementById("foo").setAttribute("type", "text");
}
document.getElementById("foo").setAttribute("type", "password");
})
<input type="password" id="foo" autocomplete="false" />
Show: <input type="checkbox" id="fooVisible" />
You could store the value in a variable and replace all characters with the asterisk. This does not handle delete or backspace, but this should get you in the right direction if that's the way you want to go.
$(document).ready(function(){
var textValue = "";
$('.asteriskInput').keypress(function(e){
var textLength = $(this).length;
textValue += e.key;
$(this).val($(this).val().replace(/[A-Za-z]/g,'*'));
});
$('#changeInputView').on('click',function(){
$('.asteriskInput').val(textValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input class="asteriskInput" type="text" /><br />
<button id="changeInputView">Show characters</button>

one textbox value in another textbox

I want to get value of one textbox and put the same in another textbox.
my code is :
<input type="text" value="Keyword" id="one" />
<input type="text" value="Search" id="two" />
button
jquery:
var input = $("#one");
$('#btn').click(function(){
alert('dgdhjdgj');
var oneValue = $('#one').val();
alert("one value "+ oneValue);
var twoVal = $('#two').val($(input).attr('value'));
alert('two Val' + twoVal);
});
demo is here.
Issue : when I change the value of textbox #one, it does not change the value of #two.
thanks in advance.
$(input).attr('value') gets the value of the value attribute, which is the initial value, not the current value.
You had it right two lines earlier. Use val().
Try this
HTML
<input type="text" placeholder="Keyword" id="one" />
<input type="text" placeholder="Search" id="two" />
button
Script
$('#btn').click(function() {
var oneValue = $('#one').val();
$('#two').val(oneValue)
})
Fiddle
write textarea and check it. JSFIDDLE
$("#add").click(function(){
var thenVal = $("#textarea_first").val();
$("#textarea_second").val(thenVal);
});
if all that you want to change the text of second textbox, as soon as you change the text of first textbox, just use jQuery's change event.
just try this then:
$('#one').on("change",function(){
$('#two').val($(this).val());
});

Get value from input text box and show value into another

I'm trying to get value from 1st input and show same value in a 2nd input
But value is not showed in 2nd taxt box.
Where I'm wrong?
Thanks a lot.
<div class="rowElem"><label>COGS:<span class="req">*</span></label><div class="formRight"><input type="text" name="cogs" id="cogs" value="<?=$_POST[cogs]?>" onchange="run(cogs)/></div><div class="fix"></div></div>
<script>
function cogs(sel) {
var name=document.form1.cogs.value;
}
</script>
<div class="rowElem"><label>COGS:<span class="req">*</span></label><div class="formRight"><input type="text" name="cogs" id="cogs" value="cogs"/></div><div class="fix"></div></div>
Here you have an example about how to assing the value of a input to another
<input type="text" name="cogs1" id="cogs1" value="<?=$_POST[cogs]?>"
onchange="cogs(this.value)"/>
<input type="text" name="cogs2" id="cogs2" value="cogs"/>
<script>
function cogs(value) {
document.getElementById("cogs2").value = value;
}
</script>

Reset button for specific fields

I have a working form that generates a string, and by clicking on a button it places the string inside a text area box.
I also have a reset button that suppose to reset all fields but not the text area with the strings.
Here is some of my code.
HTML:
<form>
<!--some more code and inputs-->
</tbody> </table> </p> <p> <input value="Generate URL" onclick="createURL1();" type="button">
<input name="result" size="70" class="clearit" type="text" ></input>
<input type="button" value="Add The Link" onClick="addtext();"></p>
<textarea id="t5" style="width:600px;" name="outputtext" ></textarea><br><br>
</p> </td> </tr> </tbody> </table>
<input type="reset" value="Clear" id="reset" ></input>
JavaScript:
$(document).ready(function(){
$('#reset').on('click',function(e){
e.preventDefault();
$('.clearit').val("");
});
});
I gave all the inputs that I want to reset a class (clearit) and the reset button got an ID: reset. The only field I didn't want to be reset got a different id.
it's supposed to work and its not.. Please Help :)
use this javascript function and exclude the element with id you dont want to reset and you can specify the way to reset either by left input blank or dropdown equal -1
and it works on IE and fire fox tesed
function resetLabels()
{
//mainForm is the name of form
var cells = document.mainForm.elements;
for (var i= 0; i < cells.length; i++) {
if(cells[i].name !='txtName')//for example to not reset by name
cells[i].value='';
// cells[i].className = '';
// cells[i].style.color = 'black';
// or cells[i].value='-1' for drop down
// or cells[i].name= ''; name and id to compare and exclude specific elements
// or cells[i].id= '';
//and i suggest to name like txt... and ddl...to
//know the type by name and id or just check the type
//of element by using cells[i].type
}
}

Categories

Resources