check box checked on page load and show output - javascript

Below is my working code but the only problem is, I want the check box to checked by default and show the jquery output on page load but it only show output when i re-check the check box.
http://jsfiddle.net/pratyush141/2mq5sr1h/
$(function() {
$defaultValue = $('.total').val();
$("input[type=checkbox]").click(function(event) {
var total = 0;
$("input:checked").each(function() {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('.total').val($defaultValue);
} else {
$('.total').val('$' + total);
}
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="invoice">
<input type="checkbox" checked='checked' value="1" />
<span class="inv-total">$100</span>
</div>
<input type="text" class="total" value="$90" />

It's simple, just remove the checked=checked from the checkbox, then use jquery to call the click on checkbox
<div class="invoice">
<input type="checkbox" value="1" />
<span class="inv-total">$100</span>
</div>
$(function () {
$defaultValue = $('.total').val();
$("input[type=checkbox]").change(function (event) {
var total = 0;
$("input:checked").each(function () {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('.total').val($defaultValue);
} else {
$('.total').val('$' + total);
}
});
//Call the click on checkbox
$("input[type=checkbox]").click();
})
Working fiddle: http://jsfiddle.net/2mq5sr1h/5/

You set value of input on click event. You need to set it in $(document).ready(). Try to change your script to this:
$(document).ready(function (){
setValue();
$("input[type=checkbox]").click(function(event) {
setValue();
});
});
function setValue()
{
$defaultValue = $('.total').val();
var total = 0;
$("input:checked").each(function() {
total += parseInt($(this).parent().find('.inv-total').text().substring(1));
});
if (total == 0) {
$('.total').val($defaultValue);
}
else {
$('.total').val('$' + total);
}
}

Related

Multiple validation for same value in Jquery

I have this code to validate 2 input text, but how can I validate same input for
dynamic intput text ? meaning input text quantity can be up to 100 or more.
<input type="text" id="id1" />
<input type="text" id="id2" />
$('input').blur(function() {
if ($('#id1').attr('value') == $('#id2').attr('value')) {
alert('Same Value');
return false;
} else { return true; }
});
If you want to check all the inputs are the same (I gather that's what you're trying to do) you could just loop through them by using a function like this:
function validate() {
for (var i = 2; i <= 100; i++) {
if ($('#id' + x).val() !== $('#id' + (x - 1)).val()) {
return false;
}
}
return true;
}
Of course, you may want to create inputs themselves using a loop too if you'll have that many on the page.
<input type="text" id="id1" onblur="validate()">
<input type="text" id="id2" onblur="validate()">
<p style="display: none">Test</p>
<script type="text/javascript">
function validate() {
for (var i = 1; i <= 2; i++) {
if ($('#id' + i).val() == $('#id' + (i - 1)).val()) {
$( "p" ).show( "slow" ); return false;
}
else
{
$( "p" ).hide( 1000 );
}
}
return true;
}
</script>
What I did is this hope someone can you this in future reference

How to show and hide field immediately base on the text length? - JQuery

I have two input text like this:
input1
<input type='text' id='input1' name='input1'>
<br>
input2
<input type='text' id='input2' name='input2'>
<br>
Now I want to hide and show input2 base on the event in input1 if there is no text in input1 then input2 will be hidden and vice versa. I write JQuery code like this:
$(document).ready(function () {
var inputText = document.getElementById("input1");
var textLength = inputText.value.length;
if (textLength <= 0){
$('#input2').hide("fast");
}
else{
$('#input2').show("fast");
}
});
It works only after each time refresh. So how to catch the input event in input1 and affect the change immediately to input2?
You can try this code:
$(document).ready(function () {
var input1 = $('#input1');
function toggleInput() {
if(input1.val().length) {
$('#input2').show("fast");
} else {
$('#input2').hide("fast");
}
}
toggleInput();
$('#input1').on('keyup', toggleInput);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
input1
<input type='text' id='input1' name='input1'>
<br>
input2
<input type='text' id='input2' name='input2'>
<br>
you can wrap it on jquery keydown or keyup function.
<script>
$(document).ready(function() {
$("#input1").keydown(function() {
var inputText = this.value;
var textLength = inputText.length;
if (textLength <= 0) {
$('#input2').hide("fast");
} else {
$('#input2').show("fast");
}
});
});
JS fiddle
You need to add event listeners for these elements. Example using mostly your original code.
$(document).ready(function() {
$('#input1').on("keyup", function() {
var inputText = document.getElementById("input1");
var textLength = inputText.value.length;
if (textLength <= 0) {
$("#input2").hide("fast");
} else {
$("#input2").show("fast");
}
})
});
$('#input1').on('input', function() {
$('#input2').toggle($(this).val().length === 0);
});
This solution assumes that you have two input textbox only.
First assign a common class like
input1
<input type='text' id='input1' class='input' name='input1'>
<br>
input2
<input type='text' id='input2' class='input' name='input2'>
<br>
$(".input").change(function(){
alert(this.id);
if(this.id == 'input1')
{
if ($(this).val().length > 0){
$("#input2").show();
} else {
$("#input2").hide();
}
}
else
{
if ($(this).val().length > 0){
$("#input1").show();
} else {
$("#input1").hide();
}
}
});
Replace your javascript with this code! This code improves the performance of your application as it uses selectors only once!
$(document).ready(function () {
var input1 = $('#input1');
var input2 = $('#input2');
input2.hide("fast");
input1.on('keyup', function() {
if(input1.val().length) {
input2.show("fast");
} else {
input2.hide("fast");
}
});
});

Js validate multipe input fields with same name

Ok i have multy fields with same name, and i want to check is all fields are not empty. My code works if i have only one input, but i have no idea how to do that with more inputs
<input class = "new_input" type=text name="name[]"/>
<input class = "new_input" type=text name="name[]"/>
function validation(){
var x = document.forms["form"]["name"].value;
if(x ==='')
{
$("#warning").html("Morate uneti vrednost!").css('color','red');
return false;
}
else
{
return true;
}
}
for example if enter only one field, validation will work, and i want to check all fields
Using just JS you could do something like
<input class="new_input" type="text" name="name[]">
<input class="new_input" type="text" name="name[]">
<input class="new_input" type="text" name="name[]">
<input class="new_input" type="text" name="name[]">
<button onclick="validate()">Validate</button>
<script type="text/javascript">
function validate() {
var inputs = document.getElementsByTagName("input");
var empty_inputs = 0;
for(var i = 0; i < inputs.length; i++) {
if(inputs[i].name.indexOf('name') == 0) { // check all inputs with 'name' in their name
if (inputs[i].value == '') {
empty_inputs++;
console.log('Input ' + i + ' is empty!');
}
}
}
if (empty_inputs == 0) {
console.log('All inputs have a value');
}
}
</script>
You have tagged jquery, so I have given something which works in jquery
http://jsfiddle.net/8uwo6fjz/1/
$("#validate").click(function(){
var x = $("input[name='name[]']")
$(x).each(function(key,val){
if($(val).val().length<=0)
{
$("#warning").html("Morate uneti vrednost!").css('color','red');
}
});
});
Try this:
function validate(){
var error = 0;
$.each( $("input[name='name[]']"), function(index,value){
if( value.value.length == 0){
$("#warning").html("Morate uneti vrednost!").css('color','red');
error = 1;
return;
}
});
if(!error){
$("#warning").html("");
}
}
Check it out here: jsFiddle

Getting values from elements added dynamically

http://jsfiddle.net/R89fn/9/
If any of the text input/Box added are empty then the page must not submit.when I try to retrieve values from the text inputs using their id`s nothing gets retrieved is it possible to retrieve values from elements added dynamically?
$("#submit").click(function (event) {
var string = "tb";
var i;
for (i = 1; i <= count; i++) {
if (document.getElementById(string+1).value=="") {
event.preventDefault();
break;
}
}
});
The above code is what I am using to get the value from the text fields using there id
I took a look on the code in the JSFiddle. It appears that the input textboxes are not given the intended IDs; the IDs are given to the container div.
The code for the add button should use this,
var inputBox = $('<input type="text" id="td1">') //add also the needed attributes
$(containerDiv).append(inputBox);
Check out this solution on fiddle: http://jsfiddle.net/R89fn/15/
var count = 0;
$(document).ready(function () {
$("#b1").click(function () {
if (count == 5) {
alert("Maximum Number of Input Boxes Added");
} else {
++count;
var tb = "tb" + count;
$('#form').append("<div class=\"newTextBox\" id=" + tb + ">" + 'InputField : <input type="text" name="box[]"></div>');
}
});
$("#b2").click(function () {
if (count == 0) {
alert("No More TextBoxes to Remove");
} else {
$("#tb" + count).remove();
--count;
}
});
$("#submit").click(function (event) {
var inputBoxes = $('#form').find('input[type="text"]');;
if (inputBoxes.length < 1) {
alert('No text inputs to submit');
return false;
} else {
inputBoxes.each(function(i, v) {
if ($(this).val() == "") {
alert('Input number ' + (i + 1) + ' is empty');
$(this).css('border-color', 'red');
}
});
alert('continue here');
return false;
}
});
});
<form name="form" id="form" action="htmlpage.html" method="POST">
<input type="button" id="b1" name="b1" value="Add TextBox" />
<input type="button" id="b2" name="b2" value="Remove TextBox" />
<input type="submit" id="submit" name="submit" value="Submit" />
</form>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script>
var count = 0;
$(document).ready(function() {
$("#b1").click(function() {
if (count == 5) {
alert("Maximum Number of Input Boxes Added");
} else {
++count;
var tb = "tb" + count;
$(this).before("<div class=\"newTextBox\" id= "+ tb +" >" + 'InputField : <input type="text" name="box[]"></div>');
}
});
$("#b2").click(function() {
if (count == 0) {
alert("No More TextBoxes to Remove");
} else {
$("#tb" + count).remove();
--count;
}
});
$("#submit").click(function(event) {
var string = "#texttb";
var i;
for (i = 1; i <= count; i++) {
if ($('input[type = text]').val() == "") {
event.preventDefault();
break;
}
}
});
});
</script>
<style>
.newTextBox
{
margin: 5px;z
}
</style>
Reason:
you had given id to the div element. so its not get retrive. i had updated the answer with the usage of jquery functions and changed your code for this requirement.
If I understand correctly, your only issue atm is to make sure that the form is not sent if one of the inputs are empty? Seems the solution to your problem is simpler. Simply add required at the end of any input and HTML5 will ensure that the form is not sent if empty. For example:
<input type="text" required />

count checkbox class only once

i've written this script to check when checkboxes with classes "A", "B" and "C" are selected and then add them together (these classes are assigned to multiple checkboxes). however, i want to only count one instance of them being checked, whereas this script counts them everytime checkboxes with these values are checked. how can i alter it to only count them once only?
jquery:
$(function() {
$('#product-counter .counter').text('0');
var total = $("#search-id-checkboxes .A:checked").length + $("#search-id-checkboxes .B:checked").length + $("#search-id-checkboxes .C:checked").length;
if(total>0){$("#product-counter .counter").text(total);}
else{$("#product-counter .counter").text('0');}
})
function updateCounter() {
var len = $("#search-id-checkboxes .A:checked").length + $("#search-id-checkboxes .B:checked").length + $("#search-id-checkboxes .C:checked").length;
if(len>0){$("#product-counter .counter").text(len);}
else{$("#product-counter .counter").text('0');}
}
$("#search-id-checkboxes input:checkbox").on("change", function() {
updateCounter();
});
html:
<div id="search-id-checkboxes">
<input type="checkbox" class="A"/> A<br />
<input type="checkbox" class="A" /> A<br />
<input type="checkbox" class="B" /> B<br />
<input type="checkbox" class="B" /> B<br />
<input type="checkbox" class="C" /> C<br />
<input type="checkbox" class="C" /> C<br />
</div>
you already tried the unique method of jquery?
See http://api.jquery.com/jQuery.unique/
Improvised logic to not have an iterate and work on the total that was calculated inside ready,
DEMO: http://jsfiddle.net/MQhyt/
Full function:
$(function () {
$('#product-counter .counter').text('0');
var inArray = [];
$("#search-id-checkboxes :checkbox").each(function () {
if (this.checked && $.inArray(this.className, inArray) == -1) {
inArray.push(this.className);
}
});
var total = inArray.length;
if (total > 0) {
$("#product-counter .counter").text(total);
} else {
$("#product-counter .counter").text('0');
}
$("#search-id-checkboxes input:checkbox").on("change", function () {
updateCounter.call(this);
});
function updateCounter() {
var elClass = this.className;
var $el = $('#search-id-checkboxes .' + elClass + ':checked');
if ($el.length == 1 && this.checked) {
total += 1;
} else if ($el.length == 0) {
total -= 1;
}
$("#product-counter .counter").text(total);
}
});
Check out this version http://jsfiddle.net/WLmtq/ using .each if you have any issues with above logic.
May be you want to check like below,
var len = ($("#search-id-checkboxes .A").is(":checked") ? 1 : 0) +
($("#search-id-checkboxes .B").is(":checked") ? 1 : 0) +
($("#search-id-checkboxes .C").is(":checked") ? 1 : 0);
DEMO: http://jsfiddle.net/MCKtA/
Use this...
var total = 0;
$(':checkbox').on('change', function (e) {
var a = $(this).prop('class');
if($("." + a + ':checked').length == 1 && $(this).is(':checked')){
total +=1;
}
if($("." + a + ':checked').length == 0){
total-=1;
}
$('#product-counter .counter').text(total);
});
See this DEMO

Categories