onchange calculations for dynamic form inputs using PHP and jQuery - javascript

The scenario:
I'm allowing a user to select a number of pizzas, they then go to a page where they can choose different options for each pizza. The idea is that as they change an option for a pizza the results are shown in a results div for that pizza with the price. If the user has chosen 3 pizzas there will be lots of options with three divs to show the results for each, and a grand total div.
I have successfully looped through and created the option boxes, but I am struggling to see the best way to get the selections of the dynamic form values so I can do calculations and run some ajax to populate the result divs.
This is the generated forms(though they could probably all go into one form)
<?php
$boxNum = 0; ///to append to form input id names
///start loop
foreach(loops through array){///start loop
$theid = ///this successfully assigns the id
$pizzaname = /// this successfully assigns the pizza name
?>
<div id="pizza_option_<?php echo $boxNum; ?>" >
<form action="" method="post">
<input name="theid_<?php echo $boxNum; ?>" id="theid_<?php echo $boxNum; ?>" type="text" value="<?php echo $theid; ?>" class="bk" >
<input name=" pizzaname _<?php echo $boxNum; ?>" id=" pizzaname _<?php echo $boxNum; ?>" type="text" value="<?php echo $pizzaname?>" class="bk">
<select name="sizes_<?php echo $boxNum; ?>" id="sizes_<?php echo $boxNum; ?>" class="bk">
<?php avaliable_sizes($id); ///fuction to get available sizes ?>
</select>
<select name="topping_<?php echo $boxNum; ?>" id="topping_<?php echo $boxNum; ?>" class="bk">
<?php avaliable_toppings($id); ///fuction to get available toppings ?>
</select>
</form>
</div>
<?php $boxNum ++; } // end of loop ?>
<div id="pizza_results_<?php echo $boxNum; ?>" >
Display selection choices and cost for pizza
</div>
<div id="grand_total_for_pizzas" >
Display total of all pizzas
</div>
I have found it difficult to find resources that, a cover both dynamic form input values and event trigger when a form input has been changed.
You will see from my pseudo code that I have appended a unique id to the input ID as this I am thinking this can be used to identify a set of pizza inputs.
If anyone can point me in the right direction I would be grateful. I only require guidance on identifying when there is a change on one of the values for a pizza, not on any calculations or anything else.

Ok, after a little more digging around I found a solution:
by adding an event to the inputs:
onchange="calc(this)"
I can append the id I assigned to the input ID and get the values of the other elements
function calc(elem) {
//just get the number
var id = $(elem).attr("id").match(/\d+$/);
//append the id to the element ID
alert($('#pizzaname_'+id).val());
}

You have to use event delegation for dynamically created elements.
Event delegation allows us to attach a single event listener, to a parent element, that will fire for all descendants matching a selector, whether those descendants exist now or are added in the future.
Example:
$(document).ready(function(){
// to listen for value changes of the element with class 'bk':
// (event is attached to the document)
$(document).on('change', '.bk', function(){
var value = $(this).val();
// do stuff when value has been changed...
});
// attach event to other element (must be one of the parents of the inputs)
$('#some_parent_element').on('change', '.bk', function(){
var value = $(this).val();
// do stuff when value has been changed...
});
})
I would also add a data-id attribute to each input, so that you can easily get the id:
<select data-id="<?php echo $boxNum; ?>" name="sizes_<?php echo $boxNum; ?>" id="sizes_<?php echo $boxNum; ?>" class="bk">
And then in jQuery:
$(document).on('change', '.bk', function(){
var id = $(this).data('id');
var pizza_name = $('pizzaname_'+id).val();
});

Related

Disable text-boxes generated dynamically on multiple rows, based on user's selection

The system asks the user to identify the number of records they would like to enter, based on their selection (say 3), the system displays three text boxes.
<?php for($i=1; $i<=$rows; $i++) { ?> // $i is 3 here
<input type="text" name="company_name[]" id="cn[]">
<input type="text" size="3"name="entertainment[]" id="en[]">
<?php } ?>
So this will generate 3 rows, with the same text boxes. If the user enters a value in the 1st row for entertainment, the company name should get grayed out or vice versa. Similarly it should do the same for the 2nd and 3rd line as well - based on which text box they fill.
How do I do that via js/jquery?
P.S: I am not a good front-end developer, so I could use all the help I can get.
Thanks.
First wrap then into <div>.
Element Id should be unique, change it as following
<?php for($i=1; $i<=$rows; $i++) { ?> // $i is 3 here
<div>
<input type="text" name="company_name[]" onchange="grayOther(this);" id="cn_<?php echo $i ?>">
<input type="text" size="3"name="entertainment[]" onchange="grayOther(this);" id="en_<?php echo $i ?>">
</div>
<?php } ?>
Then here is the js.
<script>
function grayOther(elem){
elem = $(elem); // convert to jquery object
if (elem.val().length == 0) {
elem.siblings().prop('disabled',false);
}else {
if (elem.is("[name='company_name[]']")){
elem.siblings("[name='entertainment[]']").prop('disabled',true);
}else {
elem.siblings("[name='company_name[]']").prop('disabled',true);
}
}
}
</script>

Last element of an array comes as an 'Array'

I have following code to get the values of all checked checkboxes. Surprisingly last element of an array comes as a 'Array'.
var selected = [];
$('#checkboxes input:checked').each(function(){
selected.push($(this).attr('value'));
});
Even if only one checkbox is checked, it adds extra element in an array.
Array will be like this:
selected[0]=Dove
selected[1]=Array
What can be the issue with it? I'm unable to find any reason behind this. Can anyone help?
HTML Code
<ul id='checkboxes' class="list-style1">
<?php foreach($brands as $row){ ?>
<span class='checkbox-wrapper' id='<?php echo $brand; ?>'>
<li><input type='checkbox' value='<?php echo $row['brand']; ?>'>
<label for='<?php echo $row['brand']; ?>'><?php echo $row['brand']; ?></label>
</li></span>
<?php } ?>
</ul>
var checkedValues = $('#checkboxes input:checked').map(function() {
return this.value;
}).get();
it will return the selected value of the checkbox in array.
referrence link

PHP POST and Javascript?

This may sound confusing, but I am unsure as where to start looking for an answer. This is the scenario: I have a webpage with a table created using PHP and inside each cell is a randomly selected word. What I would like to do is allow a user to click one of the cells and it would return the definition of the word, and refresh the table/page. From what I found so far was to make use of _POST/_REQUEST, however I am unsure how to find out what the user clicked, and pass that into a function to find the definition. Is my logic correct here, how would you go about this? I was thinking of having an onclick function to identify the element clicked, but don't know how to handle it.
<body>
<form method="post" action="
<table border="1">
<?php
$f="/words.txt"; //definitions also included in this file
$o=file($f);
$len=count($o);
$i=0;
while( $i < 18){
$rnum= rand(2,$len);
$rword= $o[$rnum];
$piece= explode(" ",$rword); //get just the word on the line
if($i%3==0){
echo "<tr>";
}
echo "<td id='$i' onclick='about()'>".$piece[2]."</td>";
$i++;
if($i%3==0){
echo "</tr>";
}
}
?>
</table>
</body>
</html>
The simplest thing you may done without need to any javascript is to make number forms equals to the number of cells you have. It is something like the following:
//Remove the form tag
<table border="1">
<?php
$f="/words.txt"; //definitions also included in this file
$o=file($f);
$len=count($o);
$i=0;
while( $i < 18){
$rnum= rand(2,$len);
$rword= $o[$rnum];
$piece= explode(" ",$rword); //get just the word on the line
if($i%3==0){
echo "<tr>";
}
?>
<td id='<?php echo $i; ?>'><form method="post"><input type="hidden" name="word" value="<?php echo $piece[2];?> /><input type="submit" value="<?php echo $piece[2];?> /></form></td>;
<?php
$i++;
if($i%3==0){
echo "</tr>";
}
}
?>
</table>
By this way you have a submit button for each word you have that submit its own form's hidden element with the name word to be precessed on the server side.
I suggest you to create a form that contains your word. Then you can simply specify action=”yourpagewithresponse.php” onclick="submit()" in the attributes of the form. In this way you don't need the submit button, you can simply click on the word. Obviously you can iterates the form creation in php language for having more word containers.
<form method="post" action=”yourpagewithresponse.php” onclick="submit()"><input type="hidden" name="word" value="<?php echo $piece[2];?>" /><?php echo $piece[2];?></form>

Check the checkbox by changing values in optionsMenu using Multiple rows with same id

I am creating a Data table with following code
<?php
foreach($redeemSales as $sale)
{
?>
<tr class='clickableRow<?php echo $isRead ? '' : ' newrow' ?>' href='#'>
<td><form><input type="checkbox" id="userSelection" name="userslection" ></form></td>
<td><?php echo $sale["ring"];?></td>
<td><?php echo formatFullDate($sale["soldDate"]) ?></td>
<td><?php echo $sale["saleType"]; ?></td>
<td>
<div class="col-lg-8">
<select name="type" id="redeemOptions" class="form-control">
<option value="None">None</option>
<option value="CD">(CD)</option>
<option value="Amex">American Express Card (Amex)</option>
</select>
</div>
</td>
</tr>
<?php }?>
I want to make it so if anyone change the option to any oe of CD Or Amex, it will set the selection to its row as checked.
jAVAScript code is here
<script language="javascript">
$(document).ready(function(e)
{
$('#redeemOptions').change(function(){
if($('#redeemOptions').val() == 'None')
{
document.getElementById("userSelection").checked = false;
}
else
{
document.getElementById("userSelection").checked = true;
}
});
});
</script>
As you can see that there is a for loop, so its rows getting added in a table. The above method works only for first row. If i change the options, it will set selection to Checked. But after first rows, no other row is showing that behavior. It is probably something to do with id of the elements.
How can one find out a solution so that other rows show same behavior. Secondly, if I have to get the ids or values of all rows that are "Checked" how will i do it in php
the problem is that an id has to identify one single element on the page, and you are generating multiple items with the same id. Change your select to something like the following:
<select name="type" class="form-control redeemOptions">
And then change your javascript function to the following, to take advantage of the fact that "this" will equal the object that the change event is being fired from:
$('.redeemOptions').change(function(){
var menuChanged = $(this),
parentForm = menuChanged.closest('form'),
correspondingCheckbox = parentForm.find('input[name=userSelection]');
if(menuChanged.val() == 'None')
{
correspondingCheckbox[0].checked = false;
}
else
{
correspondingCheckbox[0].checked = true;
}
});
Finally, remove the id="userSelection" from the checkbox and just leave the name. It won't hurt the functionality but it is technically invalid because again you can only have one element of a given id on the page.
As I can see for every $sale in $redeemSales you have a checkbox having id "userSelection" and a select box having id "redeemOptions". I advise you to use unique ids. So append $i=0...$i++ to the ids of both.
For Row 1: userSelection0 redeemOptions0
For Row 2: userSelection1 redeemOptions1
and so on..
In Select tag, use onchange event :-
<select name="type" id="redeemOptions<?php echo $i; ?>" class="form-control" onchange="foo(<?php echo $i; ?>)">
And write a javascript function :-
<script language="javascript" type="text/javascript">
function foo(id)
{
if($('#redeemOptions'+id).val() == 'None')
{
document.getElementById("userSelection"+id).checked = false;
}
else
{
document.getElementById("userSelection"+id).checked = true;
}
}
</script>

How do I grab multiple fields of a MySQL record from dropdown box of a child popup window to insert those values in multiple fields of parent page?

I have this in the popup, which creates the dropdown with database entries.
<select name="ddlNames" id="ddlNames">
<?php
while($row = mysql_fetch_array($result)) {
?>
<option value="<?php echo $row["vendorid"]; ?>"><?php echo $row["vendorname"]; ?></option>
<?php
}
?>
</select>
<input type="button" value="Select" onclick="SetVendor();" />
Then this javascript takes the values and inserts them into the fields of parent page and also closes the popup at the same time.
<script type="text/javascript">
function SetVendor() {
if (window.opener != null && !window.opener.closed) {
var vendor_name = window.opener.document.getElementById("vendor_name");
var vendor_nameSelect = document.getElementById("ddlNames");
var vendor_nameSelectedText = vendor_nameSelect.options[vendor_nameSelect.selectedIndex].text;
vendor_name.value = vendor_nameSelectedText;
var vendorid = window.opener.document.getElementById("vendorid");
vendorid.value = document.getElementById("ddlNames").value;
}
window.close();
}
</script>
I am already grabbing 2 different fields. an id number which are populated in the value parameter of each option, and the name of each option as well.
So now i want a third thing, then 4th and 5th and so on. i can't just put this in the dropdown options loop. doesn't work.
<input type="hidden" id="street" name="street" value="<?php echo $row["street"]; ?>">
Those are the fields i want to grab next from each record. the address fields. street, city, state, zip.
So for each drop down i want to grab 6 different values and when selecting one of the dropdown items from popup window form, those 6 values should insert into 6 different input boxes of parent page. what i have so far works fine for 2 values. just don't know how to do 3 or more.
UPDATE:
what if i don't use a dropdown? what if i just use divs with id's? and one of the div items would be a link and when clicking that link, all the div values will be collected of just that row that was clicked? something like this:
<?php
while($row = mysql_fetch_array($result)) {
?>
<div style="display: block; clear: both;" id="this_needs_to_be_loop">
<div id="myvendorid" style="float: left; padding-right: 10px;"><?php echo $row["vendorid"]; ?></div>
<div id="myvendorname" style="float: left; padding-right: 10px;"><?php echo $row["vendorname"]; ?></div>
<div id="mystreet" style="float: left; padding-right: 10px;"><?php echo $row["street"]; ?></div>
<div id="mycity" style="float: left; padding-right: 10px;"><?php echo $row["city"]; ?></div>
<div id="mystate" style="float: left; padding-right: 10px;"><?php echo $row["state"]; ?></div>
<div id="myzip" style="float: left; padding-right: 10px;"><?php echo $row["zip"]; ?></div>
</div>
<?php
}
?>
UPDATE:
my json script looks like this. doesn't look right.
<script>var myDataBase = {"1":{"0":"1","vendorid":"1","1":"34534","vendor_no":"34534","2":"hi","vendorname":"hi","3":"3434534534","phone":"3434534534","4":"sdfsdfs#sdfsdfsd.com","email":"sdfsdfs#sdfsdfsd.com","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"sdfsdfsdf","street":"sdfsdfsdf","9":"sdfsdfsd","city":"sdfsdfsd","10":"sdfsdf","state":"sdfsdf","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null},"2":{"0":"2","vendorid":"2","1":"5334534","vendor_no":"5334534","2":"sfsdfsfsd","vendorname":"sfsdfsfsd","3":"78654653","phone":"78654653","4":"ggh#sdsg.com","email":"ggh#sdsg.com","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"sfsdfsdfsdf","street":"sfsdfsdfsdf","9":"sdfsdfsdsdf","city":"sdfsdfsdsdf","10":"sdfsdfsdfsd","state":"sdfsdfsdfsd","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null},"4":{"0":"4","vendorid":"4","1":"345342","vendor_no":"345342","2":"dgdf","vendorname":"dgdf","3":"dfgdf","phone":"dfgdf","4":"dfgdfgdf","email":"dfgdfgdf","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"sdfsdsd","street":"sdfsdsd","9":"sdfsfsd","city":"sdfsfsd","10":"sdfsdf","state":"sdfsdf","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null},"5":{"0":"5","vendorid":"5","1":"978765345546","vendor_no":"978765345546","2":"jfgsdfjghdfger","vendorname":"jfgsdfjghdfger","3":"54686576456","phone":"54686576456","4":"sdfjhr#dfghjkl.com","email":"sdfjhr#dfghjkl.com","5":null,"website":null,"6":null,"glacct":null,"7":null,"category":null,"8":"gdfgdf","street":"gdfgdf","9":"dfgdfgdf","city":"dfgdfgdf","10":"dfgdfgdf","state":"dfgdfgdf","11":null,"pobox":null,"12":null,"postalcode":null,"13":null,"country":null,"14":null,"description":null}};</script>
Your dropdown popup window must perforce contain all the values. You can do this in Javascript.
You will have a loop in PHP that fetches a tuple:
{ vendorid, vendorname, street, address, ... }
You now use this tuple to create a dropdown:
<option value="{$vendorid}">{$vendorname}</option>
To do what you want, you need to also save the same data in a different structure:
<?php
// This is OUTSIDE the cycle that creates the options
$database = array();
// This is inside the cycle that creates the options
$option = "<option value=\"{$data['vendorid']}\">{$data['vendorname']}</option>";
$database[$data['vendorid']] = $data;
// Now the cycle has ended. We print the data in Javascript.
print "<script>";
print "var myDataBase = ";
print json_encode($database);
print ";\n";
print "</script>";
The above defines a Javascript array which is much like a PHP one, with the fields having the same names as in PHP thanks to json_encode.
Now in the Javascript you get the vendor Id as before:
var vendor_id = vendor_nameSelect.options[vendor_nameSelect.selectedIndex].value;
This vendor_id is a key inside what is now a Javascript variable, myDataBase. So you can do:
window.opener.document.getElementById("streetfieldid").value
= myDatabase[vendor_id]["street"];
window.opener.document.getElementById("addressfieldid").value
= myDatabase[vendor_id]["address"];
...and so on.
You can see the concept in action (except for PHP of course) here. I have only used three fields and they are all in the same page, but the modifications are trivial. To generate myDataBase you use the above PHP code.

Categories

Resources