I want to get value from "data-val" input field which is hypen separated and after removimg hypen individual value should get assigned to separate text box which have same class name, but instead of separate value only last value is assigning to every text box.
for example if data-val class have value like this 3-4-5 then it should get separated by "-" and individual value get assigned to separated text filed.
<input type="text" class="form-control data-val" onblur="assign_val('data-val','input_val')"value=""/>
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<input type="text" class="form-control input_val" name="">
<script>
function assign_val(data-val,input_val) {
var data-val = $(".data-val").val();
var count = $('.' + input_val).length;
var i;
var data-val= data-val.split("-");
for (i = 1; i <= data-val.length; i++)
{
$(".input_val").val(data-val[i]);
}
}
</script>
You can do this using JQuery .each https://api.jquery.com/each/
$( ".input_val" ).each(function( index ) {
$(this).val(data-val[index]);
});
Related
i am creating a voucher, for an Management Program, i have an input field which counts value and add in the last colum, as sum of debits and credits in all rows for that i am using counters to track sum, i am using onchange or onblur click event, it works well it counts wih increase in rows, but when i try to remove the value from input it still couns i counter
here is the code
var credit_counter = 0;
$(document).on('blur', 'input[name="credit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
credit_counter = credit_counter + Number(value);
var credit_balance = $("#get_credit").val(credit_counter)
});
var debit_counter = 0;
var total_balance = 0;
$(document).on('blur', 'input[name="debit[]"]', function () {
idName = $(this).attr('id');
id = idName.substring(6, idName.length);
var value = $(this).val();
$("#credit" + id).val(value)
debit_counter = debit_counter + Number(value);
var debit_balance = $("#get_debit").val(debit_counter);
});
I want to remove the value in case I erase value from input field thanks
Here is a complete example which achieves what you are looking to do (warning: no styling has been added so it is ugly). You can copy and paste this into a .html file and open it in with the web browser of your choice to see it in action:
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
</head>
<body>
<input placeholder="credit field 1" type="text" name="credit" /><br/>
<input placeholder="credit field 2" type="text" name="credit" /><br/>
<input placeholder="credit field 3" type="text" name="credit" /><br/>
<input placeholder="credit field 4" type="text" name="credit" /><br/>
<input placeholder="debit field 1" type="text" name="debit" /><br/>
<input placeholder="debit field 2" type="text" name="debit" /><br/>
<input placeholder="debit field 3" type="text" name="debit" /><br/>
<input placeholder="debit field 4"type="text" name="debit" /><br/>
<input placeholder="credit total" id="get_credit" type="text" /><br/>
<input placeholder="debit total" id="get_debit" type="text" /><br/>
<script>
$(document).on('blur', 'input[name="credit"]', function () {
var total = 0;
$('input[name="credit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_credit').val(total);
});
});
$(document).on('blur', 'input[name="debit"]', function () {
var total = 0;
$('input[name="debit"]').each(function( index, element ) {
if(!isNaN($(this).val())){
total += Number($(this).val());
}
$('#get_debit').val(total);
});
});
</script>
</body>
</html>
Your issue is that the way you are keeping track of the total debits and total credits does not allow you to know the values stored in each input individually. The problem that creates is that when a value is removed, there is no way for you to know what to subtract from the total. (Likewise, if someone were to change the value from 3 to 30 then your total would go up by 30 instead of 27).
There is definitely more than one way to fix that however the answer I posted is what I believe to be most simple: On blur of the input, iterate through the appropriate inputs and add them together then assign the total to the appropriate input.
Note I've excluded your logic of acting on the ids of the inputs as it is unclear what you're doing with them without further explanation or seeing your view markup. It also seems to be unrelated to the issue you're posting about.
I understood your problem. Can we do like this.
1) Trigger an event on focus.
2) Subtract the focused element value from total.
If user doesn't removed complete value from the input. anyway we are triggering event on blur. So it will take whatever the value remained in the text box and counts that!
I want to get an updated value from an input field. So I setup a listener
$('.product-quantity input').change( function() {
console.log($(this).parents('.product')[0].id)
var id = $(this).parents('.product')[0].id;
var classgroup = $(this).parents('.product')[0]
for (var i = 0; i < classgroup.childNodes.length; i++){
if (classgroup.childNodes[i].className == "product-quantity") {
console.log(classgroup.childNodes[i])
var target = classgroup.childNodes[i]
}
}
});
classgroup.childNodes[i] output this html
<div class="product-quantity">
<input type="number" id="productquantity" value="1" min="1">
</div>
what I want to do now is get the user input in value. It is suppose to be simple but I can't figure it out
I've tried these but no success
console.log(target.attr('value'))
target.each(function(){
console.log(this.value)
})
how can I get the value number for the output html?
Is this what you are trying to do? You can grab the val of the input itself, and log on change (or whatever you would like to do).
$('#productquantity').change(function() {
console.log($(this).val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-quantity">
<input type="number" id="productquantity" value="1" min="1">
</div>
I basically am trying to copy my selector and create a new one.. this is what im trying to achieve...
I have many inputs in divone and dont want to list out each one in my jquery, so i would like to dynamically find the object and link to the corresponding divtwo object
<div id="divOne">
<input type="textbox" id="tb1" value="TEXTHERE">
<input type="textbox" id="tb2" value="TEXTHERE">
</div>
<div id="divTwo">
<input type="textbox" id="tb3" value="TEXTHERE">
<input type="textbox" id="tb4" value="TEXTHERE">
</div>
$("#divOne:input").bind("keyup change", function(e) {
var selector = ($(this).selector()); //hoping this would return input object from DivOne
var value = ($(this).val());
var newselector = //modify divOne object to have divTwo selector
$(newselector).val() = value;
});
Then I'd like to to save divOne text into the divTwo textbox.
I want it to look like this, only using this. So lets say i change textbox value of tb1 to "textthere":
$("#divOne:input").bind("keyup change", function(e) {
var selector = $(#divOne.attr("id", tb1")); //this should be covered dynamically using $this or another jquery method
var newselector = $(#divTwo.attr("id", tb3)); //this however should be generated dynamically by selector var
$(newselector).val() = selector.val();
});
Thanks
If you want to match corresponding elements you can use index() and eq()
var $d1Inputs = $("#divOne input").on("keyup",function(e) {
var index = $d1Inputs.index(this);
$('#divTwo input').eq(index).val($(this).val());
});
From what I understand you want to copy the value of an input in first div to the corresponding input in second div.
So you must use index() to find what is the index of the input first and the use :eq in your selector to match only the corresponding input in second div.
$("#divOne input").on("keyup",function(e) {
$("#divTwo input:eq("+$(this).index()+")").val(($(this).val()));
});
check this fiddle https://jsfiddle.net/qfey8L14/3/
As you are trying to do is having changes on second inputs as changes made on first div then; you could try-
$(document).on('keyup chage','#divOne input',function(){
// will gives index of divone input while keyup or change event occurs
$index=$('#divOne input').index($(this));
// selects input from #divTwo in array from
$divtwoinputs=$('#divTwo input');
// now reflect the value on #divtwo inputs
$($divtwoinputs[$index]).val($(this).val());
});
Hope this fix your problem if not please let me know... if fixes your problem accept this as answer...
How about using the input event and the .index() method like so:
$('#divOne > :input').on('input', function() {
var index = $(this).index();
$('#divTwo > :input').eq( index ).val( this.value );
});
$('#divOne > :input').on('input', function() {
var index = $(this).index();
$('#divTwo > :input').eq( index ).val( this.value );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divOne">
<input type="textbox" id="tb1" placeholder="TEXT HERE">
<input type="textbox" id="tb2" placeholder="TEXT HERE">
<select id="sl1">
<option value="">Select</option>
<option>1</option>
<option>2</option>
</select>
</div>
<div id="divTwo">
<input type="textbox" id="tb3" placeholder="TEXT HERE">
<input type="textbox" id="tb4" placeholder="TEXT HERE">
<select id="sl2">
<option value="">Select</option>
<option>1</option>
<option>2</option>
</select>
</div>
Note:
:input
Selects all input, textarea, select and button elements.
I have a list of form elements that I want to loop over to get the values of, so if someone typed their name in the input i want their name, if they selected an option from a select box I want the not the numerical value but the string. All these values needs to be outputted as one string.
This is the loop i've created, I however have no idea how to go about this problem..
every form element has a name starting with credit_
if someone could point me in the right direction it would be much appreciated..
$(this).parent().parent().find('[name*=credit_]').each(function( index ){
});
my html is quite simple.
<div class="comp-row">
<!-- a select -->
<!-- an input -->
</div>
This is part of the form, there are many other form fields but im only concerned with the ones within "comp-row" which Im manipulating a lot.
I ended up using:
$('.comp-row [name*="credit_"]:not([type=hidden])')
.each(function(index,elem)
{
console.log($(this).text() != '' ? $(this).find('option:selected').text().trim() : $(this).val());
});
}
Youre looking for the $('select[name*="credit_"]>option:selected') selector.
To read the text value for your , issue .text()
Combine this with if($('input[name*="credit_"]').text() != '') evaluation, combined something like this:
var theName = $('input[name*="credit_"]').text() != ''
? $('select[name*="credit_"]>option:selected').text()
: $('input[name*="credit_"]').text();
Depending on format you want you can use serialize() or serializeArray().
For example to obtain for whole form:
var data=$('#myForm').serialize()
For specific group of elements:
$('[name*=credit_]').serializeArray()
serialize() API docs
serializeArray() API docs
var result = '';
$(this).parent().parent().find('[name*=credit_]').each(function( index ){
result += $(this).is("select") ? $(this).text() : $(this).val();
});
Iterate over all elements that match your criteria (name*=credit_). Check its type and put the value inside a variable.
HTML
<form>
<input type="text" name="credit_a" value="1" />
<input type="text" name="credit_b" value="2" />
<input type="text" name="credit_c" value="3" />
<select name="credit_d">
<option value="kk">kk</option>
<option value="jj" selected>jjjjj</option>
</select>
<input name="credit_e type="checkbox" checked value="imchecked" />
</form>
<form>
<input type="text" name="credit_a" value="55" />
<input type="text" name="credit_b" value="66" />
<input type="text" name="credit_c" value="77" />
<input type="text" name="credit_d" value="88" />
</form>
<p id="result"> </p>
javascript
$(function() {
var values = '';
$('form [name*=credit_]').each(function() {
var $this = $(this);
if($this[0].tagName == 'TEXTAREA') {
values += ' ' + $this.text();
}
else if ($this[0].tagName == 'SELECT') {
values += ' ' + $this.find(':selected').text();
}
else {
values += ' ' + $this.val();
}
});
$('#result').html(values);
});
jsfiddle: http://jsfiddle.net/5tgzr/2/
I would like to select all the contents of the text-boxes when a user clicks on it. But, since my document contains almost 5 text-boxes, instead of giving each text-box an ID selector or onfocus attribute, I would like to select all the text-boxes.
For example: var x = document.getElementsByTagName("p");
The above code selects all the paragraphs in a document. So, I need a similar code for all textboxes. I have tried replacing input and input[type=text] Nothing worked.
Try this out:-
http://jsfiddle.net/adiioo7/zvgHx/
JS:
var x = document.getElementsByTagName("INPUT");
var y = [];
var cnt2 = 0;
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "text") y.push(x[cnt]);
}
alert("Total number of text inputs: " + y.length);
HTML:
<input type="text" id="input1" value="input1"></input>
<input type="text" id="input2" value="input2"></input>
<input type="text" id="input3" value="input3"></input>
<input type="text" id="input4" value="input4"></input>
<input type="text" id="input5" value="input5"></input>
So, array y will hold all inputs with type as text.
Use jQuery: $('input[type=text]') That will do the trick.
http://jquery.com/