using single text box to enter value in other box - javascript

im trying to create text box which is used to enter value in other 4 text box one by one
i had tryed the below code but it copy's only to one text box...
<html>
<head>
<script>
function copy_data(val){
var a = document.getElementById(val.id).value
document.getElementById("copy_to").value=a
}
</script>
</head>
<body>
<input type="text" name ="a" id="copy_from" onKeyUp="copy_data(this)"/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
<input type="text" name ="a" id="copy_to" disabled/>
enter code here
<input type="text" name ="a" id="copy_to" disabled/>
</body>
</html>

Demo http://jsfiddle.net/Cn6Rb/
Id are unique do this. i.e. use class attribute instead
*API: http://api.jquery.com/keyup/
Hope this fits your need :)
Code
$(document).ready(function () {
$('#copy_from').keyup(function(){
$('.copy_to').val($(this).val());
});
});
Html
<input type="text" name="a" id="copy_from" />
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>enter code here
<input type="text" name="a" class="copy_to" disabled/>

Try this (Hit Enter Key to copy value):
Fiddle
<input type="text" name="a" id="copy_from" onKeyUp="copy_data(this,event)"/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
<input type="text" name="a" class="copy_to" disabled/>
enter code here
<input type="text" name="a" class="copy_to" disabled/>
<script>
var count = 0;
function copy_data(val, event) {
if (event.keyCode == 13) {
if (count <= 4) {
var a = document.getElementsByClassName('copy_to')[count];
a.value = val.value;
val.value = '';
count++;
}
}
}
</script>

Note Id should be unique, use different strategy
Using Jquery
javascript code
function copy_data(val){
$('.myKlass').val(val.value);
}
html code
<input type="text" class="myKlass" name ="a" id="copy_to1" disabled/>
<input type="text" class="myKlass" name ="a" id="copy_to2" disabled/>
<input type="text" class="myKlass" name ="a" id="copy_to3" disabled/>
Using javascript
function copy_data(val){
var elem_list = document.getElementsByName('a');
for(var i = 1; i < elem_list.length;i++){
elem_list.item(i).value = val.value;
}
}

Actually, class is not the best attribute to do that, as it is supposed to serve as a way to apply styles rather than identifying dom elements. You could use the html5 "data-*" attributes to have a cleaner HTML code, like this:
<input type="text" name ="a" data-role="source"/>
<div data-role="destination">
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
<input type="text" disabled/>
</div>
This way, you only need two "data-role" polluting your html. The "data-role" attribute is pretty common in jQuery (mainly due Twitter Bootstrap widgets).
Then, you only need this:
$("[data-role=source]").on("keyup", function(){
var that = this;
$($("[data-role=destination]").children()).each(function(index, item) {
item.value = that.value;
});
});

Related

jQuery to populate array-named form fields based on first entered text box value

I have a form with variable number of inputs as an array
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
The idea is when i put some value in the first field (foo[1]) i need the jQuery or Javascript copy the value from #foo[1] into #foo[2], #foo[3], etc depending on the array.
Do you need following behavior :
$(document).ready(function(){
$("input[id^=foo\\[]").prop("disabled",true); //disable all elements first
$("input#foo\\[1\\]").prop("disabled",false); //then enable the first one
$("input#foo\\[1\\]").change(function(){
var source = $(this);
var currentVal = $(source).val();
$("input[id^=foo\\[]").each(function(){
if(!$(this).is(source))
$(this).val(currentVal);
});
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value=""/>
<input type="text" id="foo[3]" name="foo[3]" value=""/>
<input type="text" id="foo[4]" name="foo[4]" value=""/>
<input type="text" id="foo[5]" name="foo[5]" value=""/>
</form>
$('input').on('input', function(){
$(this).siblings().val($(this).val());
});
Couldn't tell if you just wanted the first or all. If just the first, you can target with an id or jQuery.
$('input').eq(0).on('input', function(){});
Something like this
HTML
<form>
<label for="same">all the same as first?</label>
<input type="text" id="foo[1]" name="foo[1]" value="" />
<input type="text" id="foo[2]" name="foo[2]" value="" />
<input type="text" id="foo[3]" name="foo[3]" value="" />
<input type="text" id="foo[4]" name="foo[4]" value="" />
<input type="text" id="foo[5]" name="foo[5]" value="" />
</form>
JavaScript
$("input[id=foo\\[1\\]").on("input", function (){
$(this).siblings().val($(this).val());
});
And if you want the other to be readonly:
$("input[id^=foo\\[]:not([id=foo\\[1\\]])").attr("readonly", "readonly");

JavaScript/Jquery : Multiple input value with multiple id

I have one html form
<form>
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
<input type="submit"/>
</form>
When I submit form,Say for id = 1 , qty is 5 or for id = 3, qty is 8. How to get this values in java script or jquery and submit this information to server? I get all the input text values. But I cannot differentiate which qty is for which value?
You should not have two or more elements with the same name or id!
names & ids are meant to be unique.
try this:
<form>
<input type="hidden" name="id[1]" value="1" /><input type="text" name="qty[1]" id="qty1" value="" />
<input type="hidden" name="id[2]" value="2" /><input type="text" name="qty[2]" id="qty2" value="" />
<input type="hidden" name="id[3]" value="3" /><input type="text" name="qty[3]" id="qty3" value="" />
<input type="hidden" name="id[4]" value="4" /><input type="text" name="qty[4]" id="qty4" value="" />
<input type="submit"/>
</form>
You can acces the data in JS like this:
using the element name:
var qty1 = document.forms[0].elements["qty[1]"].value;
Using the element id:
var qty1 = document.getElementById("qt1").value;
Well, to me, your hidden inputs are useless : You say that for input text one is a corresponding hidden field id with a defined value. Then you just have to name your input correctly and you know which id or something is correspondant.
If you want to use jQuery (javascript) as you said, then just do something like this :
<form>
<input type="text" name="qty1" id="qty1" />
<input type="text" name="qty2" id="qty2" />
<input type="text" name="qty3" id="qty3" />
<input type="text" name="qty4" id="qty4" />
<input type="submit" name='submit' id="submitButton" value="submit"/>
</form>
<script>
$('document').on('click','#submitButton',function(event){
event.preventDefault();
//this prevents the click to submit, as you want to get values by javascript... remove this if you post it with php
console.log('QTY1 : '+$('#qty1').val()+' - QTY2 : '+$('#qty2').val()+' - QTY3 : '+$('#qty3').val()+' - QTY 4 : '+$('#qty4').val());
//This is with jQuery, javascript would look like addEventListeneer, and get values like document.getElementById('id').value;
//then, ajax something if you really want to post your form through javascript, but this is not a good solution...
});
</script>
Other solution, better to me, would be just to use php and post directly your form...
<?php
if(isset($_POST['submit'])){
//then, user has clicked on submit button
//CONSIDERED THAT YOU HAVE CHECKED IF THE FIELDS ARE NOT EMPTY
$qty1 = $_POST['qty1'];
$qty2 = $_POST['qty2'];
$qty3 = $_POST['qty3'];
$qty4 = $_POST['qty4'];
//do your stuff with the posted values...
}else{
echo '
<form method="POST" action="yourPage.php">
<input type="text" name="qty1" id="qty1" />
<input type="text" name="qty2" id="qty2" />
<input type="text" name="qty3" id="qty3" />
<input type="text" name="qty4" id="qty4" />
<input type="submit" name="submit" id="submitButton" value="submit"/>
</form>
';
}
?>
Hope it helps
Your html is perfectly valid, but you're not using the name of the elements to your advantage.
<input type="hidden" name="id1" value="1" /><input type="text" name="qty1" />
This will return:
id1=1&qty1=X
But in the end I think your hidden field is just wasting space. All you seem to need is the quantity field with a proper name.
<input type="text" name="qty1" />
<input type="text" name="qty2" />
...
If you use the same name for the elements it will still give you the desired data, but it might need some parsing to figure out "what is what".
<input type="text" name="qty" />
<input type="text" name="qty" />
...
This will basically return:
qty=X,Y (or qty=X&qty=Y)
item ----0-1
You could wrap each pair of hidden-text inputs in div element, then iterate through these divs and find these two inputs inside each of the div elements. It might look like this:
<form>
<div id="keyValuePairs">
<div class="pair">
<input type="hidden" name="id" value="1" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="2" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="3" /><input type="text" name="qty" />
</div>
<div class="pair">
<input type="hidden" name="id" value="4" /><input type="text" name="qty" />
</div>
</div>
<input type="submit" id="sendBtn"/>
</form>
Then iterate with Jquery
$("#sendBtn").click(function(){
var arr = [];
$("#keyValuePairs .pair").each(function(){
var val = $(this).find("input[name='id']").val();
var key = $(this).find("input[name='qty']").text();
var obj = { val:val, key:key };
arr.push(obj);
});
// some ajax call or any way you want to post data server
});
at the end of iteration, arr should contain objects with val property containing what is in the value property of hidden input, and key property containing what the text present in text inputs.

jQuery getting ID of input with class on keyup not working

I have a bit of problem with my code here. What I am trying to accomplish is to get the ID of an input field on key up. All the input fields of interest have a class "count". All of them also have the same ID but it increments, say field1, field2, field3. I also have some "answer" inputs.
The mechanism I am trying to accomplish is to first get the ID from the input where I am typing (keyup). Then I proceed to pass in that value (var valueField) to the function updateFields(idNumber). After that, I just simply add 100 to the value of the field#x and finally I append the final value to its matching input with the id of answerx.
My code is not working. Does anybody know why? Is this approach correct? Or would you advise me to change something?
Here's my code:
HTML:
<input type="text" placeholder="" class="count" name="input1" id="1"/>
<input type="text" placeholder="" class="count" name="input2" id="2"/>
<input type="text" placeholder="" class="count" name="input3" id="3"/>
<input type="text" placeholder="" class="answer" name="ans1" id="answer1"/>
<input type="text" placeholder="" class="answer" name="ans2" id="answer2"/>
<input type="text" placeholder="" class="answer" name="ans3" id="answer3"/>
JavaScript:
$(document).on('keyup','.count',function(){
var valueField = $(this).attr('id').val();
updateFields(valueField);
});
function updateFields(idNumber){
var rawVal = $('#field' + idNumber).val();
var final = rawVal + 100;
$('#answer' + idNumber).val(final)
}
Thanks in advance!
When you get the attr('id') you don't need to call .val(). Also your code to get the field assumes a id that starts with 'field' and finally if you are going to take text input and treat is a number you should call parseInt() (with a radix of 10 for decimal), this will work:
$(document).on('keyup', '.count', function() {
var valueField = $(this).attr('id');
updateFields(valueField);
});
function updateFields(idNumber) {
var rawVal = parseInt($('#' + idNumber).val(), 10);
var final = rawVal + 100;
$('#answer' + idNumber).val(final)
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" placeholder="" class="count" name="input1" id="1" />
<input type="text" placeholder="" class="count" name="input2" id="2" />
<input type="text" placeholder="" class="count" name="input3" id="3" />
<input type="text" placeholder="" class="answer" name="ans1" id="answer1" />
<input type="text" placeholder="" class="answer" name="ans2" id="answer2" />
<input type="text" placeholder="" class="answer" name="ans3" id="answer3" />

only first form is checked by jQuery

i have one form on my page. so i want to check each input with corresponding button. so i wrote smth like this and it only checks first input even if i click on second inputs button.
<form target="myFrame" method="post" id="addProduct">
<fieldset>
<input type="hidden" name="iProductAdd" value="6" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[6]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="7" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[7]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
<fieldset>
<input type="hidden" name="iProductAdd" value="4" />
<input type="number" onkeypress="return isNumberKey(event)" name="aProducts[4]" autocomplete="off" value="" maxlength="4" size="4" onclick="function()" class="quantity" />
<input type="submit" onclick="refreshIframe();" value="" class="addtobasket" id="addtobasket" />
</fieldset>
</form>
and i have jQuery Code:
$(document).ready(function(){
$("form").submit(function(){
// Get the Login Name value and trim it
var name = $.trim($('.quantity').val());
// Check if empty of not
if (name === '') {
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-red.png')");
return false;
} else {
$('input[type="submit"]').each(function(){
$("#addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
});
}
});
});
Your problem is that you are using ids as it were classes. An id should be unique in a document. So defining multiple objects with the same id is an error. And all functions will apply only the first they encounter. To do what you want, you have to use classes, so change your code in this way:
$(".addtobasket").css("background-image", "url('http://restorani.weby.biz/templates/default/img/tick-green.png')");
To look for all elements of that class.

Clearing the textbox values onclick and displaying onblur

Is there a way to clear the default textbox value onclick on textbox and display onblur of multiple textboxes on form page?
HTML:
<input type="text" value="" onClick="Clear();" id="textbox1>
<input type="text" value="" onClick="Clear();" id="textbox2>
<input type="text" value="" onClick="Clear();" id="textbox3>
<input type="text" value="" onClick="Clear();" id="textbox4>
Javascript :
function Clear()
{
document.getElementById("textbox1").value= "";
document.getElementById("textbox2").value= "";
document.getElementById("textbox3").value= "";
document.getElementById("textbox4").value= "";
}
Your question was a little vague to me, but the above will clear all the textboxes when one is clicked. Hopefully this helps you.
One Line solution
<input type="text" value="" onClick="this.value='';" id="textbox1">
or
<input type="text" value="" onClick="this.value=='Initial Text'?this.value='':this.value;" id="textbox1">
function Clear1(str)
{
document.getElementById(str).value= "";
}
function Clear2(str2)
{
var aa1=document.getElementById(str2);
if (aa1.value==""){
document.getElementById(str2).style.backgroundColor = "#ffcccc";
}else{
document.getElementById(str2).style.backgroundColor = "#ffffff";
}
}
<input type="text" value="test1" onClick="Clear1(this.id);" id="textbox1" onblur="Clear2(this.id);">
<input type="text" value="test2" onClick="Clear1(this.id);" id="textbox2" onblur="Clear2(this.id);">
<input type="text" value="test3" onClick="Clear1(this.id);" id="textbox3" onblur="Clear2(this.id);">
<input type="text" value="test4" onClick="Clear1(this.id);" id="textbox4" onblur="Clear2(this.id);">
https://jsfiddle.net/warunamanjula/qy0hvmyq/1/

Categories

Resources