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>
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
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>
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>
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.