Sums not working with adding and removing Dynamic Fields - php

I have a script that calls to a Database to get Autocomplete data.
Once the specific Autocomplete data (Item Name) has been chosen a few other fields are populated, namely: Item Code, Price & Quantity.
When the quantity is changed the Lines Total field changes to "Quantity * Price" total.
There is the option to carry on adding rows Dynamically and autocomplete each in the same fashion ... there is a Grand Total that adds each line total together.
My issues are that the grand total only changes when the Quantity is changed, it should load on the focus of Price in each line - also, removing a line does not remove that spcific Line Totals ammount from the Grand Total and if you change the very first lines quantity (only the first line is affected) it re-sets the Grand total to anything that line has now added up to ... Please can someone look at my code.
The live version is at
http://cardoso.co.za/form/
You can also get the files there too if you browse to
http://cardoso.co.za/form/form.zip
Any and all help is greatly appreciated!!!
Edit here's some code from the entire script:
var $itemsTable = $('#itemsTable');
var rowTemp = [
'<tr class="item-row">',
'<td><a id="deleteRow"><img src="images/icon-minus.png" alt="Remove Item" title="Remove Item"></a></td>',
'<td><input name="itemType" class="itemType" id="itemType" tabindex="1" style="width:350px;"/></td>',
'<td align="center"><input name="itemCode" class="itemCode" id="itemCode" readonly="readonly" style="width:60px;" tabindex="-1"/></td>',
'<td align="center"><input name="itemQty" class="itemQty" id="itemQty" tabindex="2" style="width:40px;" maxlength="4" value=""/></td>',
'<td width="14%" align="center"><input name="itemPrice" class="itemPrice" id="itemPrice" readonly tabindex="-1"/></td>',
'<td width="17%" align="right"><input name="itemTotal" class="itemTotal" id="itemTotal" readonly tabindex="-1"/></td>',
'</tr>'
].join('');
$('#addRow').bind('click',function(){
var $row = $(rowTemp);
var $itemType = $row.find('#itemType');
var $itemCode = $row.find('.itemCode');
var $itemPrice = $row.find('.itemPrice');
var $itemQty = $row.find('.itemQty');
var $itemTotal = $row.find('.itemTotal');
if ( $('#itemType:last').val() !== '' ) {
$row.find('#itemType').autocomplete({
source: 'item-data.php',
minLength: 1,
select: function(event, ui) {
$itemType.val(ui.item.itemType);
$itemCode.val(ui.item.itemCode);
$itemPrice.val(ui.item.itemPrice);
$itemTotal.focus().val(ui.item.itemPrice);
$itemQty.focus().val(1);
$itemQty.keyup(function() {
var Quantity = $itemQty.val();
var Prices = $itemPrice.val();
var ItemsTotal = Quantity * Prices;
$itemTotal.val(ItemsTotal.toFixed(2));
var Tsum = 0;
$('.itemTotal').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
$('#toTally').val(Tsum.toFixed(2))
}
});
});
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a>" + item.itemType + "</a>" )
.appendTo( ul );
};
$('.item-row:last', $itemsTable).after($row);
$('#minusRow').show();
$('#resetTable').show();
$($itemType).focus();
}
return false;
});
I have implemented the Array, Will post this instead soon, once I get it to work with ID's and Classes without jamming.

I solved the issue by doing the following :
( function($) {
var pounter = 1;
$(document).ready(function(){
var qounter = 1;
var trounter = 1;
//Count each instance and add number to Name
$row.find('._ext_price_total_html').each(function() {
$(this).attr({
'name': function(_, name) {
return name + pounter },
});
pounter++;
})
$row.find('.quantitys').each(function() {
$(this).attr({
'name': function(_, name) {
return name + qounter },
});
qounter++;
})
$('#quantity', function(){
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
})
$('#quantity').change(function(){
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
})
$('#quantity').keyup(function(){
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
})
//adjust/subtract from total when removeing row
$('#deleteRow').live('click',function(){
var delAsk = confirm('Remove this item?');
if (delAsk)
{
$(this).parents('.jshop_prod_cart').remove();
var Tsum = 0;
$('[id^="_ext_price_total_html"]').each(function() {
if(!isNaN(this.value) && this.value.length!=0) {
Tsum += parseFloat(this.value);
}
$('.toTally').val(Tsum.toFixed(2))
})
}
else
{
('cancel');
}
});

Related

Autocomplete Box Only Shows First Letter

I am trying to make a text box that when you type in it, it pulls up suggestions underneath that come from a recordset. For some reason when you type in the field, I only get the first letter. It think it has to do with the json_encode part. When I changed the array to be just text: "Brainpop","Google", etc. it worked fine. Any thoughts? This is the coding I based it off of:
https://www.w3schools.com/howto/howto_js_autocomplete.asp
<script type="application/javascript">
function autocomplete(inp, arr) {
/*the autocomplete function takes two arguments,
the text field element and an array of possible autocompleted values:*/
var currentFocus;
/*execute a function when someone writes in the text field:*/
inp.addEventListener("input", function(e) {
var a, b, i, val = this.value;
/*close any already open lists of autocompleted values*/
closeAllLists();
if (!val) { return false;}
currentFocus = -1;
/*create a DIV element that will contain the items (values):*/
a = document.createElement("DIV");
a.setAttribute("id", this.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
/*append the DIV element as a child of the autocomplete container:*/
this.parentNode.appendChild(a);
/*for each item in the array...*/
for (i = 0; i < arr.length; i++) {
/*check if the item starts with the same letters as the text field value:*/
if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
b.innerHTML = "<strong>" + arr[i].substr(0, val.length) + "</strong>";
b.innerHTML += arr[i].substr(val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}
}
});
/*execute a function presses a key on the keyboard:*/
inp.addEventListener("keydown", function(e) {
var x = document.getElementById(this.id + "autocomplete-list");
if (x) x = x.getElementsByTagName("div");
if (e.keyCode == 40) {
/*If the arrow DOWN key is pressed,
increase the currentFocus variable:*/
currentFocus++;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 38) { //up
/*If the arrow UP key is pressed,
decrease the currentFocus variable:*/
currentFocus--;
/*and and make the current item more visible:*/
addActive(x);
} else if (e.keyCode == 13) {
/*If the ENTER key is pressed, prevent the form from being submitted,*/
e.preventDefault();
if (currentFocus > -1) {
/*and simulate a click on the "active" item:*/
if (x) x[currentFocus].click();
}
}
});
function addActive(x) {
/*a function to classify an item as "active":*/
if (!x) return false;
/*start by removing the "active" class on all items:*/
removeActive(x);
if (currentFocus >= x.length) currentFocus = 0;
if (currentFocus < 0) currentFocus = (x.length - 1);
/*add class "autocomplete-active":*/
x[currentFocus].classList.add("autocomplete-active");
}
function removeActive(x) {
/*a function to remove the "active" class from all autocomplete items:*/
for (var i = 0; i < x.length; i++) {
x[i].classList.remove("autocomplete-active");
}
}
function closeAllLists(elmnt) {
/*close all autocomplete lists in the document,
except the one passed as an argument:*/
var x = document.getElementsByClassName("autocomplete-items");
for (var i = 0; i < x.length; i++) {
if (elmnt != x[i] && elmnt != inp) {
x[i].parentNode.removeChild(x[i]);
}
}
}
/*execute a function when someone clicks in the document:*/
document.addEventListener("click", function (e) {
closeAllLists(e.target);
});
}</script>
<script>
//now put it into the javascript
var software_list = <?php echo json_encode($types2, JSON_UNESCAPED_SLASHES), "\n"; ?>;
</script>
<?php
$query1 = "SELECT software_name from software";
$result = mysqli_query($sdpc_i, $query1);
$types = array();
while ($row = $result->fetch_assoc()) {
$types[] = '"'.$row['software_name'].'"';
}
$types2 = implode(",",$types);
?>
<div class="autocomplete"><input type="text" name="software_name" id="myInput" class="form-control col-md-8" value="" required></div><script>
autocomplete(document.getElementById("myInput"), software_list);
</script>
</div>

Get drop down list options based on selected checkbox value

I have the following codes that generate checkboxes from database
< table class="table">
< thead>
< /thead>
< th>
<?php
$oaNamesQuery = "SELECT DISTINCT oaName FROM oaDetails";
$oaNamesQueryExecute = mysqli_query($conn, $oaNamesQuery);
while($oaNamesQueryRow = mysqli_fetch_array($oaNamesQueryExecute)){
$oaName = $oaNamesQueryRow['oaName'];
echo '<div class = "checkbox-group" required style="float:left; margin-right: 25px;"> <input class="checkBoxes" type="checkbox" id="checkBoxArray" name="checkBoxArray[]" value="'.$oaName.'"> '.$oaName.'</div>';
}
?>
< /th>
< /table>
There is another input box as below whereby input type is number
<div class="col-sm">
<label for="numberOfShiftPerDay">Number</label>
<input type="number" class="form-control" id="numberOfShiftPerDay" name="numberOfShiftPerDay" placeholder="No: " onchange="disablingRoutine()" min="1" max="4">
</div>
Example UI as below
When I enter some number, there will be a drop down menu appear according to the number I entered. Eg: If keyed in 1, there will be one drop down list will appear as below using jQuery 'OnChange'. The UI will be as below
What I Need
I need the drop down menu options to be based on user selected checkboxes. Eg: If the user selected checkboxes X, Y and XX, then these drop down list should show X, Y and XX. Can someone help me how to do this?
Edit 1
Added Javascript function on the change routine as suggested by stackoverflow member. But now having duplicate issues. Below the code that I changed
if ($("#numberOfShiftPerDay").val() == 1) {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift1').append('<option>' + cval + '</option>')
});
} else if ($("#numberOfShiftPerDay").val() == 2) {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift2').append('<option>' + cval + '</option>')
});
} else if ($("#numberOfShiftPerDay").val() == 3) {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift3').append('<option>' + cval + '</option>')
});
} else {
$.each($("input[name='checkBoxArray[]']:checked"), function() {
cval = $(this).val();
$('#oaInShift4').append('<option>' + cval + '</option>')
});
}
You can get the selected checkbox values and append to your dropdown list in your onchange function.
Try this:
function disablingRoutine()
{
$.each($("input[name='checkBoxArray[]']:checked"), function(){
cval = $(this).val();
$('#dropdownID').append('<option>'+cval+'</option>')
});
}
Edit 2
function disablingRoutine()
{
cdata = '';
$.each($("input[name='checkBoxArray[]']:checked"), function(){
cval = $(this).val();
cdata += '<option>'+cval+'</option>';
});
$('#dropdownID').html(cdata)
}

How can use coupon code to minus value from total price

This is my html part where I use coupon input
IF need more code I'll provide
Enter Coupon Code
<input type="text" class="form" name="couponadd" id="couponadd" placeholder="Enter Your Coupon Code" oninput="myFunction()" style="width: -moz-available;" />
Oninput I am getting the coupon code in script
<script>
function myFunction() {
var getcoupon = document.getElementById("couponadd").value;
var aftercoupn=0;
if coupon code is gold then less 15 from total
if(getcoupon == 'gold')
{
var aftercoupn = 15;
document.getElementById("aftercoupan").innerHTML = '- $' + aftercoupn;
alert('minus 15 dollers');
}
if coupon code is silver then less 10 from total
else if(getcoupon == 'silver')
{
var aftercoupn = 10;
document.getElementById("aftercoupan").innerHTML = '- $' + aftercoupn;
alert('minus 10 dollers');
}
else
{
}
}
</script>
Iam getting price from php code loop
echo "<ul id='sub'>";
if($Seats == null){
echo '<li class="BlankSeat" ></li>';
}
elseif($ticketType=='PINK' && $ticketType == $_GET['type']){
echo '<li class="pink" id="pink" data-price="100" title="Row'.$Seats.'" name="'.$RowName.'" value="'.$Seats.'"></li>';
}
else{
echo '<li class="orange" id="orange" data-price="200" title="Row'.$Seats.'" name="'.$RowName.'" value="'.$Seats.'"></li>';
}
}
echo "</ul>";
script code from get price on click of li
var total =0;
var counter = 0;
var price=0;
$('li').click(function(e) {
var price = $(this).attr('data-price');
if click something
{
counter++;
}else
{
counter --;
}
how can i use coupon code value here in total
var total = parseFloat(price * counter);
document.getElementById('demoPrice').innerHTML = '$' + total;
}
});
Update aftercoupn variable on text input, then use it on li's on click like
var total = 0;
var counter = 0;
var price = 0;
var aftercoupn = 0;
$('li').click(function(e) {
$('li').removeClass('active');
$(this).addClass('active');
var price = $(this).attr('data-price');
if (price) { // I'm not sure with the counter variable here
counter++;
} else {
counter--;
}
var total = parseFloat(price * counter);
$('#demoPrice').text('$' + (total-parseInt(aftercoupn)));
});
function myFunction() {
var getcoupon = $("#couponadd").val(),
txt='Invaild Coupon';
if (getcoupon == 'gold') {
aftercoupn = 15;
txt = '- $' + aftercoupn;
console.log('minus 15 dollers');
counter=0;
} else if (getcoupon == 'silver') {
aftercoupn = 10;
txt = '- $' + aftercoupn;
console.log('minus 10 dollers');
counter=0;
}
$('li.active').length && $('li.active').trigger('click');
$("#aftercoupan").text(txt);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form" name="couponadd" id="couponadd" placeholder="Enter Your Coupon Code" oninput="myFunction()" style="width: -moz-available;" />
<div id="aftercoupan"></div>
<ul id='sub'>
<li class="BlankSeat" data-price="0">Blank</li>
<li class="pink" id="pink" data-price="100" title="Row10" name="pink" value="10">Pink</li>
<li class="orange" id="orange" data-price="200" title="Row20" name="orange" value="20">Orange</li>
</ul>
<div id="demoPrice"></div>
I assume you're using price as a global variable. Then on click of li you should be updating that variable. So, you'll be able to have the price set on li click from other places ( I think that is what you're trying to achieve).
var total = 0, price, counter = 0;
$('li').click(function(e) {
price = parseFloat($(this).attr('data-price'));
// Do your other stuffs if you want
});
Then at other places you can get this price set after li click.
total = price * counter;
document.getElementById('demoPrice').innerHTML = '$' + total;
The whole thing is written in an assumption of your need. Correct me if I've thought it wrong or misunderstood somewhere

How to submit an iframe sub-form within main form using jQuery/AJAX?

I am using a jQuery plugin called Stepy, which is based of the FormToWizard plugin, to allow users to complete a 10-step form.
Using the next/back attributes, I've added a function to post data between steps so the user can save their work and come back at a later day if they'd like.
One of my steps allows the user to add items to a form within an iframe (to post data to a separate table). I'd like it to function so that when the user moves between steps, the items in the iframe post to their separate table as well. Is there a way to submit the form within the iframe between steps (i.e. submit iframe sub-form when main form submits)?
I am using PHP and MySQL.
Any help you could provide would be amazing!
Javascript:
$(function() {
$('#custom').stepy({
backLabel: 'Back',
block: true,
errorImage: true,
nextLabel: 'Next',
titleClick: true,
validate: false,
legend: false,
back: function(index) {
$.post('../../process.php')
}
next: function(index) {
$.post('../../process.php')
}
});
});
HTML:
<html>
<body>
<form id="custom" name="custom">
<fieldset title="Thread 1">
<legend>description one</legend>
<label>Question A:</label>
<input type="text" id="question_a" name="question_a" class="required">
<label>Question B:</label>
<input type="text" id="question_b" name="question_b">
</fieldset>
<fieldset title="Thread 2">
<legend>description two</legend>
<iframe src="../../list_form.php" width="100%" height="300"></iframe>
</fieldset>
<fieldset title="Thread 3">
<legend>description three</legend>
<label>Question C:</label>
<input type="text" id="question_c" name="question_c" class="required">
</fieldset>
<input type="submit" class="finish" value="Finish!">
</form>
</body>
</html>
iframe
<html>
<body>
<form id="sub_form" name="sub_form">
<label>Question 1:</label>
<input type="text" id="question_1" name="question_1">
<label>Question 2:</label>
<input type="text" id="question_2" name="question_2">
</form>
</body>
</html>
stepy.js
;(function($) {
var methods = {
init: function(options) {
return this.each(function() {
var opt = $.extend({}, $.fn.stepy.defaults, options),
$this = $(this).data('options', opt),
id = $this.attr('id');
if (id === undefined) {
id = 'stepy-' + $this.index();
$this.attr('id', id);
}
var $titlesWrapper = $('<ul/>', { id: id + '-titles', 'class': 'stepy-titles' });
if (opt.titleTarget) {
$(opt.titleTarget).html($titlesWrapper);
} else {
$titlesWrapper.insertBefore($this);
}
if (opt.validate) {
$this.append('<div class="stepy-error"/>');
}
var $steps = $this.children('fieldset'),
$step = undefined,
$legend = undefined,
description = '',
title = '';
$steps.each(function(index) {
$step = $(this);
$step
.addClass('step')
.attr('id', id + '-step-' + index)
.append('<p id="' + id + '-buttons-' + index + '" class="' + id + '-buttons"/>');
$legend = $step.children('legend');
if (!opt.legend) {
$legend.hide();
}
description = '';
if (opt.description) {
if ($legend.length) {
description = '<span>' + $legend.html() + '</span>';
} else {
$.error(id + ': the legend element of the step ' + (index + 1) + ' is required to set the description!');
}
}
title = $step.attr('title');
title = (title != '') ? '<div>' + title + '</div>': '--';
$titlesWrapper.append('<li id="' + id + '-title-' + index + '">' + title + description + '</li>');
if (index == 0) {
if ($steps.length > 1) {
methods.createNextButton.call($this, index);
}
} else {
methods.createBackButton.call($this, index);
$step.hide();
if (index < $steps.length - 1) {
methods.createNextButton.call($this, index);
}
}
});
var $titles = $titlesWrapper.children();
$titles.first().addClass('current-step');
var $finish = $this.children('.finish');
if (opt.finishButton) {
if ($finish.length) {
var isForm = $this.is('form'),
onSubmit = undefined;
if (opt.finish && isForm) {
onSubmit = $this.attr('onsubmit');
$this.attr('onsubmit', 'return false;');
}
$finish.click(function(evt) {
if (opt.finish && !methods.execute.call($this, opt.finish, $steps.length - 1)) {
evt.preventDefault();
} else {
if (isForm) {
if (onSubmit) {
$this.attr('onsubmit', onSubmit);
} else {
$this.removeAttr('onsubmit');
}
var isSubmit = $finish.attr('type') == 'submit';
if (!isSubmit && (!opt.validate || methods.validate.call($this, $steps.length - 1))) {
$this.submit();
}
}
}
});
$finish.appendTo($this.find('p:last'));
} else {
$.error(id + ': element with class name "finish" missing!');
}
}
if (opt.titleClick) {
$titles.click(function() {
var array = $titles.filter('.current-step').attr('id').split('-'), // TODO: try keep the number in an attribute.
current = parseInt(array[array.length - 1], 10),
clicked = $(this).index();
if (clicked > current) {
if (opt.next && !methods.execute.call($this, opt.next, clicked)) {
return false;
}
} else if (clicked < current) {
if (opt.back && !methods.execute.call($this, opt.back, clicked)) {
return false;
}
}
if (clicked != current) {
methods.step.call($this, (clicked) + 1);
}
});
} else {
$titles.css('cursor', 'default');
}
$steps.delegate('input[type="text"], input[type="password"]', 'keypress', function(evt) {
var key = (evt.keyCode ? evt.keyCode : evt.which);
if (key == 13) {
evt.preventDefault();
var $buttons = $(this).parent().children('.' + id + '-buttons');
if ($buttons.length) {
var $next = $buttons.children('.button right-aligned');
if ($next.length) {
$next.click();
} else {
var $finish = $buttons.children('.finish');
if ($finish.length) {
$finish.click();
}
}
}
}
});
$steps.first().find(':input:visible:enabled').first().select().focus();
});
}, createBackButton: function(index) {
var $this = this,
id = this.attr('id'),
opt = this.data('options');
$('<a/>', { id: id + '-back-' + index, href: 'javascript:void(0);', 'class': 'button left-aligned', html: opt.backLabel }).click(function() {
if (!opt.back || methods.execute.call($this, opt.back, index - 1)) {
methods.step.call($this, (index - 1) + 1);
}
}).appendTo($('#' + id + '-buttons-' + index));
}, createNextButton: function(index) {
var $this = this,
id = this.attr('id'),
opt = this.data('options');
$('<a/>', { id: id + '-next-' + index, href: 'javascript:void(0);', 'class': 'button right-aligned', html: opt.nextLabel }).click(function() {
if (!opt.next || methods.execute.call($this, opt.next, index + 1)) {
methods.step.call($this, (index + 1) + 1);
}
}).appendTo($('#' + id + '-buttons-' + index));
}, execute: function(callback, index) {
var isValid = callback.call(this, index + 1);
return isValid || isValid === undefined;
}, step: function(index) {
index--;
var $steps = this.children('fieldset');
if (index > $steps.length - 1) {
index = $steps.length - 1;
}
var opt = this.data('options');
max = index;
if (opt.validate) {
var isValid = true;
for (var i = 0; i < index; i++) {
isValid &= methods.validate.call(this, i);
if (opt.block && !isValid) {
max = i;
break;
}
}
}
$steps.hide().eq(max).show();
var $titles = $('#' + this.attr('id') + '-titles').children();
$titles.removeClass('current-step').eq(max).addClass('current-step');
if (this.is('form')) {
var $fields = undefined;
if (max == index) {
$fields = $steps.eq(max).find(':input:enabled:visible');
} else {
$fields = $steps.eq(max).find('.error').select().focus();
}
$fields.first().select().focus();
}
if (opt.select) {
opt.select.call(this, max + 1);
}
return this;
}, validate: function(index) {
if (!this.is('form')) {
return true;
}
var $step = this.children('fieldset').eq(index),
isValid = true,
$title = $('#' + this.attr('id') + '-titles').children().eq(index),
opt = this.data('options'),
$this = this;
$($step.find(':input:enabled').get().reverse()).each(function() {
var fieldIsValid = $this.validate().element($(this));
if (fieldIsValid === undefined) {
fieldIsValid = true;
}
isValid &= fieldIsValid;
if (isValid) {
if (opt.errorImage) {
$title.removeClass('error-image');
}
} else {
if (opt.errorImage) {
$title.addClass('error-image');
}
$this.validate().focusInvalid();
}
});
return isValid;
}
};
$.fn.stepy = function(method) {
if (methods[method]) {
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
} else if (typeof method === 'object' || !method) {
return methods.init.apply(this, arguments);
} else {
$.error('Method ' + method + ' does not exist!');
}
};
$.fn.stepy.defaults = {
back: undefined,
backLabel: '< Back',
block: false,
description: true,
errorImage: false,
finish: undefined,
finishButton: true,
legend: true,
next: undefined,
nextLabel: 'Next >',
titleClick: false,
titleTarget: undefined,
validate: false,
select: undefined
};
})(jQuery);
If you want to append Text\HTML or any other data to your iframe (which calling to a page on the same domain!) you may use:
jQuery("#iframe_id").contents().find('body').append('<div>Hello World</div>');
Full Example:
Full Example
If your iframe is on another domain you will have to use window.postMessage, which you may read about on Mozilla's docs:
Mozilla's docs
OR to take a look about my blog post about this subject.
Hope I helped,

Form Inputs updated via JS don't get submitted

The invoice input values which hold the totals of invoice line items that get updated via JS return a NULL value when they are submitted.
<span class="sublabel">Subtotal</span><input type="text" class="total-box" id="product-subtotal" readonly="true" />
<span class="sublabel">Tax</span><input type="text" class="total-box" id="product-tax" readonly="true" />
<span class="sublabel">Total</span><input type="text" class="total-box" id="order-total" readonly="true" />
The JS
function calcProdSubTotal() {
var prodSubTotal = 0;
$(".row-total-input").each(function(){
var valString = $(this).val() || 0;
prodSubTotal += parseInt(valString);
});
$("#product-subtotal").val(prodSubTotal);
};
function calcTaxTotal() {
var taxTotal = 0;
//var taxAmount = 10;
var taxAmount = $("#salesTaxAmount").val() || 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var taxTotal = parseInt(productSubtotal) * parseInt(taxAmount) / 100;
var taxTotalNice = taxTotal;
$("#product-tax").val(taxTotalNice);
};
function calcOrderTotal() {
var orderTotal = 0;
var productSubtotal = $("#product-subtotal").val() || 0;
var productTax = $("#product-tax").val() || 0;
var orderTotal = parseInt(productSubtotal) + parseInt(productTax);
var orderTotalNice = "$" + orderTotal;
$("#order-total").val(orderTotalNice);
};
$(function(){
$('.row-total-input').each(
function( intIndex ){
$('.invAmount').livequery('blur', function() {
var $this = $(this);
var amount = $this.val();
var qty = $this.parent().find('.invQty').val();
if ( (IsNumeric(amount)) && (amount != '') ) {
var rowTotal = qty * amount;
$this.css("background-color", "white").parent().find(".row-total-input").val(rowTotal);
} else {
$this.css("background-color", "#ffdcdc");
};
calcProdSubTotal();
calcTaxTotal()
calcOrderTotal();
});
}
);
});
I originally had the inputs set as disabled however I have changed them to readonly because disabled fields can't be submitted.
What am i missing?
Thanks in advance.
You haven't set a name-attribute on your <input />s, so PHP can't access their values, and returns nothing when you look for $_POST['product-tax']. If you have set error_reporting to E_ALL, you should see a notice telling you you are trying to access an undefined index on the $_POST array.

Categories