I'm currently working on an eCommerce app where I am working with a SESSION cart. In this cart, I have two items possible to sell. If I add the first item, it adds signifies the item correctly for my records, however if the second item is the only item selected, it's value takes the place of the the assignment I have for the first value.
To give a better understanding of what I mean, here is some code:
{
foreach($_SESSION["shopping_cart"] as $keys => $values)
{
$output .= '
<div class="customer_2_item_line">
<div class="customer_2_item_line_cell"><img src="image/'.$values['product_code'].'.jpg"><span class="customer_2_line_cell_amt">'.$values['product_quantity'].'</span></div>
<div class="customer_2_item_line_cell"><p>ET Spork</p><p><span></span><span class="customer_2_line_cell_name">'.$values['product_name'].'</span<</p></div>
<div class="customer_2_item_line_cell"><p><span>$</span><span class="customer_2_line_cell_total">'.$values['product_total'].'</span></p></div>
</div>
<hr>
';
$total_price = number_format($total_price + ($values['product_quantity'] * $values['product_price']), 2);
$total_item = $total_item + $values['product_quantity'];
$total_price_shipping = number_format($total_price + $shipping_price, 2);
$qty[] = $values['product_quantity'];
}
$output .= '
<input type="text" id="subtotal_cost" name="subtotal_cost" value='.$total_price.'>
<input type="text" id="shipping_total_cost" name="shipping_total_cost" value='.$shipping_price.'>
<input type="text" id="total_cost" name="total_cost" value='.$total_price_shipping.'>
<input type="hidden" id="item_qty1" name="item_qty1" value='.$qty[0].'>
<input type="hidden" id="item_qty2" name="item_qty2" value='.$qty[1].'>
<div id="customer_2_subtotal_shipping">
<div class="customer_2_ss_line"><p>Subtotal</p><p><span>$</span><span></span></p></div>
<div class="customer_2_ss_line"><p>Shipping</p><p><span>$</span><span></span></p></div>
</div>
<hr>
<div id="customer_2_total">
<p>Total</p>
<p><span>USD</span><span><span>$</span><span></span></span></p>
</div>
';
}
I have my $qty[] array for each cart item, but it only works if both items are in the cart. I can't figure out how to organize them so that each qty has a unique value to its product during the loop so that no matter which item is being ordered, it is assigned to it's respective product name and not by the order in which it is being purchased.
The problem is that if there is no second item being added to the cart, it only reads the first value, and then my cart gets mismatched to my fixed 'name' values to 'quantity' values of whichever quantity there is to retrieve or comes first.
Any help would be greatly appreciated.
Why don't you add a key to the $qty-array?
// ...
$qty[ $key ] = $values['product_quantity'];
// ...
Related
I have a select option, I have a written function when I click a particular option it will fetch values related to that option and this particular value will be checked using the checkbox and other values will be unchecked.
I need to hide those unchecked values or else I need to keep unchecked values below the toggle button!! I am stuck right now!
<input type="checkbox" class="value" name="value[]" id="value<?=$i?>" value="<?=$brow["process"]?>" data-process-name="<?=$brow["process_name"]?>"/> <?=$brow["process_name"]?>
also, I am getting checkbox value as an array!
help me to solve this!
I added screenshot of checkbox where I get unchecked values below the checked values.
JS:
if(jsonProcessArr.length > 0){
$(".proces_name_value").each(function(){
if($.trim(this.value) != ""){
if ($.inArray(this.value, jsonProcessArr) != -1){
$(this).prop("checked",true);
}
else{
$(this).prop("checked",false);
} // here I check values from json and if there is the value inside json it will check otherwise uncheck//
after I receive checked and unchecked values together!!
mycode:
<div class="row form-group ">
<?php
$pquery = "SELECT distinct(process_name),process_nid FROM bi_process_info WHERE status=true";
$presult = mysqli_query($conn, $pquery);
$i =1;
while ($brow = mysqli_fetch_array($presult, MYSQLI_ASSOC))
{
?>
<div class="col-lg-3 col-md-3 col-sm-12 form-group">
<input type="checkbox" class="proces_name_value process_name" name="process_value[]" id="process_value<?=$i?>" value="<?=$brow["process_nid"]?>" data-process-name="<?=$brow["process_name"]?>"> <?=$brow["process_name"]?></input>
</div>
<?php
$i++;
} ?>
</div>
already i added my ajaxcall code !! so after that ajax call i added function where it hides unchecked checkbox :
function uncheck(){
$('.process_name').each(function(){
$t_this= $(this);
if($t_this.is(':checked')){
$t_this.show();
}
else
{
$t_this.parent().hide(); // this hides my element but when i click another option i hiding values but it hided values that are already hided
i dont want to do that!!
is there any way to refresh the hided elements?
}
});
}
Firstly you're getting the value back as an array because the name="value[]" contains '[]'. Drop the braces and it will return as a single value. Second, all child checkboxes that you want to hide should be in the nested html or have dedicated classes to handle this.
I would recommend the below (Note: the children could be an array if you desire)
<div>
<div>
<input type='checkbox' class='someCheckbox' name='value'>
<div class='children'>
<input type='checkbox' name='childValue1'>
<input type='checkbox' name='childValue2'>
</div>
</div>
<div>
<input type='checkbox' class='someCheckbox' name='value'>
<div class='children'>
<input type='checkbox' name='childValue3'>
<input type='checkbox' name='childValue4'>
</div>
</div>
</div>
<script>
jQuery(document).on('change','.someCheckbox',function(event){
let checkbox = jQuery(event.target);
if(checkbox.prop('checked')){
checkbox.siblings('.children').show();
}else{
checkbox.siblings('.children').hide();
}
})
</script>
I'm trying to prep forms with multiple (dynamic) inputs to insert correctly via ajax.
Currently, using my php loop, I have 4 div/forms. Each form has a starting input, and upon clicking the moreItems_add button, it dynamically adds another input, up to 10 per form/div.
This works fine. But I added a variable and console.log to log the value of my hidden input though, which should be getting an ID (<?php echo $ticker['ticker'] ?>) for each form, but it's currently only logging '1'. So when I clicked the button in the first form it looked right, but when I click the others, it's still 1. I think this is because I don't have a unique ID on the hidden input?
How can I change the way I'm keeping track of the hidden input so that I can make an ajax call that will only make an insert on the inputs of the given form WITH the correct ticker ID?
<?php foreach($tickerDisplays as $key => $ticker):?>
<form id="Items" method="post">
<label id="ItemLabel">Item 1: </label>
<input type="text" name="Items[]"><br/>
<button type="button" class="moreItems_add">+</button>
<input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
<?php endforeach;?>
<script type="text/javascript">
$("button.moreItems_add").on("click", function(e) {
var tickerID = $('#tickerID').val();
var numItems = $("input[type='text']", $(this).closest("form")).length;
if (numItems < 10) {
var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
html += '<input type="text" name="Items[]"/><br/>';
$(this).before(html);
console.log(tickerID);
}
});
</script>
To generate a unique id attribute you should append your ticker value from php to... the id attribute. Or if not the ticker value, at least something that makes it unique. But you don't really need to.
Since all your elements are wrapped in a form tag and are at the same level, you can find to which ticker corresponds the clicked button by finding the hidden input among its siblings:
var tickerID = $(this).siblings('input[name="tickerID"]').val();
I have dropdown list of items and a popup (used colorbox for opening popup) with a list of checkboxes. The popup is shown on click of '+Add/Edit'. Both the dropdown items and the checkboxes are generated in PHP from a complaint.csv file.
complaint.csv file
1,complaint type 1
2,complaint type 2
3,complaint type 3
etc...
PHP code
<label class="question-name" ng-class="{error:hasError()}">
<span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
Chief Complaint
</span>
<span class="icon-required" ng-show="question.required"></span>
</label>
<select name="Language.PrimarySpoken" ng-hide="showAddAnswer"
ng-model="question.response.value"
ng-options="a.text as a.getText() for a in question.answers.items"
id="Language.PrimarySpoken" ng-value="a.text" class="input-wide"
ng-class="{error:hasError()}">
<option class="hidden" disabled="disabled" value=""></option>
<?php
$file_handle = fopen("../complaint.csv", "r");
while (!feof($file_handle)) {
$lines_of_text[] = fgetcsv($file_handle, 1024);
}
fclose($file_handle);
foreach ( $lines_of_text as $line_of_text):
?>
<option value="<?php print $line_of_text[1]; ?>">
<?php print $line_of_text[1]; ?></option>
<?php endforeach; ?>
</select>
<br/> <br/>
<label class="question-name" ng-class="{error:hasError()}">
<span class="ng-binding" ng-hide="question.nameHiddenOnMobile">
Additional Complaint
</span>
<span class="icon-required" ng-show="question.required"></span>
</label>
<div class="form-row added ng-binding" ng-bind-html="question.getText()" id="text" ></div>
<div class="form-row addlink ng-binding"
ng-bind-html="question.getText()">
<em><a class='inline' href="#inline_content">+ Add/Edit</a></em>
</div>
<div style='display:none'>
<div id='inline_content' style='padding:25px; background:#fff; font-size: 17px;'>
<form action="" id="popup_form">
<?php
// Setup ---------------------------------------------------------------
define('numcols',4); // set the number of columns here
$csv = array_map('str_getcsv', file('../complaint.csv'));
$numcsv = count($csv);
$linespercol = floor($numcsv / numcols);
$remainder = ($numcsv % numcols);
// Setup ---------------------------------------------------------------
// The n-column table --------------------------------------------------
echo '<div class="table">'.PHP_EOL;
echo ' <div class="column">'.PHP_EOL;
$lines = 0;
$lpc = $linespercol;
if ($remainder>0) { $lpc++; $remainder--; }
foreach($csv as $item) {
$lines++;
if ($lines>$lpc) {
echo ' </div>' . PHP_EOL . '<div class="column">'.PHP_EOL;
$lines = 1;
$lpc = $linespercol;
if ($remainder>0) { $lpc++; $remainder--; }
}
echo ' <label class="checkbox" for="checkbox'.$item[0].'" style="font-size:20px;">
<input type="checkbox" name="complaint" value="'.$item[1].'" id="checkbox'.$item[0].'" data-toggle="checkbox">'
.$item[1].
'</label><br />';
}
echo ' </div>'.PHP_EOL;
echo '</div>'.PHP_EOL;
// The n-column table --------------------------------------------------
?>
<br/>
<input type="submit" name="submit" id="update"
class="button button-orange"
style="width: 90px; margin-top: 450px; margin-left:-1062px;"
value="Update">
<input type="submit" name="cancel" id="cancel"
class="button button-orange"
style="width: 90px; background-color:#36606e;"
value="Cancel">
</form>
</div>
</div>
Question:
If a Main complaint item is select then that same complaint does not appear in Additional Complaint list (i.e. if 'complaint type 1' is selected for Main complaint, 'complaint type 1' does not display on Additional Complaint list)
How should I get that using one complaint.csv file like checking for the selected item, and avoid it when displaying the list e.g on select 'complaint type 1', the data from complaint.csv file will be display on popup checkbox list except 'complaint type 1' which is selected?
There is empty space generating if we remove the element. I don't want the empty space of removed item in checkbox list. Empty space means if 'complaint type 2' is removed then there empty space creates between 'complaint type 1' and 'complaint type 3'.
Is there any way to have AJAX for this situation like when the item is selected AJAX will call and it will remove the item from the checkbox list which is selected and then load the new items list except the selected one. (right now both list are loading at a same time on page load insted of that using AJAX the dropdown list should load on page load and checkbox list on click '+Add/Edit' button avoiding selected item.) Thus might be the empty space will not be there.
How this should be done using AJAX?
OR
Can anyone please suggest any solution with PHP or JS to get both requirements?
In your code, make sure the select dropdown value is $line_of_text[0] e.g. 1, 2, 3 etc.
Now add onChange="hideSpaceAndComplain(this.value)" on the select element.
Copy the following javascript function as is
function hideSpaceAndComplain(id){
//Hide selected one
$("#popup_form").find('label').show();
//Hide selected one
$('input[value=' + id + ']').parents('label').hide();
//Now rearrange all the visible label in columns
var visibleLabels = $("#popup_form").find('label:visible');
visibleLabels.each(function(i,v){
var column = Math.floor(i/4); // 4 being the number of column
$(this).appendTo($("#popup_form").find('.column:eq('+column+')'));
});
}
This is doing both hiding the element which is selected and then re arranging the labels in column to remove one extra space.
Since the logic you describe depends on what the user does in the browser, what you functionality does must be done in the browser, that means in Javascript.
According to the tags of the question you are using JQuery, so here are some pointers on how to do it with JQuery. First you have to attach an event handler to the dropdown to know when the user changes its value:
$('select').on('change', function() {
//Put here what to do when the value of the dropdown changes.
}
In that function, you want to do two things:
Un-hide the complaint that you may have hidden previously
Hide the main complaint
To do so, write something like this in the event handler:
//Un-hide everything
$('label').show();
//Hide selected one
$('input[value=' + $(this).val() + ']').parent().hide();
You can see a working example in this JSFiddle.
Hope this helps.
Note that I see in your code that you uses Angular, so you may want to use this instead. But I am not sure why you generate the select options both with Angular and PHP, so I am assuming this is some copy-pasted code that you are not using.
Right now my code is very "hard-coded" and repetitive. I'd like to know if there is a cleaner way to do the following. Ideally, I want to iterate through my forms fields with a loop and calculate the results with one statement, but I'm struggling to figure out how best to do so.
Summary: I have ten form fields, each with a distinct decimal value that a user may or may not supply. When the user hits submit, it should add the value in the input field with a value being displayed on the current HTML page, then insert into the DB.
First, I grab that value from the form input field and convert it into a number with two decimal places. I then grab the current total from the HTML and add the two numbers together. After that I inject that total back into the form input field so that it can be stored in $_POST and inserted into a database.
How can I make my code more DRY (ie, Don't Repeat Yourself)? Below are just two examples but they are exactly the same except for the element calls:
var subtotal = Number($("#housing").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-housing').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#housing').val(total);
var subtotal = Number($("#utilities").val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-utilities').html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#utilities').val(total);
I would like to iterate through my input fields like so, but I'm trying to figure out how I could display the logic inside:
var input = $('.form-expenses :input');
input.each(function() {
// Insert switch statement here?? Some other construct??
});
HTML: (Uses Bootstrap 3 classes)
FORM:
<form class="form-expenses form-horizontal" role="form" method="post" action="/profile/update">
<div class="form-group">
<label for="housing" class="control-label col-sm-3">Housing</label>
<div class="input-group input-group-lg col-sm-9">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="housing" id="housing" />
</div>
</div>
<div class="form-group">
<label for="utilities" class="control-label col-sm-3">Utilities</label>
<div class="input-group input-group-lg col-sm-9">
<span class="input-group-addon">$</span>
<input type="text" class="form-control" name="utilities" id="utilities" />
</div>
</div>
...
<button class="btn btn-lg btn-primary btn-block" id="update-expenses" type="submit"> Update</button>
</form>
OUTPUT:
<tr>
<td>Housing</td>
<td id="output-housing">$<?php echo $total['housing']?></td>
</tr>
<tr>
<td>Utilities</td>
<td id="output-utilities">$<?php echo $total['utilities']?></td>
</tr>
Something like this should work. Assumes the same prefixing relationship of output/input ID's
$(function() {
$('form.form-expenses').submit(function() {
updateValues();
return false/* prevent submit for demo only*/
})
})
function updateValues(){
$('.form-expenses :input').not('#update-expenses').each(function(){
var $input=$(this), inputId=this.id;
var curr=$('#output-'+inputId).text().replace("$", "");
$input.val(function(i,val){
return (1*(val ||0) + 1*curr).toFixed(2);
})
});
}
DEMO
From a UI perspective, this seems very counter intuitive to change values that user just input.
To create ajax data object instead of updating the display values:
function getAjaxData(){
var ajaxData={}
$('.form-expenses :input').not('#update-expenses').each(function(){
var $input=$(this), inputId=this.id;
var curr=$('#output-'+inputId).text().replace("$", "");
ajaxData[this.name] =(1*(val ||0) + 1*curr).toFixed(2);
});
return ajaxData
}
/* in submit handler*/
$.post('path/to/server', getAjaxData(), function(response){/*do something with reponse*/})
"if I allow a user to add/remove fields, then this could get a bit sticky"
In that case, give your fields a class name. As long as that exists on added fields, they will all be calculated.
<input type="text" class="form-control calculate-me" name="housing" id="housing" />
And iterate though all, using their ids as a reference
$(".calculate-me").each(function(){
var ref=this.id;
var subtotal = Number($("#" + ref).val());
subtotal = (subtotal).toFixed(2);
var currentTotal = $('#output-' + ref).html().replace("$", "");
var total = Number(subtotal) + Number(currentTotal);
$('#' + ref).val(total);
});
Update
Tidied up the solution in progress and added some extra details
I have a form area which creates clones based on a template. In order to make sure the form transmits in an order, the script goes through the form at send time appending a number which defines the current batch set. Below is an over simplified representation of what is going on:
<form>
<div class="batch-template">
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
</div>
<div class="batch-paste-area">
</div>
</form>
When the page starts:
The contents of "batch-template" are stored to an object variable
The original template is removed from the page
An instance of the template is appended to the "batch-paste-area"
The following is an example of the output created after clicking twice.
<form>
<div class="batch-template">
</div>
<div class="batch-paste-area">
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
<div class="batch-piece">
<a class="clone" />
<input name="test-input">
<input name="another-test-input">
<select name="a-drop-down">
</div>
</div>
</form>
When it comes to submitting the form: prior to serialization, I would like the script to loop through each "batch-piece" within "batch-paste-area" and add a count value to the end of each form field name. Continuing with the set above, the result (to a browser) would seem like that shown below:
<form>
<div class="batch-template">
</div>
<div class="batch-paste-area">
<div class="batch-piece">
<a class="clone" />
<input name="test-input1">
<input name="another-test-input1">
<select name="a-drop-down1">
</div>
<div class="batch-piece">
<a class="clone" />
<input name="test-input2">
<input name="another-test-input2">
<select name="a-drop-down2">
</div>
</div>
</form>
So far, I can either loop through EVERY input within the paste area or just select the last.
Selecting the last batch-piece is simple:
var intCount = 1;
$('.batch-paste-area .batch-piece').each(function(){
/*
* Would like to be able to loop through form fields here
* Below is an attempt to select all form fields for current set
*/
$(this + ' input, '+ this + ' select').each(function() {
var strName = $(this).attr('name') + intCount;
$(this).attr('name', strName);
});
intCount++;
});
Frustratingly, I had actually tried the correct solution in advance but had forgotten to use the comma at the time!
var intCount = 1;
$('.batch-paste-area .batch-piece').each(function(){
/*
* Would like to be able to loop through form fields here
* Below is an attempt to select all form fields for current set
*/
$(this).find("input, select").each(function() {
var strName = $(this).attr('name') + intCount;
$(this).attr('name', strName);
});
intCount++;
});