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>
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 stuck in a place in Yii. I have two drop Down box, second is dependent on the first. In this first drop Down, I have many options. By referring to these options, I must decide whether the second box must be a drop Down or a text Field.
I have uploaded My code here. Please help me solving this.
Thanks in advance.
My View:
<td>
<?php echo $form->labelEx($model,'cm_classification_id'); ?>
<?php echo $form->dropDownList($model,'cm_classification_id', CHtml::listData(masterClassification::model()->findAll(array('order' => 'cm_classification_id ASC', 'condition'=>'cm_classification_type=:type', 'params'=>array('type'=>'initiate'))), 'cm_classification_id', 'cm_classification_name'), array('empty'=>'Select classification')); ?>
<?php echo $form->error($model,'cm_classification_id'); ?>
</td>
<td>
<label>Change Description <span class="required" id="desc_req_note" style="display:none;">*</span></label>
<?php echo $form->dropDownList($model,'cm_description',array(),array('empty'=>'Select Change Description')); ?>
<?php echo $form->error($model,'cm_description'); ?>
</td>
based on the change classification, I must decide where Change Description must be a drop Down or a text field.
This must be done using Javascript.
Have you tried this -
Change the code to -
<label>Change Description <span class="required" id="desc_req_note" style="display:none;">*</span></label>
<span id="cm_desc_select" style="display:none;"><?php echo $form->dropDownList($model, 'cm_description', array(), array('empty'=>'Select Change Description')); ?></span>
<span id="cm_desc_input" style="display:none;"><?php echo $form->textField($model,'cm_description'); ?></span>
<?php echo $form->error($model,'cm_description'); ?>
2.
$('#cm_classification_id').change(function() {
var val = $(this).val();
var cm_desc_select_elem = $('#cm_desc_select');
var cm_desc_input_elem = $('#cm_desc_input');
if(val === COMPARE_WITH_YOUR_VALUE) {
$(cm_desc_select_elem).show();
} else {
$(cm_desc_input_elem).show();
}
});
I hope is helps for a quick fix.
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.
I have a text input (z-index:1) which i put in front of the drop down box. So that the user can input text and also choose from drop down list. I did hide the down arrow button for the drop down list. So, I want when user click on the text input, the drop down listing will automatic display. I plan to used Jquery to display the listing, but i don't know what function that I need to use.
Here my code
<span id="plantimefromdd" style="position:relative;">
<input id="textin1" name="textin1" type="text" style="width:100px;position:absolute;top:-4px;left:13;z-index:1;padding:3;margin:0;opacity:0;" value="<?php echo $todisplay; ?>" onclick="this.style.opacity=1;">
<?php
//display dropdown time for from interval 5 minutes
$start = strtotime('12:00am');
$end = strtotime('11:55pm');
echo '<select name="plantimefromdd" style="width:100px;height:26px;-webkit-appearance:none;border-width:2px;border-color:#D8D8D8;" onchange="$(\'input#textin1\').val($(this).val());">';
for ($i = $start; $i <= $end; $i += 300){
$timerfrom = date('H:i', $i);
if($todisplay == $timerfrom) {$temp = "selected";} else {$temp = "";}
echo '<option '.$temp.' >' . $timerfrom ;
}
echo '</select>';
?>
</span>
Thank you for your helping.
First add id to your drop-down and then for the text-box make the following from:
onclick="this.style.opacity=1;"
To:
onclick="$('#dropdown').show()" onblur="$('#dropdown').hide()"