jquery price not updating on delete - javascript

I want to update price on delete button click. When I am clicking on add button it adding the field and updating the price. But on delete button it is only deleting field and price is not updating.
$(document).ready(function() {
$('#add').on('click', function() {
var maxfld=$('.acmp').length;
var pricedl=500;
if(maxfld<10)
{
$('#new_ac').append('<div id="" class="acmp">'+(++maxfld)+' <p>ACCOMPANYING PERSON DETAILS (No access to Scientific Halls)</p><input type="text" name="name" placeholder="Accompany Full Name" required /><input type="text" name="mob" placeholder="Accompany Mobile Number" required /><br />Gender<br /><input name="gender" type="radio" value="male" required="required" /> Male<input name="gender" type="radio" value="female" required="required" /> Female</div>');
}
if(maxfld>9)
{
alert("Cannot add more accompany");
}
var totalp=(pricedl*maxfld);
$('#amount').html(totalp);
});
$('#del').on('click', function() {
$('.acmp:last-child').remove();
var newp=totalp/maxfld;
$('.price').html(newp);
});
});

You are missing the below variables in delete block
var maxfld=$('.acmp').length;
var pricedl=500;
var totalp=(pricedl*maxfld);
May be the below code will work
$('#del').on('click', function() {
$('.acmp:last-child').remove();
var maxfld=$('.acmp').length;
var pricedl=500;
var totalp=(pricedl*maxfld);
var newp=totalp/maxfld;
$('.price').html(newp);
});

You need tot make your variables(totalp,maxfld) global. Now they are out of the scope of the second click function and it will return undefined. Your code should look like this:
$(document).ready(function() {
var maxfld = '';
var pricedl = '';
$('#add').on('click', function() {
maxfld = $('.acmp').length;
pricedl = 500;
if (maxfld < 10) {
$('#new_ac').append('<div id="" class="acmp">' + (++maxfld) + ' <p>ACCOMPANYING PERSON DETAILS (No access to Scientific Halls)</p><input type="text" name="name" placeholder="Accompany Full Name" required /><input type="text" name="mob" placeholder="Accompany Mobile Number" required /><br />Gender<br /><input name="gender" type="radio" value="male" required="required" /> Male<input name="gender" type="radio" value="female" required="required" /> Female</div>');
}
if (maxfld > 9) {
alert("Cannot add more accompany");
}
var totalp = (pricedl * maxfld);
$('#amount').html(totalp);
});
$('#del').on('click', function() {
$('.acmp:last-child').remove();
var newp = totalp / maxfld;
$('.price').html(newp);
});
});

According to me you need to remove the element after you get the value of maxfld
$('#del').on('click', function() {
var pricedl=500,
maxfld=$('.acmp').length,
totalp=(pricedl*maxfld);
$('.acmp:last-child').remove();
var newp=totalp/maxfld;
$('.price').html(newp);
});

Related

jQuery checkbox script giving odd results

Script is supposed to check all hidden checkboxes when the main checkbox attribute is checked as TRUE.
If it's left unchecked, or if user checks/unchecks, the same value should be applied for the hidden attributes.
It works fine 90% of times, but it seems in some cases (not sure how yet) it doesnt work, and some results come in where user has main checkbox as TRUE but all others as FALSE, and vice-versa.
Why does it happen?
<script>
$(function() {
var marketingMAIN= $("input[type='checkbox'][name='marketingMAIN']");
var marketingPhone = $("input[type='hidden'][name='marketingPhone']");
var marketingRobo = $("input[type='hidden'][name='marketingRobo']");
var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
var marketingIM = $("input[type='hidden'][name='marketingIM']");
var marketingPush = $("input[type='hidden'][name='marketingPush']");
var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");
marketingMAIN.on('change', function()
{
if ($(this).val() == "TRUE") {
marketingPhone.prop('checked',true);
marketingPhone.val('TRUE');
marketingRobo.prop('checked',true);
marketingRobo.val('TRUE');
marketingSMS.prop('checked',true);
marketingSMS.val('TRUE');
marketingEmail.prop('checked',true);
marketingEmail.val('TRUE');
marketingIM.prop('checked',true);
marketingIM.val('TRUE');
marketingPush.prop('checked',true);
marketingPush.val('TRUE');
marketingPaperMail.prop('checked',true);
marketingPaperMail.val('TRUE');
} else {
marketingPhone.prop('checked',false);
marketingPhone.val('FALSE');
marketingRobo.prop('checked',false);
marketingRobo.val('FALSE');
marketingSMS.prop('checked',false);
marketingSMS.val('FALSE');
marketingEmail.prop('checked',false);
marketingEmail.val('FALSE');
marketingIM.prop('checked',false);
marketingIM.val('FALSE');
marketingPush.prop('checked',false);
marketingPush.val('FALSE');
marketingPaperMail.prop('checked',false);
marketingPaperMail.val('FALSE');
}
});
});
</script>
The hidden attributes are marked as follows:
<input type="hidden" name="marketingPhone" value=""/>
<input type="hidden" name="marketingRobo" value=""/>
<input type="hidden" name="marketingSMS" value=""/>
<input type="hidden" name="marketingEmail" value=""/>
<input type="hidden" name="marketingIM" value=""/>
<input type="hidden" name="marketingPush" value=""/>
<input type="hidden" name="marketingPaperMail" value=""/>
The value won't change for a checkbox unless you specifically change it. Try using is() like in this answer.
Instead of checking the visible checkbox's value in your change listener like this:
if ($(this).val() == "TRUE") {
Check its checked attribute:
if ($(this).is(":checked")) {
Here's a working example:
$(function() {
var marketingMAIN = $("input[type='checkbox'][name='marketingMAIN']");
var marketingPhone = $("input[name='marketingPhone']");
var marketingRobo = $("input[name='marketingRobo']");
var marketingSMS = $("input[type='hidden'][name='marketingSMS']");
var marketingEmail = $("input[type='hidden'][name='marketingEmail']");
var marketingIM = $("input[type='hidden'][name='marketingIM']");
var marketingPush = $("input[type='hidden'][name='marketingPush']");
var marketingPaperMail = $("input[type='hidden'][name='marketingPaperMail']");
marketingMAIN.on('change', function() {
if ($(this).is(":checked")) {
marketingPhone.prop('checked', true);
marketingPhone.val('TRUE');
marketingRobo.prop('checked', true);
marketingRobo.val('TRUE');
marketingSMS.prop('checked', true);
marketingSMS.val('TRUE');
marketingEmail.prop('checked', true);
marketingEmail.val('TRUE');
marketingIM.prop('checked', true);
marketingIM.val('TRUE');
marketingPush.prop('checked', true);
marketingPush.val('TRUE');
marketingPaperMail.prop('checked', true);
marketingPaperMail.val('TRUE');
} else {
marketingPhone.prop('checked', false);
marketingPhone.val('FALSE');
marketingRobo.prop('checked', false);
marketingRobo.val('FALSE');
marketingSMS.prop('checked', false);
marketingSMS.val('FALSE');
marketingEmail.prop('checked', false);
marketingEmail.val('FALSE');
marketingIM.prop('checked', false);
marketingIM.val('FALSE');
marketingPush.prop('checked', false);
marketingPush.val('FALSE');
marketingPaperMail.prop('checked', false);
marketingPaperMail.val('FALSE');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="marketingMAIN" value="" />
<input type="hidden" name="marketingPhone" value="" />
<input type="hidden" name="marketingRobo" value="" />
<input type="hidden" name="marketingSMS" value="" />
<input type="hidden" name="marketingEmail" value="" />
<input type="hidden" name="marketingIM" value="" />
<input type="hidden" name="marketingPush" value="" />
<input type="hidden" name="marketingPaperMail" value="" />
Change any of the checkboxes from type="hidden" to type="checkbox" and you can see them check and uncheck depending on what your main checkbox does.

How to make one of three inputs type button requierd required

My problem is that I have one form with some fields and three inputs type button, they all represents one message. I want to make chooseing one of three messages required. My code is bellow:
<input id="poruka1" type="button" class="hm_datumibtn poruka" name="poruka1" value="Pored mene, sve želje " >
<input id="poruka2" type="button" class="hm_datumibtn poruka" name="poruka2" value="Pored sebe, sve želje " >
<input id="poruka3" type="button" class="hm_datumibtn poruka" name="poruka3" value="Pored tebe, sve želje " >
Do you have any idea how can I solve this kind of problem?
<script>
function upis(){
//var datum = $(this).find('.datum').val();
//var poruka = $(this).find('.poruka').val();
//var poruka = $(this).attr('value');
if (poruka_forma.poruka1.value == '' && poruka_forma.poruka2.value == ''&& poruka_forma.poruka3.value == '') {
alert('You have to choose message.');
return false;
}
else {
myForm.submit();
}
var ime = document.getElementById("ime").value;
var ime_slavljenik = document.getElementById("ime_slavljenik").value;
var elementsdate = document.getElementsByClassName("selected_date");
var datum = elementsdate[0].value;
var elements = document.getElementsByClassName("selected");
var poruka = elements[0].value;
//var poruka = document.getElementById("poruka").value;
//var datum = document.getElementById("datum").value;
//var poruka = document.getElementById("poruka").value;
//var email = document.getElementById("email").value;
//var dataString = "ime="+encodeURIComponent(ime)+"&ime_slavljenik="+encodeURIComponent(ime_slavljenik);
$.ajax({
type:"post",
url: "upis.php",
cashe: false,
//data: dataString+'&datum='+datum+'&poruka='+poruka,
data: {ime:ime,ime_slavljenik:ime_slavljenik,datum:datum, poruka:poruka},
success: function(data){
//window.alert(data);
document.getElementById("placefortableanketa").innerHTML = data;
},
error: function (req, status, err) {
console.log('Something went wrong', status, err);
}
})
return false;
}
</script>
I think you might want to use <input type="radio" /> instead. Example:
<form>
<input type="radio" id="radio_btn_1" name="radio_btn" value="choice_1" required="required" checked="checked" /><label for="radio_btn_1">Choice 1</label><br />
<input type="radio" id="radio_btn_2" name="radio_btn" value="choice_2" required="required" /><label for="radio_btn_2">Choice 2</label><br />
<input type="radio" id="radio_btn_3" name="radio_btn" value="choice_3" required="required" /><label for="radio_btn_3">Choice 3</label><br />
</form>
You can add required attributes to make them required. Also, adding checked attributes will make a radio button selected by default.
You can also use <label> with for attribute. When that label is clicked, it selects a radio button that it refers to by id in its for attribute.
Edit: I saw your comment that you don't want to use radio buttons because of the design. You can actually hide the radio buttons, and just use <label> with for attributes. Example:
<style>
#radio_btn_1:checked + label{background-color:red;}
#radio_btn_2:checked + label{background-color:red;}
#radio_btn_3:checked + label{background-color:red;}
</style>
<form>
<input style="display:none;" type="radio" id="radio_btn_1" name="radio_btn" value="choice_1" required="required" checked="checked" /><label for="radio_btn_1">Choice 1</label><br />
<input style="display:none;" type="radio" id="radio_btn_2" name="radio_btn" value="choice_2" required="required" /><label for="radio_btn_2">Choice 2</label><br />
<input style="display:none;" type="radio" id="radio_btn_3" name="radio_btn" value="choice_3" required="required" /><label for="radio_btn_3">Choice 3</label><br />
</form>

Javascript: How to check if each input value is duplicated to another input value

So i have a dynamic input field came from append with different class name and names, i want to check each of input field value already exist or duplicate.
This would look like
The first criteria_name is default and the others are appendend.
<input type="text" name="criteria_name" class="criteria_name">
<input type="text" name="criteria_name2" class="criteria_name2">
<input type="text" name="criteria_name3" class="criteria_name3">
<input type="text" name="criteria_name4" class="criteria_name4">
<input type="text" name="criteria_name5" class="criteria_name5">
I am trying to check each one of those if there is no duplicated else proceed.
var critname_arr = [];
var input_check;
var crit_name_of_first = $('input.criteriaNames').val();
var acappended = append_crit_header+1;
var count_to = 0;
for(var ab = 2; ab<=acappended; ab++){
var crit_arr;
if(crit_name_of_first == $('input.criteria_each_name'+ab+'').val()){
alert("Criteria cannot be duplicate");
return false;
}else{
input_check = $('input.criteria_each_name'+ab);
input_check.each(function(){
crit_arr = $.trim($(this).val());
});
critname_arr.push(crit_arr);
}
if($('input.criteria_each_name'+ab+'').val() == critname_arr[count_to]){
alert('criteria cannot be duplicate');
return false;
}
count_to++;
}
console.log(critname_arr);
Here is just an example of how you can do it. In the fiddle change one of the values to one that is already in another field (make a duplicate value) to see it do something. If there are no duplicates, it will not do anything. Click the "Button" text to run the duplicate check:
jsFiddle: https://jsfiddle.net/o52gjj0u/
<script>
$(document).ready(function(){
$('.ter').click(function(e) {
var stored = [];
var inputs = $('.criteria_name');
$.each(inputs,function(k,v){
var getVal = $(v).val();
if(stored.indexOf(getVal) != -1)
$(v).fadeOut();
else
stored.push($(v).val());
});
});
});
</script>
<!-- Just use an array name for the input name and same class name as well -->
<div class="ter">Button</div>
<input type="text" name="criteria_name[]" class="criteria_name" value="1" />
<input type="text" name="criteria_name[]" class="criteria_name" value="2" />
<input type="text" name="criteria_name[]" class="criteria_name" value="3" />
<input type="text" name="criteria_name[]" class="criteria_name" value="4" />
<input type="text" name="criteria_name[]" class="criteria_name" value="5" />

How to multiple (a*b) two input text value and show it Dynamicly with text change in javascript?

i want to show the money that customer must pay and my inputs are like this :
<input type="text" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" class="form-control" placeholder="quantity" id="txt" name="limit">
when the input text is changing i want to show the total cost (quantity*cost) in a <p> tag Dynamicly how can it be with javascript?
You can try this:
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" onchange="calculate()">
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" onchange="calculate()">
<p id="result"></p>
And javascript part:
function calculate() {
var cost = Number(document.getElementById("credit"));
var limit = Number(document.getElementById("limit"));
document.getElementById("result").innerHTML= cost*limit;
}
You must ensure you entered numbers in inputs.
All of the above will generate errors if both the boxes are blank . Try this code , its tested and running .
<script>
function calc()
{
var credit = document.getElementById("credit").value;
var limit = document.getElementById("limit").value;
if(credit == '' && limit != '')
{
document.getElementById("cost").innerHTML = parseInt(limit);
}
else if(limit == '' && credit != '')
{
document.getElementById("cost").innerHTML = parseInt(credit);
}
else if(limit!= '' && credit!= '')
{
document.getElementById("cost").innerHTML = parseInt(limit) * parseInt(credit);
}
else
{
document.getElementById("cost").innerHTML = '';
}
}
</script>
</head>
<input type="number" value="0" min="0" class="form-control" placeholder="cost" id="credit" name="credit" onkeyup="calc();">
<input type="number" value="0" min="0" class="form-control" placeholder="quantity" id="limit" name="limit" onkeyup="calc();">
<p id="cost"></p>
Hope this will be useful
// get cost field
var _cost = document.getElementById("cost");
_cost.addEventListener('keyup',function(event){
updateCost()
})
// get quantity field
var _quantity = document.getElementById("quantity");
_quantity.addEventListener('keyup',function(event){
updateCost()
})
function updateCost(){
var _getCost = document.getElementById("cost").value;
var _getQuantity = document.getElementById("quantity").value;
var _total = _getCost*_getQuantity;
console.log(_total);
document.getElementById("updateValue").textContent = ""; // Erase previous value
document.getElementById("updateValue").textContent = _total // update with new value
}
jsfiddle
In case you consider using JQuery I've made this fiddle.
See if it works for you.
https://fiddle.jshell.net/9cpbdegt/
$(document).ready(function() {
$('#credit').keyup(function() {
recalc();
});
$('#limit').keyup(function() {
recalc();
});
function recalc() {
var credit = $("#credit").val();
var limit = $("#limit").val();
var result = credit * limit;
$("#result").text(result);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" placeholder="cost " id="credit" name="credit" value="0">x
<input type="text" class="form-control" placeholder="quantity" id="limit" name="limit" value="0">
<p id="result">0</p>
Try this:
<script >
function myFunction() {
document.getElementById('totalcost').innerHTML = document.getElementById('txt').value * document.getElementById('txt2').value;}
</script>
Also, change your HTML to this:
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="cost " id="txt" name="credit">
<input type="text" onkeypress="myFunction()" onkeyup="myFunction()" onclick="myFunction()" onmousemove="myFunction()" class="form-control" placeholder="quantity" id="txt2" name="limit">
Enter cost and quantity.
Note the change with the second input: id='txt' was changed to id='txt2'. This is because no 2 elements can have the same id.
Note: Untested.

Submit value of a checkbox through javascript

I am trying to submit values of a form through javascript it contains both text and two checkboxes.
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = $(".relocation").val();
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" class="relocation[]" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation[]" value="No" >
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
r_two.php
<?
$preffered_loc = $_POST['preffered_loc'];
$relocation = $_POST['relocation'];
?>
i am able to save the first value but i am not able to save relocation value, can anyone tell how i can save relocation. Important point here is that user can select both checkboxes also
The issue is that $relocation is picking only value yes even if i select 2nd selectbox. can anyone please correct my code
try this.
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = $("#relocation").is(":checked");
var relyn = "";
if(relocation){
relyn = "Yes";
}else{
relyn = "No";
}
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relyn },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
alert("{ preffered_loc: "+preffered_loc+",relocation: "+relyn+" }");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" id="relocation" />
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
As Satpal said:
You don't need two checkbox, maybe you want a radio button, but one checkbox can be checked = yes, not checked = no. I removed one of them.
You don't have an ID relocation. I changed it.
With the jQuery is(":checked") you get a true or false so I parse it to a Yes or No, following your code.
Since its a checkbox and not a radio user can have multiple selections, for eg:
<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="checkbox" name="relocation[]" class="relocation" value="Both" >
try using the :checked selector,
$( ".relocation:checked" ).each(function(i,v){
alert(v.value)
});
Demo here
I think you should use class for the check-boxes instead of id, because id must be unique for each field. You should try this:
<form id="myForm2" method="post" style="margin-left: -10%;">
<input type="text" class="form-control" id="preffered_loc" name="preffered_loc">
<input type="checkbox" name="relocation[]" class="relocation" value="Yes">
<input type="checkbox" name="relocation[]" class="relocation" value="No" >
<input type="button" id="submitFormData2" onclick="SubmitFormData2();" value="Submit" />
</form>
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = '';
var sap = '';
$( ".relocation" ).each(function() {
if($( this ).is(':checked')){
relocation = relocation+''+sap+''+$( this ).val();
sap = ',';
}
});
alert(rel);
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
Here is a sample code for your reference
<form id="myForm" method="post">
Name: <input name="name" id="name" type="text" /><br />
Email: <input name="email" id="email" type="text" /><br />
Phone No:<input name="phone" id="phone" type="text" /><br />
Gender: <input name="gender" type="radio" value="male">Male
<input name="gender" type="radio" value="female">Female<br />
<input type="button" id="submitFormData" onclick="SubmitFormData();" value="Submit" />
</form>
function SubmitFormData() {
var name = $("#name").val();
var email = $("#email").val();
var phone = $("#phone").val();
var gender = $("input[type=radio]:checked").val();
$.post("submit.php", { name: name, email: email, phone: phone, gender: gender },
function(data) {
$('#results').html(data);
$('#myForm')[0].reset();
});
}
You couldn't select the checkbox elements at all because you weren't including the [] in the selector. You can either escape the brackets as described in this SO Q/A or simply remove the brackets (the example code below does the latter)
I'd suggest using radio buttons as the user can immediately see what the options are. (Have a third option for both)
The code below uses checkboxes and puts all selected options into an array that gets passed along. This will allow the user to use both options
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = [];
$(".relocation:checked").each(function () {
relocation.push ($this.vak ();
}); // :checked is provided by jquery and will only select a checkbox/radio button that is checked
$.post("r_two.php", { preffered_loc: preffered_loc,relocation: relocation },
function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
And don't forget to remove [] from the checkboxes class.
<script>
function SubmitFormData2() {
var preffered_loc = $("#preffered_loc").val();
var relocation = {};
$('.relocation').each(function(index) {
if ($(this).is(':checked')) {
relocation[index] = $(this).val();
}
});
relocation = JSON.stringify(relocation);
$.post("r_two.php", { preffered_loc: preffered_loc, relocation: relocation }, function(data) {
$('#results').html(data);
$('#myForm2')[0].reset();
});
}
</script>
Variable 'relocation' must be an object to contain multiple values, like you said a user can select both YES and NO. And change the checkbox class from relocation[] to relocation.

Categories

Resources