i need to create a html form where upon entering value on one input text field should automatically enter calculated value in another input text field using jquery.I found a source http://pastie.org/2607417,where i have input text value which output in a paragraph... Any help would be greatly appreciated
$("input[name='textbox1']").blur(function() {
//if u want to perform any calculation
var textbox2val=.....;
//if u want to just paste the textbox1 value
var textbox2val=$(this).val();
$("input[name='textbox2']").val(textbox2val);
});
Try
<input type="text" value="" id="text1" />
<p></p>
<div></div>
<script>
$("#text1").keyup(function () {
var value = $(this).val();
value2 = value*2;
value3 = value*3.7;
$("p").text(value2);
$("#text2").val(value3);
});
</script>
<input type="text" value="" id="text2" />
Related
I am trying to achieve the following which includes:
Retrieve Data from an Element in JavaScript.
<p id='returnText'>Text</p>
Set a from's Input Value to the retrieved text in step 1.
This is what i currently have and im really stuck :(
function autoMagicallySubmit(){
var html = document.getElementById("returnText").innerHTML;
html.replace(/<[^>]*>/g, "");
document.getElementById("sendText").value = html.text;
}
<p id='returnText'>TEXT NEEDED TO BE TAKEN!</p>
<form name="myForm"action="Contact" method="post">
<input type="text" name="sendText" id="sendText" value="">
</form>
But I keep retrieving "Undefined" in the texbox. I have php echoing the element which is under step 1.
document.getElementById("returnText").innerHTML;
Returns text and not an object that has an attribute "text".
You should just have document.getElementById("sendText").value = html
innerHTML give you the text content (between <p id='returnText'> and (</p>) so is a string, not an object, and you need just the value
function autoMagicallySubmit(){
var txt = document.getElementById("returnText").innerHTML;
txt.replace(/<[^>]*>/g, "");
document.getElementById("sendText").value = txt;
}
autoMagicallySubmit()
<p id='returnText'>TEXT NEEDED TO BE TAKEN!</p>
<form name="myForm"action="Contact" method="post">
<input type="text" name="sendText" id="sendText" value="">
</form>
I would like to copy the value from an input in one form to the value of an input(with the same name) of the next form down. The forms and inputs are named the same. All it needs to do is copy the value of the title input to the title input one form down.
<form>
<input name="file" value="1.xml">
<input name="title" id="title" value="Smith">
<input type="submit" id="copy-down" value="copy">
</form>
<form>
<input name="file" value="2.xml">
<input name="title" id="title" value="Anderson">
<input type="submit" id="copy-down" value="copy">
</form>
etc...
In this case when the top "copy" button is clicked I would like jquery to overwrite Anderson with Smith.
$('#title').attr('value'));
Gives me Smith but I'm not sure what to do with that value once I have it.
Change HTML to this:
<form>
<input name="file" value="1.xml">
<input name="title" id="title1" value="Smith">
<input type="submit" id="copy-down1" value="copy">
</form>
<form>
<input name="file" value="2.xml">
<input name="title" id="title2" value="Anderson">
<input type="submit" id="copy-down2" value="copy">
</form>
Javascript:
function copyHandler() {
var copyVal = document.getElementById("title1").value;
var replaceInput = document.getElementById("title2");
replaceInput.value = copyVal;
}
document.getElementById("copy-down1").onclick = function(){
copyHandler();
return false;
}
Some notes:
This is so straightforward in vanilla javascript that I didn't add the jQuery code.
You should never assign multiple elements to the same ID, class or name can be used for that purpose.
The return false; portion of the onclick function is necessary so that the form doesn't reload when you click your submit button.
Let me know if you have any questions.
you can try
$(document).ready(function(){
$('form').on('submit', function(e){
e.preventDefault();
var GetNameAttr = $(this).find('input:nth-child(2)').attr('name');
var GetTitleValue = $(this).find('input:nth-child(2)').val();
var NextFormNameAttr = $(this).next('form').find('input:nth-child(2)').attr('name');
if(NextFormNameAttr == GetNameAttr){
$(this).next('form').find('input:nth-child(2)').val(GetTitleValue );
}
});
});
Note: this code will change the second input value in next form with
the second input value of form you click if the name is same .. you
can do the same thing with the first input by using :nth-child(1)
Demo here
if your forms dynamically generated use
$('body').on('submit','form', function(e){
instead of
$('form').on('submit', function(e){
for simple use I create a function for that
function changeNextValue(el , i){
var GetNameAttr1 = el.find('input:nth-child('+ i +')').attr('name');
var GetTitleValue1 = el.find('input:nth-child('+ i +')').val();
var NextFormNameAttr1 = el.next('form').find('input:nth-child('+ i +')').attr('name');
if(NextFormNameAttr1 == GetNameAttr1){
el.next('form').find('input:nth-child('+ i +')').val(GetTitleValue1);
}
}
use it like this
changeNextValue($(this) , nth-child of input 1 or 2);
// for first input
changeNextValue($(this) , 1);
// for second input
changeNextValue($(this) , 2);
Working Demo
Click link and Insert text from hidden field into input field, more than 1 time and replace the text in the input field.
Now my code only can insert text when the input field is empty, but I want it to replace the text if I click the "TestName" button
Anyone can help me? It doesn't matter if its javascript/Jquery
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
function SetSearch(val, search) {
$('input[id ^="SearchForm"]').each(function (index) {
var s = "SearchForm" + search;
if ($(this).attr("id") == s) {
$(this).attr("value", val);
return false;
}
});
}
</script>
<a href="javascript:SetSearch ( $('#Name').attr('value'), 'Name' );">
TestName
</a>
<input id="Name" name="Name" type="hidden" value="TestName" />
Name
<input name="Name" type="text" id="SearchFormName" value="" />
My fiddle http://jsfiddle.net/fTpwF/2/
Use .val(val) instead of .attr("value", val);
I am try to make application there i need when input filed value enter than this value show in editable div.so i am using keyup function but now i need editable div value show in input filed i mean revers process.Below i am showing what i have done.
JavaScript
$('#input1').keyup(function () {
txt = $('#input1').val();
$('#field1').text(txt);
});
HTML
<input type="text" id="input1" />
<div id="field1" contentEditable='true'; ></div>
You just need to do the reverse. Here is the code:
$('#field1').keyup(function () {
$('#input1').val($('#field1').text());
});
Demo http://jsfiddle.net/yRzyE/1/
I want to retrieve textfield value using javascript. suppose i have a code like:
<input type='text' name='txt'>
And I want to retrieve it using javascript. I call a function when a button is clicked:
<input type='button' onclick='retrieve(txt)'>
What coding will the retrieve function consist of?
You can do this:
Markup:
<input type="text" name="txt" id="txt"/>
<input type="button" onclick="retrieve('txt');"/>
JavaScript:
function retrieve(id) {
var txtbox = document.getElementById(id);
var value = txtbox.value;
}
Let's say you have an input on your page with an id of input1, like this:
<input type="text" id="input1" />
You first need to get the element, and if you know the Id, you can use document.getElementById('input1'). Then, just call .value to get the value of the input box:
var value = document.getElementById('input1').value;
Update
Based on your markup, I would suggest specifying an id for your text box. Incase you don't have control over the markup, you can use document.getElementsByName, like so:
var value = document.getElementsByName('txt')[0].value;
One of the way is already explained by Andrew Hare.
You can also do it by entering the value in the textbox and getting a prompt box with entered message when a user click the button.
Let's say, you have a textbox and a input button
<input type="text" name="myText" size="20" />
<input type="button" value="Alert Text" onclick="retrieve()" />
The function for retrieve()
function retrieve()
{
var text = document.simpleForm.myText.value;
alert(text);
}