Develop Reference

input onchange link autoclick in codeigniter

I'm new to JavaScript. My question is how to link auto click onchange input
<input type="text" name="quantity" id="quantity" class="form-control" />
<input type="text" name="discount" id="discount" class="form-control" />
HTML
<a href="javascript:document.getElementById('cart_1').submit();" id="p" title="Edit Sale">
JavaScript
$("#quantity").change(function() {
$('a').val(2).trigger('change');
});

Use callback function on change event in jquery.Like this.Enter value on both fields if you form fields are not empty form will be send.Try with one field blank field will not send.Hope it will help you.
$("#quantity,#discount").on('change',function(){
var quantity=$("#quantity").val();
var discount=$("#discount").val();
if(quantity!=""&&discount!=""){
document.getElementById('anchor').click();
console.log('form send');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="quantity" id="quantity" class="form-control" />
<input type="text" name="discount" id="discount" class="form-control" />
send
See fiddle here https://jsfiddle.net/vn4toLu6/1/

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");

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.

Use jQuery selector as method

I have page with many inputs inside a set of different divs.
A subset of those inputs are created dinamically and they can be also deleted.
By creating and deleting elements i could have a list of inputs named as shown:
<div id="first">
<input type="text" name="elem[0][elem_option][0][price]" value="">
<input type="text" name="elem[0][elem_option][1][price]" value="">
<input type="text" name="elem[0][elem_option][5][price]" value="">
<input type="text" name="elem[0][elem_option][21][price]" value="">
<input type="text" name="elem[3][elem_option][0][price]" value="">
<input type="text" name="elem[3][elem_option][1][price]" value="">
<input type="text" name="elem[3][elem_option][3][price]" value="">
<input type="text" name="elem[3][elem_option][8][price]" value="">
</div><!-- first -->
<div id="second">
<input type="text" name="elem[1][elem_option][1][price]" value="">
<input type="text" name="elem[1][elem_option][2][price]" value="">
<input type="text" name="elem[1][elem_option][7][price]" value="">
<input type="text" name="elem[1][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][5][price]" value="">
<input type="text" name="elem[5][elem_option][6][price]" value="">
<input type="text" name="elem[5][elem_option][8][price]" value="">
<input type="text" name="elem[5][elem_option][9][price]" value="">
</div><!-- second-->
....
I need to select all elements with a name that ends with [price] and save in a different variable of each div.
I tried a jQuery selector used as method of getelementbyid:
first_price_inputs = document.getElementById('first').jQuery('input[name$="[price]"]')
second_price_inputs = document.getElementById('second').jQuery('input[name$="[price]"]')
But i get this error:
Uncaught TypeError: Object #<HTMLDivElement> has no method 'jQuery'
please help!

Try this:
first_price_inputs = jQuery('#first input[name$="[price]"]');
second_price_inputs = jQuery('#second input[name$="[price]"]');
Look here: http://jsfiddle.net/qRDkq/

try
first_price_inputs = jQuery('#first > input[name$="[price]"]')
#Cherniv: its not an input of ID #first, but a child of the element with ID #firstof type input. So the descendant selector should be used afaik?

How to I only show the divs if that div has an input that isn't blank?

I have a bunch of divs that are all hidden like this
<div class="elements">
<input value="something" type="text" value="" name="name">
<input value="" type="text" name="phone">
</div>
<div class="elements">
<input type="text" value="" name="name" class="contact_name">
<input value="something" type="text" name="phone">
</div>
<div class="elements">
<input type="text" value="" name="name" class="contact_name">
<input value="" type="text" name="phone">
</div>
<div class="elements">
<input value="something_again" type="text" value="" name="name">
<input value="" type="text" name="phone">
</div>
CSS
.elements{display:none;}
I want to show only the element divs that have an input of that is not an empty string....so in the above example i would show the first, second and fourth divs because at least one input has a value...
$('.elements').find('input').each(function)...
that is what i have so far but not sure how to search if there is at least one input that isn't blank

Try this
$('.elements input:text[value!=""]').parents(".elements").show();

$('.elements').each(function() {
var count = $(this).find('input[value!=""]').length;
count > 0 ? $(this).show() : $(this).hide();
});