Here i repeated the table dynamically in this project.what i want to make is no.of passenger must be equal to no.of passenger details.Now even if i enter details of 5 passengers bt no.tickets can be any number.this should not happen.how can i solve it?
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#a').append('<tr id="row'+i+'"><th><input type="text" name="pname[]" placeholder="Name" class="form-control name_list" /></th><th ><input type="number" name="age[]" placeholder="Age" class="form-control name_list" min="5" max="130" /></th><th scope=""><select class="form-control" id="gender[]" name="gender[]" placeholder="gender" width=""> <option>Male</option> <option>Female</option></select></th><th><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
<div class="form-group">
<label for="No.of adults">No.of Passengers</label>
<?php echo form_input(['type'=>'number','name'=>'pass_no','class'=>'form-control','id'=>'passenger','min'=>1,'max'=>9,'onkeyup'=>"sum();",'placeholder'=>'Enter No.of Adults','value'=>set_value('pass_no')]); ?>
<?php echo form_error('pass_no'); ?>
</div>
<label for="No.of Children">Passenger Details</label><button type="button" class="btn btn-primary btn-sm" id="add" style="margin-left:170px">Add Passenger</button>
<table class="table table-secondary" id="a" name="a">
<thead>
<tr class="table-default">
<th scope="col-lg-15">
<? if(isset($pname)): // Name set? ?>
<? foreach($pname as $item): // Loop through all previous posted items ?>
<?php echo form_input(['type'=>'text','name'=>'pname[]','value'=>'','class'=>'form-control','id'=>'pname','placeholder'=>'Name','value'=>set_value('pname[]')]); ?>
<?php echo form_error('pname[]'); ?>
<? endforeach; ?>
<? else: ?>
<? endif; ?>
</th>
<th scope="col-lg-15">
<? if(isset($age)): // Name set? ?>
<? foreach($age as $item): ?>
<?php echo form_input(['type'=>'number','name'=>'age[]','class'=>'form-control','id'=>'age','min'=>5,'max'=>130,'placeholder'=>'Age','value'=>set_value('age[]')]); ?>
<?php echo form_error('age[]'); ?>
<? endforeach; ?>
<? else: ?>
<? endif; ?>
</th>
<th scope="col-lg-15">
<? if(isset($gender)): // Name set? ?>
<? foreach($gender as $item): // Loop through all previous posted items ?>
<select class="form-control" id="gender[]" name="gender[]" placeholder="Gender" >
<option>Male</option>
<option>Female</option>
</select>
<? endforeach; ?>
<? else: ?>
<? endif; ?>
</th>
</tr>
</thead>
</table>
Ok #suraj shetty, I've created a demo from your code(removing the php code) which will not allow the passenger details to be greater than total passengers.
But keep in mind, this will not prevent the user from submitting the
form with fewer details, ie 2 passengers and only 1 detail(You can prevent
this but it's annoying and should be avoided). So, you should validate
this on form submit. Also, the user can first add details of 2 passengers and then change the total number to 1. This should also be checked on submit.
So, I added a class(passenger_detail) to the tr and every time, the user adds detail I match total passengers with total elements of the class, the same class is included when on new tr element when added.
I would advise you to use clone() instead of appending a whole(same) row. It's bad practice. You can add id after cloning(if that was the reason behind using append).
$(document).ready(function(){
var i=1;
$('#add').click(function(){
let total_passenger = $('#passenger').val(); // get total passengers
let total_details = $('.passenger_detail').length; // get total rows with class total_details
if(total_details < total_passenger){ // check the condition
i++;
$('#a').append('<tr class="passenger_detail" id="row'+i+'"><th><input type="text" name="pname[]" placeholder="Name" class="form-control name_list" /></th><th ><input type="number" name="age[]" placeholder="Age" class="form-control name_list" min="5" max="130" /></th><th scope=""><select class="form-control" id="gender[]" name="gender[]" placeholder="gender" width=""> <option>Male</option> <option>Female</option></select></th><th><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></th></tr>'); // use clone() here, then add id
}else{ // you can remove this if you don't want to show any message
alert('Passenger details cannot be greater than no. of passengers'); // your custom message
}
});
$(document).on('click', '.btn_remove', function(){ // you can also check the condition on remove but should avoid doing that. Check on submit instead.
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
function sum(){} // just to avoid error, because you're calling sum() onkeyup. Your logic here.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
<label for="No.of adults">No.of Passengers</label>
<input type='number' name='pass_no' class='form-control' id='passenger' min='1' max='9' onkeyup="sum();" placeholder='Enter No.of Adults' value='1'>
</div>
<label for="Passenger Details">Passenger Details</label><button type="button" class="btn btn-primary btn-sm" id="add" style="margin-left:170px">Add Passenger</button>
<table class="table table-secondary" id="a" name="a">
<thead>
<tr class="table-default passenger_detail">
<th scope="col-lg-15">
<input type='text' name='pname[]' class='form-control' id='pname' placeholder='Name' value='Sauhard' />
</th>
<th scope="col-lg-15">
<input type='number ' name='age[] ' class='form-control' id='age' min='5 ' max='130' placeholder='Age ' value='23' />
</th>
<th scope="col-lg-15">
<select class="form-control" id="gender[]" name="gender[]" placeholder="Gender">
<option>Male</option>
<option>Female</option>
</select>
</th>
</tr>
</thead>
</table>
Hope it helps you. :)
Related
I need a help to fix my dependent drop down list cloning problem. i have these three fields, 1.country_name,2.store_model,3.location_list, and on selecting country_name the store_model will populate and on selecting store_model the location lists will populate. this is working fine, but when i try to clone and append a row, the appended dropdown is not working properly. in the appended dropdown, the values are displaying based on the original dropdown selection.
this is my PHP page
<!-- BEGIN FORM-->
<form action="functions.php" method="post" enctype="multipart/form-data"
class="form-horizontal form_emp" id="form_sample_3" novalidate="novalidate">
<div class="form-body">
<input type="hidden" class="form-control" value="<?php echo $id;?>" name="id">
<input type="hidden" class="form-control" value="<?php echo $sp_id;?>" name="sp_id">
<input type="hidden" class="form-control tot_in" value="0" name="total_in">
<div class="row">
<div class="col-md-12">
<div class="table-scrollable">
<table class="table table-bordered edit-table">
<thead>
<tr>
<th width="10%"> # </th>
<th width="20%"> Country </th>
<th width="20%"> Store Model</th>
<th width="20%"> Loaction</th>
<th width="30%"> Update Comments </th>
</tr>
</thead>
<tbody id="items-row">
<?php
if(empty($userdata)):
?>
<tr class="item-row">
<td>
<a title="Remove row" href="javascript:;" class="dodelete delete btn red btn-outline">
<i class="fa fa-trash-o"></i></a></td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control country_name" name="country_name[]">
<?php $q=mysql_query("SELECT `id`,`country_name` FROM `db_country` WHERE id in (select distinct country_id from db_locations where location_id in (select location_id from db_sp where sp_id=$sp_id)) ");
while($res=mysql_fetch_array($q)){
echo "<option ".(in_array($res['id'],$country_name)?"selected":"")." value='".$res['id']."'>".$res['country_name']."</option>";
}?>
</select>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control store_model" name="store_model[]">
<?php
$q=mysql_query("SELECT `id`,`store_model` FROM `db_store_model` WHERE id in (select distinct store_model_id from db_locations where location_id in (select location_id from db_sp where sp_id=$sp_id)) ");
while($res=mysql_fetch_array($q)){
echo "<option ".(in_array($res['id'],$store_model)?"selected":"")." value='".$res['id']."'>".$res['store_model']."</option>";
}?>
</select>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control location_list" name="location_list[]">
<?php
if(!empty($id)){
$q=mysql_query("SELECT `location_id`,`location_name` FROM `db_locations` WHERE location_id in (select location_id from db_sp where sp_id=$sp_id)");
while($res=mysql_fetch_array($q)){
echo "<option ".(in_array($res['location_id'],$location_list)?"selected":"")." value='".$res['location_id']."'>".$res['location_name']."</option>";
}}?>
</select>
<div class="form-control-focus loading"> </div>
</td>
<td align="centre" class="form-group form-md-line-input">
<input type="text" class="form-control" name="comments[]"></td>
</tr>
<?php
else:
$count=count($sp_detail);
for($i=0; $i<$count;$i++){
?>
<tr class="item-row">
<a title="Remove row" href="javascript:;" class="dodelete delete btn red btn-outline">
<i class="fa fa-trash-o"></i></a></td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control country_name" name="country_name[]">
<option value="">Select Any</option>
<?php foreach($country_name as $key=>$cname){ ?>
<option value="<?php echo $key ;?>" <?php echo ($sp_detail[$i]['country_name']==$key?"selected":"");?>><?php echo $cname ;?></option>
<?php }?>
</select>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control store_model" name="store_model[]">
<option value="">Select Any</option>
<?php foreach($store_model as $key=>$smodel){ ?>
<option value="<?php echo $key ;?>" <?php echo ($sp_detail[$i]['store_model']==$key?"selected":"");?>><?php echo $smodel ;?></option>
<?php }?>
<div class="form-control-focus loading"> </div>
</td>
<td class="form-group form-md-line-input">
<select multiple="multiple" class="form-control location_list" name="location_list[]">
<option value="">Select Any</option>
<?php foreach($location_list as $key=>$loclist){ ?>
<option value="<?php echo $key ;?>" <?php echo ($sp_detail[$i]['location_list']==$key?"selected":"");?>><?php echo $loclist ;?></option>
<?php }?>
</select>
<div class="form-control-focus loading"> </div>
</td>
</tr>
<?php
}
endif;
?>
</tbody>
</table>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2">
<a title="Add a row" href="javascript:;" class="addrow btn blue btn-outline">Add a row</a>
</div>
<div class="col-md-8 invoice-block text-right">
<div class="form-group form-md-line-input">
<label class="col-md-3 control-label" for="form_control_1">Update Type
<span class="required">*</span>
</label>
<div class="col-md-6">
<select class="form-control" name="event_status">
<option value="1">Update</option>
</select>
<div class="form-control-focus"> </div>
</div>
</div>
</div>
</div>
</div>
<div class="form-actions">
<div class="row">
<div class="col-md-offset-3 col-md-6">
<button type="submit" name="action" value="update_event" class="btn green">Submit</button>
<button type="reset" class="btn default reset">Reset</button>
</div>
</div>
</div>
</form>
<!-- END FORM-->
this is my functions.php
if(isset($_POST['action'])&& $_POST['action']=='selectUpdate'){
$post=$_POST;
$country_id=json_encode($post['country_name']);
$country_ids=join(',',$post['country_name']);
$sp_id=$post['sp_id'];
$store_model_id=json_encode($post['store_model']);
$store_model_ids=join(',',$post['store_model']);
$q=mysql_query("SELECT `location_id`,`location_name` FROM `db_locations` WHERE country_id in ($country_ids) and store_model_id in ($store_model_ids) and location_id in (select location_id from db_sp where sp_id=$sp_id)order by country_id,store_model_id");
$qno=mysql_num_rows($q);
if($qno>0){
while($res=mysql_fetch_array($q)){
echo "<option value='".$res['location_id']."'>".$res['location_name']."</option>";
}
}
else{
echo "<option value=''>No Data</option>";
}
}
this is my JavaScript
<script>
$(document).ready(function(){
$(document).on('click','.dodelete',function(){
if($('.edit-table #items-row').find('tr').length > 1) { $(this).parents('tr').remove(); }
else{alert('All rows cant be deleted');}
});
var setSelectsEvents = function(rowElement) {
$(rowElement).on('change', '.country_name,.store_model', function(){
var store_model=$(rowElement).find('.store_model')[0].value;
var country_name=$(rowElement).find('.country_name')[0].value;
var sp_id=<?php echo $sp_id ?>;
//var store_model=$(this).val();
$('.loading').html('<img src="layouts/layout/img/loading.gif"/>');
$.ajax({
type: 'post',
url: 'functions.php',
data: {
sp_id:<?php echo $sp_id ?>,store_model:store_model,country_name:country_name, action:"selectUpdate",
},
success: function (res) {
$('.loading').html("");
$($(rowElement).find('.location_list')[0]).html(res);
$('#my_multi_select1').multiSelect();
}
});
});
};
setSelectsEvents('.item-row');
$('.addrow').click(function(){
var elem = $('#items-row').find('tr:first').clone();
var appendedRow = $('#items-row').append(elem).children(':last-child');
setSelectsEvents(appendedRow);
});
$(document).on('click','.reset',function(){
emptyTable();
});
});
$(function(){
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
startDate: 'dateToday',
//startDate: '+15d',
autoclose: true
});
});
im not good at JavaScript, somewhere i am making mistake. please help.
I think it has some event handler like $('select.coutry_name').on('change', ...
But these event handlers are not set cloned rows selects.
So it will work fine selects event handler part and $('.addrow').click change to like following.
// **UPDATED JavaScript**
<script>
$(document).ready(function(){
$(document).on('click','.dodelete',function(){
if($('.edit-table #items-row').find('tr').length > 1) { $(this).parents('tr').remove(); }
else{alert('All rows cant be deleted');}
});
var setSelectsEvents = function(rowElement) {
$(rowElement).on('change', '.country_name,.store_model', function(){
var store_model=$($(rowElement).find('.store_model')[0]).val();
var country_name=$($(rowElement).find('.country_name')[0]).val();
var sp_id=<?php echo $sp_id ?>;
//var store_model=$(this).val();
$('.loading').html('<img src="layouts/layout/img/loading.gif"/>');
var data = {
sp_id:1,store_model:store_model,country_name:country_name, action:"selectUpdate",
};
$('.loading').html('<img src="/images/loading.gif"/>');
$.ajax({
type: 'post',
url: 'functions.php',
data: JSON.stringify(data),
contentType: 'application/JSON',
dataType : 'JSON',
success: function (res) {
$('.loading').html("");
$($(rowElement).find('.location_list')[0]).html(res);
$('#my_multi_select1').multiSelect();
}
});
});
};
setSelectsEvents('.item-row');
$('.addrow').click(function(){
var elem = $('#items-row').find('tr:first').clone();
var appendedRow = $('#items-row').append(elem).children(':last-child');
setSelectsEvents(appendedRow);
});
$(document).on('click','.reset',function(){
emptyTable();
});
});
$(function(){
$('.datepicker').datepicker({
format: 'yyyy-mm-dd',
startDate: 'dateToday',
//startDate: '+15d',
autoclose: true
});
});
</script>
It is posted data in JSON, has to decode JSON data on PHP.
if(isset($_POST['action'])&& $_POST['action']=='selectUpdate'){
$post=json_decode($_POST, true);
//$country_id=json_encode($post['country_name']); //not used
$country_ids=is_array($post['country_name']) ? join(',',$post['country_name']) : $post['country_name'];
$sp_id=$post['sp_id'];
//$store_model_id=json_encode($post['store_model']); //not used
$store_model_ids=is_array($post['store_model']) ? join(',',$post['store_model']) : $post['store_model'];
$q=mysql_query("SELECT `location_id`,`location_name` FROM `db_locations` WHERE country_id in ($country_ids) and store_model_id in ($store_model_ids) and location_id in (select location_id from db_sp where sp_id=$sp_id)order by country_id,store_model_id");
$qno=mysql_num_rows($q);
if($qno>0){
while($res=mysql_fetch_array($q)){
echo "<option value='".$res['location_id']."'>".$res['location_name']."</option>";
}
}
else{
echo "<option value=''>No Data</option>";
}
}
I am building a form to create invoices. At the moment it has the form fields of:
Product Name, QTY.
I have a "add more" button which adds another row of the above form fields.
It then submits as an array to another php page. What i am having problems with is matching each associated form field with each other because when i save it in the database i need the correct Product Name, QTY to be on the same row in the table obviously. Just not sure how to match them.
Currently my code on the form field page is:
<html>
<head>
<title>Invoice Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Invoice Test</h2>
<div class="form-group">
<form name="submit" id="submit" action="name.php" method="POST">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td>
<td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td><td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
On the name.php page where the form submits to. What is the best way to get each product and associated qty from the array and put them into the database row. Keeping in mind this is dynamic.
On name.php when i print out $_POST i currently have this array structure:
Array
(
[product_name] => Array
(
[0] => test1
[1] => test2
[2] => test3
[3] => test4
)
[qty] => Array
(
[0] => 1
[1] => 2
[2] => 3
[3] => 4
)
[submit] => Submit
)
Im guessing I need to count the keys and then match them in the other dimension of the array. Just not sure if that is the best way or even how to do that.
You could use this
$productName = $_POST['productName'];
$qty = $_POST['qty']
foreach($productName as $key => $productName) {
$productQty = $qty[$key];
//Use your ORM (or whatever) to inster into DB
//$productName and $productQty
}
EDIT
Or, even better, you could user PHP's array_combine:
$productName = $_POST['productName'];
$qty = $_POST['qty']
$arryWithTotals = array_combine($productName, $qty);
foreach($arrayWithTotals as $productName => $productQty) {
//insert into DB
}
If you wish you can use like these way.
<html>
<head>
<title>Invoice Test</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<br />
<br />
<h2 align="center">Invoice Test</h2>
<div class="form-group">
<form name="submit" id="submit" action="name.php" method="POST">
<div class="table-responsive">
<table class="table table-bordered" id="dynamic_field">
<tr>
<td><?php
session_start();
if (isset($_SESSION["message"]) && !empty($_SESSION["message"])) {
echo $_SESSION["message"];
unset($_SESSION["message"]);
}
?></td>
<td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td>
<td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td>
<td><button type="button" name="add" id="add" class="btn btn-success">Add More</button></td>
</tr>
</table>
<input type="submit" name="submit" id="submit" class="btn btn-info" value="Submit" />
</div>
</form>
</div>
</div>
</body>
</html>
<script>
$(document).ready(function(){
var i=1;
$('#add').click(function(){
i++;
$('#dynamic_field').append('<tr id="row'+i+'"><td><input type="text" name="product_name[]" placeholder="Product Name" class="form-control name_list" /></td><td><input type="text" name="qty[]" placeholder="QTY" class="form-control name_list" /></td><td><button type="button" name="remove" id="'+i+'" class="btn btn-danger btn_remove">X</button></td></tr>');
});
$(document).on('click', '.btn_remove', function(){
var button_id = $(this).attr("id");
$('#row'+button_id+'').remove();
});
});
</script>
PHP
====
$data = $_POST['product_name'];
$data2 = $_POST['qty'];
$product_name = "'" . implode("','", array_values($data)) . "'";
$qty = "'" . implode("','", array_values($data2)) . "'";
$conn = mysql_connect("localhost", "root", "") or die("unable to connect Mysql");
mysql_select_db("Your DB Name called here") or die("unable to connect DB");
$query = "INSERT INTO `Your DB Name called here`.`Your Table Name called here` (`id`, `product_name`,`qty` ) VALUES (NULL, '$product_name', '$qty')";
if (mysql_query($query)) {
$_SESSION["message"] = "Successfully submitted";
}
header("location:your page name.php");
I wish can pass the value of getvenueurl to another php named map.php .
I use input type hidden to to echo in current page:
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
and I wish when i click the button <a href="map.php" target="_blank"><input type="button" class="button" value="MAP" style="width:100px;"> in map.php show the correct value of getvenueurl.
In current page:
<?php
$read_venue = mysql_query("select * from venue where theme_name = '$title'");
while($show_venue = mysql_fetch_array($read_venue))
{
?>
<form method="post" action="#tab5">
<center><table border="1" class="venuetb">
<tr>
<input type="hidden" name="getvenue" value="<?php echo $show_venue['venue']; ?>"/>
<input type="hidden" name="getvenueprice" value="<?php echo $show_venue['price']; ?>"/>
<input type="hidden" name="getvenueurl" value="<?php echo $show_venue['url']; ?>"/>
<td style="width:20%;"><center><div class="imgvenue"><img src="<?php echo 'venueimg/'.$show_venue['venueimg']; ?>" /></div></center></td>
<td ><center><div class="bine"><?php echo $show_venue['venue']; ?> - RM <?php echo $show_venue['price']; ?></div></center></br>
<div class="dv"><p> <b>Address : </b><?php echo $show_venue['address']; ?></p>
<p> <b>Detail : </b><?php echo $show_venue['detail']; ?></p>
<b> Contact No: </b><?php echo $show_venue['contact']; ?></div>
</td>
<td style="width:20%;">
<center><input type="button" class="button" value="MAP" style="width:100px;">
<input type="submit" class="button" style="width:100px;" value="CHOOSE" name="choose_venue"></center>
</td>
</tr>
</table></center><br>
</form>
<?php
$_SESSION['theurl'] = $show_venue['url'];
}
?>
<?php
if(isset($_POST['choose_venue']))
{
$getvenue = $_POST['getvenue'];
$getvenueprice = $_POST['getvenueprice'];
$savevenue = mysql_query("insert into selectvenue(user,title,venuename,venueprice) values('$username','$title','$getvenue','$getvenueprice')");
if($savevenue)
{
echo"<center>$getvenue save.</center>";
}
else
{
echo "Failed.";
}
}
?>
</div>
I have try to use session to pass the value of getvenueurl but seen it is failed, because it will only show the last column value for all output that in while loop.
In map.php:
<table class="mapping">
<tr>
<td>
<?php
$theurl = $_SESSION['theurl'];
echo $theurl;?>
</td>
</tr>
</table>
How can I get the correct value to my map.php ?
u can pass value through anchor tag this way..i hope this will help u.
<input type="button" class="button" value="MAP" style="width:100px;">
Instead of
<input type="button" class="button" value="MAP" style="width:100px;">
write this code
<input type="button" class="button" onclick="submit_to_map()" value="MAP" style="width:100px;">
Then place this javascript code on the page.
<script type="text/javascript">
function submit_to_map() {
var form = document.getElementById("form-id");
form.action = "map.php";
form.submit();
}
</script>
Then you can get the value of all elements with $_POST[] inside the form from map.php. Hope this will help you
Confirm you have <?php session_start(); ?> on beginning of each page !
I have button click event in html page where I am calling a PHP file. inside the php I have two div where I want to show hide according to the check box I have ...
now it shows two check box and the show div. but i want load the show div only if user checks the first check box how can i achieve this? pls help.here the PHP Code
<div id="dialog_title">
<input type="checkbox" name="First" value="First">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show div">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
When the page is loaded hide the show div i named first_list_bx and give an id as first_chk_bx to first check box like:
<input type="checkbox" name="First" value="First" id="first_chk_bx">
<div id="first_list_bx" style="display:none;">
//code
</div>
Then use jquery for detecting checkin of checkbox and show the first_list_bx like:
$('#first_chk_bx').click(function() {
if($(this).is(":checked")){
$("#first_list_bx").show();
}
else{
$("#first_list_bx").hide();
}
});
This is what you expecting?
$(document).ready(function() {
$('#Show').hide();
$("input[name=First]").click(function () {
$('#Show').toggle();
});
});
It's done in JQuery. Find Demo
Note: Change <div id="Show div"> to <div id="Show">
as you tagged your question with javascript try this js function in your html like this
HTML
<div id="dialog_title">
<input type="checkbox" name="First" value="First" onclick="javascript:show_hide(this, 'Show_div')">
First List<br>
<input type="checkbox" name="Second" value="Second">Second
</div>
<div id="Show_div" style="display:none">
<table>
<tr>
<th> Name </th>
<th> Address </th>
</tr>
<?php
foreach ( $deviceArr as $device) {
$id = $device['id'];
$name = $device ['name'];
$Address = $device['address'];
?>
<tr class="font1">
<td> <input type="text" class="g_input_text" name="name[]" value="<?php echo $name; ?>" /> </td>
<td>
<input type="text" class="g_input_text" name="address[]" value="<?php echo $Address; ?>" />
<input type="hidden" name="id[]" value="<?php echo $id; ?>" />
</td>
</tr>
<?php
}
?>
</table>
</div>
JAVASCRIPT
<script>
function show_hide(my_obj, id)
{
var chk = my_obj.checked;
if(chk===true)
{
document.getElementById(id).style.display="block";
}
else
{
document.getElementById(id).style.display="none";
}
}
</script>
I love this script list.js from www.listjs.com. It seems to be the perfect fit for searching and filtering the output of a php file below, but I just can get it to work, I only need to add 7 or so lines of code but its not working. Can anyone tell me how come? Thanks
The code that I added is highlighted
<?php
defined('_JEXEC') or die();
?>
**<script type="text/javascript" src="list.js"></script>**
<form action="<?php echo CRoute::getURI(); ?>" method="post" id="jomsForm" name="jomsForm" class="community-form-validate">
<div class="jsProfileType" **id="jsProfileType"**>
**<input class="search" placeholder="Search" />
<button class="sort" data-sort="label">
Sort
</button>**
<ul class="unstyled">
<?php
foreach($profileTypes as $profile)
{
?>
<li class="space-12">
<label for="profile-<?php echo $profile->id;?>" class="radio">
<input id="profile-<?php echo $profile->id;?>" type="radio" value="<?php echo $profile->id;?>" name="profileType" <?php echo $default == $profile->id ? ' disabled CHECKED' :'';?> />
<strong class="bold"><?php echo $profile->name;?></strong>
</label>
<?php if( $profile->approvals ){?>
<span class="help-block"><?php echo JText::_('COM_COMMUNITY_REQUIRE_APPROVAL');?></span>
<?php } ?>
<span class="help-block">
<?php
$profile->description = JHTML::_('content.prepare',$profile->description);
echo $profile->description;?>
</span>
<?php if( $default == $profile->id ){?>
<em><?php echo JText::_('COM_COMMUNITY_ALREADY_USING_THIS_PROFILE_TYPE');?></em>
<?php } ?>
</li>
<?php
}
?>
</ul>
</div>
<?php if( (count($profileTypes) == 1 && $profileTypes[0]->id != $default) || count($profileTypes) > 1 ){?>
<div style="margin-top: 5px;">
<?php if( $showNotice ){ ?>
<span style="color: red;font-weight:700;"><?php echo JText::_('COM_COMMUNITY_NOTE');?>:</span>
<span><?php echo $message;?></span>
<?php } ?>
</div>
**<script>
var options = {
list: "space-12"
};
var userList = new List('jsProfileType', options);
</script>**
<table class="ccontentTable paramlist" cellspacing="1" cellpadding="0">
<tbody>
<tr>
<td class="paramlist_key" style="text-align:left">
<div id="cwin-wait" style="display:none;"></div>
<input class="btn btn-primary validateSubmit" type="submit" id="btnSubmit" value="<?php echo JText::_('COM_COMMUNITY_NEXT'); ?>" name="submit">
</td>
<td class="paramlist_value">
</td>
</tr>
</tbody>
</table>
<?php } ?>
<input type="hidden" name="id" value="0" />
<input type="hidden" name="gid" value="0" />
<input type="hidden" id="authenticate" name="authenticate" value="0" />
<input type="hidden" id="authkey" name="authkey" value="" />
</form>
I don't know PHP, but I have seen this error before when I used list.js in my own project. It turned out I didn't define things properly.
You did set up a div with a proper id, but you seem to be missing a 'list' class. Try changing
<ul class="unstyled">
to
<ul class="list">
Second, I don't think that 'list' is a supported keyword in options (at least not in the most recent list.js version). Try changing your options definition to
var options = {
valueNames: [ 'space-12' ]
};
Third, if you want search to work change
<button class="sort" data-sort="label">
to
<button class="sort" data-sort="space-12">