Guys Here is the checkboxes, where it displays in tree structure. I need it to be displayed inside the dropdown.
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.team').on('click',function(){
if($(this).is(':checked')){
$(this).next().next().show();
}else{
$(this).next().next().hide();
}
});
});
</script>
</head>
<body>
<form name="FootballClubs">
<input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
<input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
<input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
</div>
<input type="checkbox" class="team" value="ManCity"/>Man City<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
<input type="checkbox" class="player" value="SM"/>Super Mario<br />
</div>
</form>
</body>
</html>
I am trying to populate inside a dropdown. Help me.
Thanks in Advance.!!
Look at jquery UI widget and jSTree
Related
I'm using the script below to automatically add new lines in a form, but I do not see how to retrieve the values of each field under PHP with $_POST.
If someone has already had this problem with a table in a form, thank you for helping me!
what procedure to retrieve in test5.php the values of the fields.
I do not know how to get an array in a $_POST
thank you in advance
Here is my script
<html>
<head>
</head>
<body>
<form action="test5.php" method="post">
<div id="address">
<div id="1" name="address[]">
<input id="mail" type="text" />
<input id="type" type="text" />
<input id="comment" type="text" />
×
</div>
</div>
<input id="add_address" type="button" value="Ajouter" />
<input type="submit" value="Create PDF" />
</form>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$('#add_address').click(function(event) {
var lastDiv = $('#address > div').last();
var id = parseInt(lastDiv.attr("id")) + 1;
(lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
return false;
});
$('body').on('click', '.removeclass', function(event) {
$(this).parent().remove();
return false;
})
</script>
</body>
</html>
1.) Remove the name-attribute from the div-element
2.) Build your input-elements like:
<div id="..">
<input type="..." name="address[1][mail]" />
<input type="..." name="address[1][type]" />
<input type="..." name="address[1][comment]" />
</div>
<div id="..">
<input type="..." name="address[2][mail]" />
<input type="..." name="address[2][type]" />
<input type="..." name="address[2][comment]" />
</div>
I modified my script as below and in test5.php, I can view the data with this script.
<? Php
// print_r ($ _ POST);
echo $ _POST ['mail'] [2];
?>
Thanks
-------------test5.php-------------
<div id="address">
<div id="1">
<input type="text" name="mail[]" />
<input type="text" name="type[]" />
<input type="text" name="comment[]" />
</div>
</div>
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script>
function c(){}
function test(){
if(document["f1"]["chkGuar"].checked){
document.getElementById("myrow").style.visibility="visible"
}
else{
document.getElementById("myrow").style.visibility="hidden"
}
}
</script>
</HEAD>
<BODY>
<FORM NAME="f1">
<input type="checkbox" name="chkGuar" value="ON" onclick = "c() ; test()">
<div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20"></div>
<div width="338" align="left" colspan="3" height="12"></div>
</FORM>
</BODY>
</HTML>
Here in this code, the text box opens in the same page but I want my text box to be displayed in another page (usually in the action page). I am working in a bus website, I want, when an user checks a checkbox (1 or more) to select a seat, I want that no of text boxes to be opened in the next page after the check boxes checked.
Here is the code you want. check it and let me know.
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
</HEAD>
<BODY>
<FORM NAME="f1" action="next_page.php" method="post">
<input type="checkbox" name="chkGuar[]" value="mike"> Mike<br />
<input type="checkbox" name="chkGuar[]" value="joy"> Joy<br />
<input type="checkbox" name="chkGuar[]" value="harry"> harry<br />
<input type="checkbox" name="chkGuar[]" value="watson"> watson<br />
<input type="checkbox" name="chkGuar[]" value="george"> george<br />
<input type="checkbox" name="chkGuar[]" value="peter"> Peter<br />
<input type="submit" name="chksbmt" value="Send" />
<!-- <div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20">
</div>
<div width="338" align="left" colspan="3" height="12"></div> !-->
</FORM>
</BODY>
</HTML>
next_page.php
<?php
if(isset($_POST['chksbmt'])){
$counts = count($_POST['chkGuar']);
echo "this is the next page. you checked $counts checkbox <br /><br />";
for($i=1;$i<=$counts;$i++){
echo "<input type='text' style='border:1px solid #000;' value='your text box here'
/><br/><br/>";
}
}
Hi this is code like your requirement try it
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
function c(){
alert("Hi");
this.f1.submit();
}
function test(){
if(document["f1"]["chkGuar"].checked){
document.getElementById("myrow").style.visibility="visible"
}
else{
document.getElementById("myrow").style.visibility="hidden"
}
}
</script>
</HEAD>
<BODY>
<FORM NAME="f1" action="next_page.php" method="post">
<input type="checkbox" name="chkGuar" value="ON" onclick = "c() ; test()">
<!-- <div id="myrow" style="visibility:hidden">
<input type = text name ='txtGRTNo' tabindex = 19 size="20">
</div>
<div width="338" align="left" colspan="3" height="12"></div> !-->
</FORM>
</BODY>
</HTML>
next_page.php
<?php
if(isset($_POST['chkGuar'])){
echo "this is the next page. <br />";
echo "<input type='text' style='border:1px solid #000;' value='your text box here' />";
}
You have to create a second page that get the request.
On the first one, make your for to post to the second path (action and method attributs that are missing in your code).
And then display in the textbox in the second page the content you want from the first one, based on the checkbox checked.
This is the way I see.
I have a file called form.php and when I upload it to my server, that supports php, the form keeps on repeating and never executes the php code. I uploaded it at http://davidjahn.info/DavidJahnNet/form.php
<?php
$age=$_POST["age"];
echo $age;
?>
<html>
<head>
<title>Survey</title>
<style type="text/css">
.welcome {
color: #FFFFFF;
text-align: center;
background-color:red;
font-weight:bold;
height: 50px;
}
</style>
</head>
<body>
<table style="height: 232px; width: 500px">
<form method="post" id="survey" action="form.php">
<tr>
<td>
<div class="welcome"><br>Welcome!</div>
</td>
</tr>
<tr>
<td>
<ul>
<br>
<br>
<div id="question1" style="display: inline;">
<h3>
Are You 30+ Years Old?
</h3>
<div style="height: 10px"></div>
<input type="button" name="age" value="Yes" onclick="document.getElementById('question1').style.display='none';document.getElementById('question2').style.display='inline';">
<input type="button" name="age" value="No" onclick="document.getElementById('question1').style.display='none';document.getElementById('question2').style.display='inline';">
</div>
<div id="question2" style="display: none;">
<h3>
Are You Looking for a Date?
</h3>
<div style="height: 10px"></div>
<input type="button" name="date" value="Yes" onclick="document.getElementById('question2').style.display='none';document.getElementById('question3').style.display='inline';">
<input type="button" name="date" value="No" onclick="document.getElementById('question2').style.display='none';document.getElementById('question3').style.display='inline';">
</div>
<div id="question3" style="display: none;">
<h3>
Which Girl Is Your Type?
</h3>
<div style="height: 10px"></div>
<input type="image" src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834" alt="Submit" width="100px" value="type1" />
<input type="image" src="http://jenntgrace.com/wp-content/uploads/2012/12/2.png" alt="Submit" width="100px" value="type2" />
<input type="image" src="http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg" alt="Submit" width="100px" value="type3" />
<input type="image" src="http://4.bp.blogspot.com/-wY_qFr2pcAs/UCxhAayJ6oI/AAAAAAAAC6w/PgtLs2O_4g8/s1600/4.png" alt="Submit" width="100px" value="type4" />
</div>
</ul>
</td>
</tr>
</form>
</table>
</body>
</html>
PHP is a server-side language. You need a server running PHP to write PHP pages. You can't simply save them and open them in your browser.
Look into something like XAMPP which will get you up-and-running quickly with a development environment.
Are you testing this on localhost ? I think you don't have WAMP installed and you are trying to view .php file without php server & you must know that php is server side language. Install EasyPHP and then you will be able to run .php
http://www.easyphp.org/
You should use buttons for submitting. I have edited your code to do the following:
buttons that have cover images of the four types
hidden values to represent age, date
Code:
<?php
if (isset($_POST['age'])) {
$age=$_POST["age"];
echo $age;
}
?>
<html>
<head>
<title>Survey</title>
<style type="text/css">
.welcome {
color: #FFFFFF;
text-align: center;
background-color:red;
font-weight:bold;
height: 50px;
}
.type1 {
background-image: url(http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834);
}
.type2 {
background-image: url(http://jenntgrace.com/wp-content/uploads/2012/12/2.png);
}
.type3 {
background-image: url(http://3.bp.blogspot.com/-Q_owQUxNjdQ/Te3ALCmT3oI/AAAAAAAAAnk/wv9r0b0MT-g/s1600/600px-MA_Route_3.svg_.jpg);
}
.type4 {
background-image: url(http://4.bp.blogspot.com/-wY_qFr2pcAs/UCxhAayJ6oI/AAAAAAAAC6w/PgtLs2O_4g8/s1600/4.png);
}
input[type=submit]{
border: none;
width: 100px;
height: 100px;
background-size:cover;
}
</style>
</head>
<body>
<table style="height: 232px; width: 500px">
<form method="post" id="survey" action="form.php">
<input type="hidden" name="age" id="age">
<input type="hidden" name="date" id="date">
<tr>
<td>
<div class="welcome"><br>Welcome!</div>
</td>
</tr>
<tr>
<td>
<ul>
<br>
<br>
<div id="question1" style="display: inline;">
<h3>
Are You 30+ Years Old?
</h3>
<div style="height: 10px"></div>
<input type="button" value="Yes" onclick="document.getElementById('question1').style.display='none';document.getElementById('question2').style.display='inline';document.getElementById('age').value='Yes'">
<input type="button" value="No" onclick="document.getElementById('question1').style.display='none';document.getElementById('question2').style.display='inline';document.getElementById('age').value='No'">
</div>
<div id="question2" style="display: none;">
<h3>
Are You Looking for a Date?
</h3>
<div style="height: 10px"></div>
<input type="button" value="Yes" onclick="document.getElementById('question2').style.display='none';document.getElementById('question3').style.display='inline';document.getElementById('date').value='Yes'">
<input type="button" name="date" value="No" onclick="document.getElementById('question2').style.display='none';document.getElementById('question3').style.display='inline';document.getElementById('date').value='No'">
</div>
<div id="question3" style="display: none;">
<h3>
Which Girl Is Your Type?
</h3>
<div style="height: 10px"></div>
<input type="submit" value="1" class="type1" name="type" />
<input type="submit" value="2" class="type2" name="type" />
<input type="submit" value="3" class="type3" name="type" />
<input type="submit" value="4" class="type4" name="type" />
</div>
</ul>
</td>
</tr>
</form>
</table>
</body>
</html>
Make sure you are running your code on a localhost server because PHP only works on server side not client side.
If you are running it correctly use this for better practice:
if(isset($_POST['age'])){
$age=$_POST["age"];
echo $age;
}
Your Javascript and HTML doesn't make much sense if you are looking for the age field.
The age elements that you have are two buttons.
You could solve this by using <input type="hidden" name="age" value=""> and then modifying the value of this using Javascript, when the user clicks your buttons (if you do this, change the name attribute of your buttons).
OR you could solve it by replacing the buttons with radio buttons.
Simply replace <input type="button" name="age" ...
with <input type="radio" name="age" ...>
I'm not sure what you're trying to say. Could you elaborate a bit more?
On the other hand, by taking a rough guess, it could be your browser. Try add
<!DOCTYPE html>
above
<html>
EDIT: If you're talking about PHP printing rather than doing what it's meant to do. Well just to let you know, PHP is a server side scripting language. It needs to be processed via PHP engine. Are you on a shared web host or did you setup your own server?
I was working on creating checkbox inside checkbox which all should appear inside a dropdownlist box. I was succeeded in creating a couple of checkboxes inside a dropdownlist box. follow the link http://vignesh.gvignesh.org/metroplots/drp/drpcheck.php
Now i am trying to create a checkbox which should appear once user clicks one checkbox. For instance if user checks documents then a couple of checkbox should appear below that checkbox.
Eg. []Documents (if user checks main, the sub checkboxes should appear)
[]Doc 1
[]Doc 2
[]Doc 3
[]Phots (if user checks)
[]photo 1
[]photo 2
[]photo 3
How to attain this through javascript or jquery.
Thanks in Advance. !!
There are different ways to do this. This is what I have done:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.team').on('click',function(){
if($(this).is(':checked')){
$(this).next().next().show();
}else{
$(this).next().next().hide();
}
});
});
</script>
</head>
<body>
<form name="FootballClubs">
<input type="checkbox" class="team" value="RealMadrid"/>Real Madrid<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="CR"/>Cristiano Ronaldo<br />
<input type="checkbox" class="player" value="SA"/>Shabi Alanso<br />
<input type="checkbox" class="player" value="IC"/>Iker Casillias<br />
</div>
<input type="checkbox" class="team" value="ManCity"/>Man City<br />
<div style="padding:10px 10px 10px 15px;display:none;">
<input type="checkbox" class="player" value="SA"/>Sergio Aguero<br />
<input type="checkbox" class="player" value="SM"/>Super Mario<br />
</div>
</form>
</body>
</html>
This is fully working example. Also, you can unchecked the checked elements, when they are hidden again.
I am building a image gallery where, you can filter images by city, category and gender.
The problem I am faced with is how to update the results live (real-time).
The logic I apply is:
Select a filter criteria, click on a radio button.
Send query via jQuery AJAX to a PHP script that runs a MySQL query and returns HTML.
It works, but is largely clunky.
once I select the city, I have to select gender, and then city again to get results.
I know the problem lies in the way I run the MySQL. I need your guidance here.
Code for the gallery.php file:
<html>
<head>
<title>EQUIMATIC GALLERY</title>
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="jcarousel.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="jcarousel.css">
<script>
function displayFullImage(link)
{
//alert(link);
$("#currentlystaged").attr('src', link);
}
$(document).ready(function(){
$('#thumbs').jcarousel({
vertical: true,
scroll: 13
});
//first load
$.ajax({
type:"POST",
url:"sortbystate.php",
data:"city=new york&gender=m&category=",
success:function(data){
//alert("whoa, careful there!");
$('#thumbs').html(data);
}
});//end ajax
// normal operation
$(".statelist :input").click(function(){
var state = $('.statelist input:checked').attr('value');
var gender = $('.gender input:checked').attr('value');
var category =$('.category input:checked').attr('value');
$.ajax({
type:"POST",
url:"sortbystate.php",
data:"city="+state+"&gender="+gender+"&category="+category,
success:function(data){
//alert("whoa, careful there!");
$('#thumbs').html(data);
}
});//end ajax
});
});
</script>
</head>
<body>
<?php include 'conndb.php';?>
<div class="container">
<div class="sublogo"><img src="images/galogo.png"></div>
<div class="sidebaropen">
<div class="statelist">
SORT ENTRIES BY:<br/>
<h2>01 LOCATION </h2>
<input type="radio" value="New York" name="state" /> NYC <br>
<input type="radio" value="Los Angeles" name="state" /> Los Angeles <br>
<input type="radio" value="San Francisco" name="state" /> San Francisco <br>
<input type="radio" value="Chicago" name="state" /> Chicago <br>
<input type="radio" value="Miami" name="state" /> Miami <br>
<input type="radio" value="Texas" name="state" /> Dallas <br>
<input type="radio" value="District of Columbia" name="state" /> DC <br>
<input type="radio" value="Boston" name="state" /> Boston <br>
</div><!-- state list -->
<div class="gender">
<h2>02 GENDER </h2>
<input type="radio" value="m" name="gender" /> Male <br>
<input type="radio" value="f" name="gender" /> Female <br>
</div>
<div class="category">
<h2>03 CATEGORY </h2>
<input type="radio" value="balance" name="category" /> Balance <br>
<input type="radio" value="confidence" name="category" /> Confidence <br>
</div>
</div>
<div class="staging">
<img src="http://www.byequinox.com/equinox_images/24447ddec24d22102eebf8a0a1d14e87.jpg" id="currentlystaged" />
</div>
<div id="results">
<ul id=thumbs class='jcarousel jcarousel-skin-tango' style='width:250px; list-style:none; height:400px' >
</ul>
</div>
</div>
</div>
</body>
</html>
Code for the sort by State:
<?php
include "conndb.php";
$city = $_POST['city'];
$gender = $_POST['gender'];
$category = $_POST['category'];
$filter_query= "SELECT * FROM equinox where city LIKE CONVERT( _utf8 '$city' USING latin1 ) AND gender = '$gender'";
$filter_result = mysql_query($filter_query);
while($filter_row= mysql_fetch_array($filter_result))
{
$link = $filter_row['link'];
echo("<a href=# >");
echo("<li style='width:60px; margin:0 10px 0 35px; float:left;'><img src=".$filter_row['link']." width=100 border=0 onclick=displayFullImage('$link'); > </a></li>");
//echo($filter_result);
}
?>
THE LINK FOR THE ACTUAL WORKING GALLERY: http://rjwcollective.com/equinox/rishi_gallery/eqgall.php
The problem is that you're only updating the photos when the city is chosen. Extract the photo retrieving functionality into its own function then call that function from the click event on all 3 radios