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>
Related
I´m doing an e-commerce web and i want to the quantity section changes when you click out of the input, i did it, but the problem is i had used a js function with "getElementById" and it works but if i add more than 1 product the id only works in 1 form (obviusly), but when i use "getElementsByClassName"
nothings happens and chrome console say "Uncaught TypeError: document.getElementsByClassName(...).submit is not a function at CantCartUpdate (cart.php:144:51) at HTMLInputElement.onblur (cart.php:110:139)" and i dont know what to do
part of my code:
<tbody>
<?php
for($i=0;$i<=count($myCart)-1;$i++){
if(isset($myCart[$i])){
if($myCart[$i]!=NULL){?>
<tr>
<td class="product-image">
<img src="<?php echo $myCart[$i]['imagen']?>" alt="<?php echo $myCart[$i]['nombre']?>">
</td>
<td class="product-name">
<h2 class="name"><?php echo $myCart[$i]['nombre']?></h2>
</td>
<td class="product-price"><h2 class="precio">$<?php echo number_format($myCart[$i]['precio'], 0, ',', '.') ; ?></h2></td>
<td class="product-quantity">
<form action="backend/cartActions.php" class="formCant" method="post">
<div class="cantidad">
<div class="cantidad-container">
<input type="hidden" name="id" value="<?php echo $i; ?>">
<input type="number" class="nro updateCant" min="1" name="cantidad" onblur="CantCartUpdate()" value="<?php echo $myCart[$i]['cantidad'];?>">
<input type="submit" class="sbm">
</div>
</div>
</form>
</td>
js (it is in the same file):
<script type="text/javascript">
function CantCartUpdate () {
document.getElementsByClassName("formCant").submit();
}
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. :)
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 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">
I'm trying for the life of me to show a hidden field in a form with a specific input (numbers 4 and higher).
JS:
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
HTML:
<tr valign="top">
<td <? if(strstr($Error,"intern_openings")){ ?> class="error" <? } ?>>*Number of Interns/<br>Available positions:</td>
<td colspan="2"><input type="text" name="intern_openings" size="3" maxlength="3" value="<?=$intern_openings?>" onkeyup="javascript:showStuff('supervisorname')"><br />
<div id="supervisorname" style="display:none;">
<br />
Names of intern supervisors (employer staff):<br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>><br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>><br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>><br />
<input type="text" name="supervisor[]" value="<?=$supervisor?>" <? if(strstr($supervisorList)){ ?> <? } ?>>
</div>
</td>
</tr>
Any insight would be totally radical.