Update two fields with multiple lines in JavaScript - javascript

This is my js
$(function() {
var tryme = 5;
var options = {
source: "<?=base_url()?>/autocomplete/",
minLength: 1,
select: function( event, ui ) {
event.preventDefault();
this.value = ui.item.valuedesc;
//$(this).siblings('.item_sku').val(ui.item.valuedesc); // not working
//$(this).siblings('.description').val(ui.item.description); // not working
//$(this).siblings('.rate').val(ui.item.rate); // not working
}
};
$( ".item_sku" ).autocomplete(options);
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#invoice_table tr:last').clone();
cloned.appendTo('#invoice_table').find('input').val('');
cloned.find('.item_sku').autocomplete(options);
});
});
I am using jquery to clone a line of fields in order to build my invoice items.
What is NOT working now is the specific line of fields are not updating.
These are my fields:
<input type="text" maxlength="255" name="item_sku[]" data-required="1" class="form-control item_sku" autocomplete="off" required/>
<input type="text" maxlength="255" name="item_description[]" id="description" data-required="1" class="form-control calculate description" required/>
<input type="text" maxlength="255" name="item_amount[]" data-required="1" class="form-control calculate rate" autocomplete="off" required/>
So when I start typing int he ITEM_SKU field, I get my autocomplete options - which is working fine. And when I click on it, it must update the description and item_amount textfields.
Now if I change the field class to an ID, and the javascript to example
<input type="text" maxlength="255" name="item_amount[]" id="rate" data-required="1" class="form-control calculate" autocomplete="off" required/>
It works.
But because I have an "add more fields" button - I have to have multiple fields with the same ID.
How can I get the current line's fields updated with ui.item.description and ui.item.rate?
http://i.share.pho.to/7945c43f_o.jpeg

I would use a hidden div as a library for your cloned elements...
Also, remove the ID after the obj is cloned.
something like (untested)
$(".add-row").click(function (e) {
e.preventDefault();
var cloned = $('#hidden').find('#tr').clone().removeAttr('id');
cloned.appendTo('#invoice_table');
cloned.find('.item_sku').autocomplete(options);
});
Edit: Simplify jsfiddle example (tested) http://jsfiddle.net/c5ajonav/3/

Related

When button is clicked, display the value on my textbox

newbie here. My target is when is when I click the button, my 2nd textbox will do the copy without comma. How can I make this work? I provided my JS fiddle and codes below. Any help will be appreciated. Thank you
JS Fiddle: https://jsfiddle.net/rain0221/auk4rfdg/6/ // I provided more explanation here
html:
<input type="text" value="" class="form-control" id="box"/>
<input type="text" value="" id="textbox2" required name="amount1" min="100" autocomplete="off"/>
<input id="bet4" class="amount btn btn-success" type="button" onclick="showme('5,000')" value="5000">
script:
//this function copies the textbox1 values with autocomma and produces same value but without comma on textbox2
function updateTextView(_obj) {
var num = getNumber(_obj.val());
if (num == 0) {
_obj.val('');
} else {
$("#textbox2").val(num);
_obj.val(num.toLocaleString());
}
}
function getNumber(_str){
var arr = _str.split('');
var out = new Array();
for(var cnt=0;cnt<arr.length;cnt++){
if(isNaN(arr[cnt])==false){
out.push(arr[cnt]);
}
}
return Number(out.join(''));
}
$(document).ready(function(){
$('#box').on('keyup',function(){
updateTextView($(this));
});
});
//this function shows the value of my button to the textbox
$(document).ready(function(){
$("#bet4").on("click", function(e)
{
e.preventDefault();
let box = $("#box").val();
$("#betAmountResult").html(box);
})
})
function showme(count){
document.getElementById("box").value=count;
}
When 5000 clicked, change textbox2 value!
Code snippet:
function updateTextView(_obj) {
var num = getNumber(_obj.val());
if (num == 0) {
_obj.val('');
} else {
$("#textbox2").val(num);
_obj.val(num.toLocaleString());
}
}
function getNumber(_str){
var arr = _str.split('');
var out = new Array();
for(var cnt=0;cnt<arr.length;cnt++){
if(isNaN(arr[cnt])==false){
out.push(arr[cnt]);
}
}
return Number(out.join(''));
}
$(document).ready(function(){
$('#box').on('keyup',function(){
updateTextView($(this));
});
});
$(document).ready(function(){
$("#bet4").on("click", function(e)
{
e.preventDefault();
let box = $("#box").val();
$("#betAmountResult").html(box);
})
})
function showme(count){
document.getElementById("box").value=count;
document.getElementById("textbox2").value=count.replace(',','');
}
<script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<input type="text" value="" class="form-control" placeholder="autocomma textbox" id="box"/>
<input type="text" value="" placeholder="same value but no comma" id="textbox2" required name="amount1" min="100" autocomplete="off"/>
<input id="bet4" class="amount btn btn-success" type="button" onclick="showme('5,000')" value="5000">
document.addEventListener("input", action)
document.addEventListener("click", action)
function action(ev){if (ev.target.tagName=="INPUT"){
const ch=ev.target.closest("div").children;
if(ev.target!=ch[1])
ch[1].value=(ev.target.value-0).toLocaleString()
if(ev.target==ch[2])
ch[0].value=ev.target.value;
}}
<div>
<input type="text" value="" class="form-control" required/>
<input type="text" value=""/>
<input class="amount btn btn-success" type="button" value="5000">
</div>
<div>
<input type="text" value="" class="form-control" required/>
<input type="text" value=""/>
<input class="amount btn btn-success" type="button" value="2000000">
</div>
I wrote my snippet without jQuery as it is not really needed here and I reversed the roles of the input fields as it is
a better user experience if the input is not tampered with directly
difficult to "undo" a .toLocaleString(), see here
The trigger for action is the input event which also includes paste actions done via mouse clicks.
I also removed the id attributes from your input values. This way you can add further input groups to your page and re-use the script without further change.
All my addEventListener() actions are done in the "delegated" mode, to the parent document. By doing it this way the event will also be triggered by dynamically added elements (elements that might get added through some user interaction).

Validate input textbox with image

I have 13 input text boxes simply to collect information from user. I'm trying to add a little bit of logic that when user clicks next button check to see if input field is blank and if so place a X image after the textbox. Where I'm getting up up at is if I put text in the box then it will not outline the box in red but still places an X after the form.
I've tried using the $.each() and $.filter()
Here is the js:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
var inputs = $(":input").filter(function () {
return this.value === "";
});
if (inputs.length) {
$(inputs).css('border-color', 'red').after(invalid);
console.log(inputs.length);
}
});
Here is some of the input text boxes not all :
<label>First Name:</label>
<input type="text" name="First Name" class="txtbox" id="firstName" />
<label>Last Name:</label>
<input type="text" name="Last Name" class="txtbox" id="lastName" />
<label>Email Address:</label>
<input type="text" name="Email Address" class="txtbox" id="email" />
<label>Company:</label>
<input type="text" name="Company" class="txtbox" id="company" />
Try this:
var invalid = '<img src="css/Filtration/img/x.png" /> ';
$('.btn').click(function () {
$(":input").each(function () {
if($(this).val() == '' ){
$(this).css({borderColor: 'red'}).after(invalid);
}
});
});
Note that if you had not previously set other border css parameters, the color may not work. So this pattern can take care of it in that case:
.css({border: '1px solid red'})
Now, :input is a bit broad and therefore inefficient. Therefore, its better to say:
$(':text', '#container').each(...
Where #container is, of course, the container of all your inputs.
Please, consider use jquery Validate, you can see examples here and documentation here

JQuery dynamically input fields with sub input fields

stopping my function on javascript
By using this I can add unlimited inputs on my page. But the issue is in my case, I have an input field but it may or may not have a child or sub input field and if then it should be associated with the parent input field.
Also parent input field is must for sub input fields.
Question?
Dynamic input fields(got from above),
Dynamic child/sub input fields,
How to associate child/sub input fields with parent,
So that it can save in the db with related to field.
http://jsfiddle.net/Shahbaz/WhaBx/
From this I can add multiple input fields and append multiple sub/child input fields.
which can be append.
I'll try to modify more.
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents label').size() + 1;
$('#addScnt').live('click', function() {
$('<p>Keyword: '+i+'Remove<br><labelfor="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter Keyword" />Add Variants<a></a></label></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i >2 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
$('#addVar').live('click', function() {
//alert();
$('<p><label for="var"><input type="text" id="p_scnt" size="20" name="p_scnt_' + i +'" value="" placeholder="Enter Vareyword" /></label> Remove Var</p>').appendTo($(this).next());
return false;
});
$('#remVar').live('click', function() {
$(this).parent('p').remove();
return false;
});
});
<h2>Add Another Input Box</h2>
<div id="p_scents">
<p>
Keyword: 1
<br/>
<label for="p_scnts"><input type="text" id="p_scnt" size="20" name="keyword[]" value="" placeholder="Enter keyword">
Add Variants
</label>
</p>
</div>
Use similar function and append under paragraph with different name,
Hope this will be helpful.
Try it.

binding on change event to group of input fields in jquery

I have three input fields as below:
<input type="text" name="address" id="address"/>
<input type="text" name="city" id="city"/>
<input type="text" name="country" id="country"/>
How can i add onChange event to all of these fields at once something like this:
$("select the elements with id address,city,country").bind("change", function() {
//do something
});
use , in id selector as #Rory said
OR
add a class to all this and call change function
<input type="text" name="address" id="address" class="className"/>
<input type="text" name="city" id="city" class="className"/>
<input type="text" name="country" id="country" class="className"/>
$('.className').bind("change", function(){
//your stuff
});
HOWEVER
since it is an input field.. i recommend you to use..keyup(), using change you have to click out of the text box to make it fire.
$('.className').keyup(function(){
//your stuff
});
You can use , as you would in CSS to combine selectors. Try this:
$("#address, #city, #country").bind("change", function() {
//do something
});
Alternatively you can add a class to each element and select that.

JQuery autocompleter for dynamic input boxes

I have a webpage with jquery generating dynamic html input boxes.
Something like this appears on the page.
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
<input type="text" id="numbers[]" ></input>
These text-boxes all use the same autocompleter, is it possible in jQuery to point my autocompleter at all of these?
First of all id should be unique in the whole document so your code is not correct.
What you probably mean is
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
<input type="text" name="numbers[]" ></input>
To enable autocomplete on those boxes just use the selector that will match them all
var data = "foo bar baz";
$('input[name^=numbers]').autocomplete(data);
You could add a div that wraps input and that is never changed, then upon creation of new input store its id in jquery internal cache, just like this:
var $input = '<input name=somename[] type="text"/>';
$('#mywrap').append($input);
$input.data('id', 'some id');
Then on you can access autocompleter in the following way:
$('#mywrap input').live('click', function() {
var id = $(this).data('id');
// and now do anything with the new id you have!
});

Categories