I am trying to get alert on change of select box option.
Here, i added a css class name on each selectbox while iterating it in the loop, and finally i called the jquery function with class selector.
But i do not know why its not showing alert on change of selectbox dropdown. Please help me to solve this problem
<table style="border:1px solid red;" width="650px">
<tr style="border:1px solid red;">
<td">Status</td>
</tr>
<?php
$qry = "select *from tracker group by orderno";
$res = mysql_query($qry) or die(mysql_error());
while($data = mysql_fetch_array($res))
{
?>
<tr style="border:1px solid red;">
<td ><label onclick="show(this.id)" id=<?php echo $data['orderno'];?> > <?php echo $data[1]; ?></label></font></td>
<td ><?php echo $data['customername']; ?></td>
<td align="center" style="border:1px solid red;"><?php echo $data['noofbooks']; ?></td>
<td ><?php echo $data['address']; ?></td>
<td ><?php echo $data['mobileno']; ?></td>
<td align="center" style="border:1px solid red;">
<select name="status" class="selectboxid">
<?php
if($data['status'] == "despatch")
{
echo '<option name="despatched" selected="selected" value="despatched"> Despatched </option>';
}
else
{
echo '<option name="despatched" value="despatched"> Despatched </option>';
}
if($data['status'] == "Pending")
{
echo '<option name="pending" selected="selected" value="pending"> pending </option>';
}
else{
echo '<option name="pending" value="pending"> pending </option>';
}
if($data['status'] == "deliver")
{
echo '<option name="despatched" selected="selected" value="despatched"> Despatched </option>';
}
else
{
echo '<option name="despatched" value="despatched"> Despatched </option>';
}
if($data['status'] == "partial")
{
echo '<option name="partial" selected="selected" value="partial"> Partial </option>';
}
else
{
echo '<option name="partial" value="partial"> Partial </option>';
}
?>
</select>
</td>
</tr>
<?php
}
?>
</table>
And my jquery code is;
<script>
$(".selectboxid").change(function() {
alert("hi");
});
</script>
Maybe you bind event too soon (before DOM is loaded). Just put jQuery function in jQuery(function(){ }) like code below.
for optional you should use on instead of change, its a recommend style.
jQuery(function(){
$(".selectboxid").on('change', function() {
alert("hi");
});
});
use this, dont need $(document).ready...
<script>
$(document).on("change",".selectboxid",function(){
alert("hi");
});
</script>
Related
I have a javascript function to choose the selected option to chnage the content of a table cell :
<script>
function getValue(selValue) {
if(selValue == "Apple")
document.getElementById("fruittype").innerHTML = "A";
if(selValue == "Banana")
document.getElementById("fruittype").innerHTML = "B";
if(selValue == "Orange")
document.getElementById("fruittype").innerHTML = "C";
}
</script>
And below is my php function that I am calling :
<?php
function retainFormOnLoad($fruit)
{
echo "<form d='form1' name='form1' method='post' >";
echo "<table>";
echo "<tr>
<td>Congress Database</td>
<td style='text-align: center;'>
<select name='fruit' id='fruit' onchange='getValue(document.getElementById('fruit').value)'>
<option value='-1' selected disabled>Select your option</option>
<option value='Apple' ".(($fruit=='Apple')?'selected':'')." >Apple</option>
<option value='Banana' ".(($fruit=='Banana')?'selected':'')." >Banana</option>
<option value='Orange' ".(($fruit=='Orange')?'selected':'')." >Orange</option>
</select>
</td>
</tr>";
echo "<tr>
<td id='fruittype'>A</td>
<td>Always Good!</td>
</tr>";
echo "<tr><td colspan='2'><input type='reset' value='Clear' onclick='reset()'></td></tr>
</table></form>";
}
?>
When I call the above function, the default values of form fields are set but the onchange and onclick javascript functions do not work. Where am I going wrong? Please help
(***And I have to use PHP only to echo the form)
I have a table inside a modal that was echoed via PHP. I add a class that whenever the value does not match, the said class will be hidden. The problem is that when the focus is lost in the modal, the class returns to be hidden. Here is excerpt from my php code:
echo "<tr class='options1'>
<td><label class='control-label'>Section:</label></td>
<td><select class='form-control' name='cmbsection' id='cmbsection'>
<option value='".$val['Section']."'>".$val['Section']."</option>";
$section_code = array();
$section_code[] = $val['Section'];
foreach($data['sectionlist'] as $value)
{
if(!in_array($value['sectionName'],$section_code))
{
echo "<option value='".$value['sectionName']."'>".$value['sectionName']."</option>";
}
}
echo "</select>
</td>
<td><label class='control-label'>Line:</label></td>
<td><select class='form-control' name='cmbline' id='cmbline'>";
$line_code = array();
$line_code[] = $val['Line'];
echo "<option value='".$val['Line']."'>".$val['Line']."</option>";
foreach($data['linelist'] as $value)
{
if(!in_array($value['lineName'],$line_code))
{
echo "<option value='".$value['lineName']."'>".$value['lineName']."</option>";
}
}
echo "</select>
</td>
</tr>
and here is the jquery code:
$(document).on('focus','#modalEditEmployees',function(){
$('tr.options1').hide();
$('#cmbdept3').on('change',function(){
if($('#cmbdept3 option:selected').text() == "SEWING"){
$('tr.options1').show();
}
else
{
$('tr.options1').hide();
}
});
});
Please note that modalEditEmployees is the name of the modal.
I have this foreach loop:
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
echo $value['name'] . "</br>";
echo "<img src=\"{$value['image_inventory']}.png\" width=\"90\" height=\"60\">" . "</br>";
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
echo $rarity . "</br>";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
echo $values['id'] . "</br></br>";
break;
}
}
}
}
which outputs the data in this format:
http://puu.sh/kVTjk/c1471e903a.jpg
I want the user to select which item he wants to trade/use and i want to recieve the ID of that item which is the integer value at the bottom, the user should be able to select multiple items?
How do i accomplish this? and whats the best way to do this? Thanks.
There are lot of ways of achieving this.
You can use normal Submit:
<form method="POST" action="script.php">
<table>
<tr>
<th></th>
<th>Image</th>
<th>Name</th>
</tr>
<?php
foreach ($userItems_get as $item => $value) {
if ($value['prefab'] == 'wearable') {
$id = "";
foreach ($userItemsLoad as $key => $values) {
if ($item == $values['defindex']) {
$id = $values['id'];
break;
}
}
?>
<tr>
<td><input type="checkbox" name="itemSelect[]" class="itemSelect" value="<?php echo $id; ?>" /></td>
<td>
<img src="<?php echo $value['image_inventory']; ?>.png" width="90" height="60">
</td>
<td>
<?php echo $value['name']; ?><br />
<?php
if (!isset($value['item_rarity'])) {
$rarity = "common";
} else {
$rarity = $value['item_rarity'];
}
?>
</td>
</tr>
<?php
}
}
?>
</table>
<button type="Submit">
Normal Submit
</button>
<button type="button" id="ajSubmit">
Ajax Submit
</button>
</form>
Script.php:
<?php
echo "<pre>";
print_r($_POST['itemSelect']);
echo "</pre>";
?>
Or Use jQuery:
<script>
$(function() {
$("#ajSubmit").click(function() {
var selectedItemIds = $("input.itemSelect").map(function(){
return $(this).val();
}).get();
});
});
</script>
The selectedItemIds will hold all the ID values.
Add a checkbox for each items, and add a class for the checkboxes for referencing
<input class="itemId" type="checkbox" value="$values['defindex']">
You can use JQuery to select all the checked checkboxes and loop then in a each loop
//Select all input elements which has class of itemId and it is checked then loop through with each.
$("input.itemId[checked='checked']").each(function(){
var itemId = $(this).val();
alert(itemId);
//Do something else
}
I am having a table from where i am fetching activities and displaying in a table ...like this
<table width="1000px;" style="border:0px;" >
<tr>
<?php
$sql_activities="select * from tb_activities";
$query_activities=mysql_query($sql_activities);
while($row_activities=mysql_fetch_array($query_activities))
{
?>
<td width="50">
<input type="radio" value="<?php echo $row_activities['activity_name']; ?>" name="activities" onclick="hi() " id="activities" /><?php echo " ".$row_activities["activity_name"]; ?></td>
<?php
}
?>
</tr>
</table>
Now i have applied it in an onlick event of a radio button and the script for the function is:
<script type="text/javascript">
function hi()
{
a = document.getElementById("activities").value;
alert(a);
}
</script>
i want to alert the name of the activity chosen but when i click on any activity, it shows the same. The first activity.ven if i have clicked on any other activity...can anyone help me ??
what you should do is change this:
onclick="hi()"
to this:
onclick="hi(this);
then your function would be:
function hi(who) {
var a = who.value;
alert(a);
}
In PHP side of things change:
<td width="50"><input type="radio" value="<?php echo $row_activities['activity_name']; ?>" name="activities" onclick="hi() " id="activities" /><?php echo " ".$row_activities["activity_name"]; ?></td>
To: ( YOU NEED Unique IDs on Input/ Radio Buttons to be generated dynamically & Sent to JS)
<?php $i = 1; ?>
<td width="50"><input type="radio" value="<?php echo $row_activities['activity_name']; ?>" name="<?php echo $row_activities['activity_name'].$i; ?>" id ="<?php echo $row_activities['activity_name'].$i; ?>" onclick="hi("<?php echo $row_activities['activity_name'].$i; ?> ")" /></td>
<?php $i++; ?>
In Javascript Change to This:
function hi(elementID) {
var value = document.getElementById(elementID).value;
alert(value);
}
Code may have some escape errors, but logically this should give you idea how to do it, Hope that helps.
I am working on Updating Codeigntier Cart with Jquery using Ajax call to update. Here is my jquery function
$(function() {
$('.cart_form select').on('change', function(ev) {
var rowid = $(this).attr('class');
var qty = $(this).val();
var postData_updatecart = {
'rowid' : rowid,
'qty' : qty
};
//posting data to update cart
$.ajax({
url : base_url + 'bookings/update_booking_cart',
type : 'post',
data : postData_updatecart,
beforeSend : function() {
$('#cart_content').html('Updating...');
},
success : function(html) {
//window.location.href = "postproperty.php?type="+suffix+'&page=page1';
$('#cart_content').html(html);
}
});
});
});
I have cart view file as
<div class="cart_form">
<?php echo form_open(base_url().'index.php/bookings/customerdetails', array('class' => 'bookings_form_customer', 'id' => 'bookings_form_customer')); ?>
<table cellpadding="6" cellspacing="1" style="width:100%" border="0">
<tr>
<th style="text-align:left">Item Description</th>
<th style="text-align:left">QTY</th>
<th style="text-align:right">Item Price</th>
<th style="text-align:right">Sub-Total</th>
</tr>
<?php $i = 1; ?>
<?php foreach ($this->cart->contents() as $items): ?>
<?php echo form_hidden($i.'[rowid]', $items['rowid']); ?>
<tr>
<td>
<?php echo $items['name']; ?>
<?php if ($this->cart->has_options($items['rowid']) == TRUE): ?>
<p>
<?php foreach ($this->cart->product_options($items['rowid']) as $option_name => $option_value): ?>
<strong><?php echo $option_name; ?>:</strong> <?php echo $option_value; ?><br />
<?php endforeach; ?>
</p>
<?php endif; ?>
</td>
<td>
<select name="<?php echo $i.'[qty]'; ?>" class="<?php echo $items['rowid']; ?>">
<?php
for($tt=0; $tt<=10; $tt++)
{
?>
<option value="<?php echo $tt; ?>" <?php if($tt==$items['qty']) echo 'selected="selected"'; ?>><?php echo $tt; ?></option>
<?php
}
?>
</select>
</td>
<td style="text-align:right"><?php echo $this->cart->format_number($items['price']); ?></td>
<td style="text-align:right">$<?php echo $this->cart->format_number($items['subtotal']); ?></td>
</tr>
<?php $i++; ?>
<?php endforeach; ?>
<tr>
<td colspan="2"> </td>
<td class="right"><strong>Total</strong></td>
<td class="right">$<?php echo $this->cart->format_number($this->cart->total()); ?></td>
</tr>
</table>
<p><?php echo form_submit('update_cart', 'Update your Cart'); ?></p>
</form>
</div>
Things are working Nice. But, lets say if I have 2 products, if i select one item's qty from 1 to 2, cart is updated and updated cart is shown using AJAX. But, if I immediately change another item's qty then it doesnt work.
The cart view file is inside class 'cart_form'.
Helping hands are appreciated.
I got an answer. You can refer below link
Ajax Request works only once
OR
Directly follow this
REPLACE jquery code part by
$(function() {
$(document).on( "change", "#bookings_form_customer select", function(ev) {
// your code goes here
});
});