I have two input fields, one for sorting one for the radius.
I want it to work if I set the sortby it should save and resubmit with the order I've selected, and the radis would work the same way, without getting the two input fields messing up each other. Right now whatever I set for radius is go over by the sortby field, even it get posted as a value and displayed under the wrong input.
Someone please look it over and help me to solve this.
Thank you, I would really appreciate any help with this problem.
<head>
<meta charset="utf-8">
<title>Dropdown Menus</title>
<link rel="stylesheet" href="style.css">
<script src="jquery-1.8.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#shortby').val($(this).data('val'));
$('#order').submit();
});
});
$(document).ready(function($) {
$('ul li').on('click', function() {
$('input#radius').val($(this).data('val'));
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="index.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul>
<li data-val="10"> <a href="#" >10</a></li>
<li data-val="20"> <a href="#" >20</a></li>
<li data-val="30"> <a href="#" >30</a></li>
<li data-val="40"> <a href="#" >40</a></li>
<li data-val="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
See the problem is that you are setting the same data, i.e. val in both cases. Check the following
<script type="text/javascript">
$(document).ready(function($) {
$('input#shortby').val(<?php echo (isset($_POST['shortby'])) ? json_encode($_POST['shortby']) : ''; ?>);
$('input#radius').val(<?php echo (isset($_POST['radius'])) ? json_encode($_POST['radius']) : ''; ?>);
$('ul li').on('click', function() {
var shortbyVal, radiusVal;
if($(this).data('val') === undefined){
radiusVal = $(this).data('val2');
shortbyVal = $('input#shortby').val();
}
else if($(this).data('val2') === undefined){
shortbyVal = $(this).data('val');
radiusVal = $('input#radius').val();
}$('input#shortby').val(shortbyVal);
$('input#radius').val(radiusVal);
$('#order').submit();
});
});
</script>
</head>
<body>
<?php
echo "POST VALUE: ". $_POST['shortby'];
echo "POST VALUE: ". $_POST['radius'];
?>
<form action="1.php" method="post" id="order">
<input id="shortby" type="hidden" value="" name="shortby">
<section class="container">
<div class="dropdown">
<div>Sort By: <?php echo $_POST['shortby']; ?>
<ul>
<li data-val="Featured" ><a href="#" >Featured</a></li>
<li data-val="Name" ><a href="#" >Name</a></li>
<li data-val="Price (Highest)"><a href="#" >Price (Highest)</a></li>
<li data-val="Price (Lowest)" ><a href="#" >Price (Lowest)</a></li>
</ul>
</div>
</div>
</section>
<br>
<br>
<br>
<br>
<input id="radius" type="hidden" value="" name="radius">
<section class="container">
<div class="dropdown">
<div>Radius: <?php echo $_POST['radius']; ?>
<ul> <!-- Observe the change in data-val to data-val2 -->
<li data-val2="10"> <a href="#" >10</a></li>
<li data-val2="20"> <a href="#" >20</a></li>
<li data-val2="30"> <a href="#" >30</a></li>
<li data-val2="40"> <a href="#" >40</a></li>
<li data-val2="50"> <a href="#" >50</a></li>
</ul>
</div>
</div>
</section>
</form>
This should be a good workaround for that
Related
On a click on the image I have to show a hidden div with effects such as scroll down automatically to the bottom
my code looks like:
$(document).ready(function() {
$('#test').click(function() {
$('.contact-form').toggle("100");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="contact" status="closed">
<div class="container-fluid">
<div class="row">
<div class="col-xs-12">
<div class="contact-nav"></div>
<div class="contact-form-trigger open" id="test">
<img src="<?php echo base_url('assets/images/dugh1.png')?>" class="doug img-resfponsive hidden-xs" alt="Doug the man!">
</div>
</div>
</div>
</div>
<div class="color-div"></div>
<div class="contact-form " style="display: none;">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="address">
<div class="address-div">
<h3>Address</h3>
<h5><?php echo $company[1]->content; ?>
</h5>
<h5>Phone: <?php echo $company[2]->content; ?></h5>
<a href="#">
<?php echo $company[3]->content; ?></a>
</div>
<div class="social-icons">
<h4>follow us</h4>
<ul class="list-inline">
<li><a class="social-icon" href="<?php echo $company[7]->content; ?>"><i class="fa fa-facebook"></i></a>
</li>
<li><a class="social-icon" href="<?php echo $company[8]->content; ?>"><i class="fa fa-twitter"></i></a>
</li>
<li><a class="social-icon" href="<?php echo $company[9]->content; ?>"><i class="fa fa-linkedin"></i></a>
</li>
<li><a class="social-icon" href="<?php echo $company[10]->content; ?>"><i class="fa fa-dribbble"></i></a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
By using this script i can show the hidden div but it not scrolling down automatically.Now my need is to make it possible scroll down automatically when clicked on the image dugh1.png to show hidden div. what should I have to done for making that possible. I am very new to java script. Thanking in advance.
you could try doing something like this mate
$(document).ready(function() {
$('#test').click(function() {
$('.contact-form').toggle("100");
$('html, body').animate({
scrollTop: $('footer').offset().top
}, 'slow');
});
});
or check this just customize it to your needs.
var objDiv = document.getElementById("your_div");
objDiv.scrollTop = objDiv.scrollHeight;
you can use this snippet
I have body of the html inside php tags and i want onclick() to work but i want jquery to handle it. I tried to select the id and then use .on() method of jquery but it doesn't seem to work
So here's my php code
<body>
<?php
$home=
"<div class='heading' >
<p><b>blah blah blah</b></p>
</div>
<div class='menu-wrap'>
<nav class='menu'>
<ul class='clearfix'>
<li><a href='./member.php'>$username's Home</a></li>
<li>
<a >States <span class='arrow'>▼</span></a>
<ul class='sub-menu'>
<li><a onclick='changeAllStatesToFalse();'>ALL APPLIANCES OFF</a></li>
<li><a onclick='changeAllStatesToTrue();'>ALL APPLIANCES ON</a></li>
<li><a onclick='getStates();'>GET STATES</a></li>
</ul>
</li>
<li><a href='./security.php?userid=$username'>Security</a></li>
<li><a >About me</a></li>
<li><a href='./logout.php'>Logout</a></li>
</ul>
</nav>
</div>
<!3 Toggle Buttons start>
<div class='buttonsArea'>
<div class='display'>
<label class='label toggle'>
App-1
<input type='checkbox' class='toggle_input' id='button1' onclick='updateTable(1);'/>
<div class='toggle-control'></div>
</label>
</div>
<div class='display'>
<label class='label toggle'>
App-2
<input type='checkbox' class='toggle_input' id='button2' onclick='updateTable(2);'/>
<div class='toggle-control'></div>
</label>
</div>
<div class='display'>
<label class='label toggle'>
App-3
<input type='checkbox' class='toggle_input' id='button3' onclick='updateTable(3);' />
<div class='toggle-control'></div>
</label>
</div>
</div>
<!3 Toggle Buttons end>";
if($username && $userid){
echo "$home";
if($errormsg)
echo "<script type='text/javascript'>alert('$errormsg');</script>";
}
else{
header('Location:http://'.$raspiIp.'/EHDLOGIN_rpi/login.php');
echo "<script type='text/javascript'>alert('Please Login');</script>";
}
?>
</body>
And this is what i want alert when clicked on button with id:button1
So i am doing:
$("#button1").on("click",function(){
alert(1);
});
But this is not giving me any alert.
Plz help
You are creating the elements dynamically so you need to register the event in the DOM so that as soon as the element is available, register the click event handler.
$(document).on('click','#button1',function()
{
alert();
});
http://jsfiddle.net/j6um1sq2/2/
I had 3 .php files, they are index.php, load_file.php,and register.php
In index.php, contain navigation, and each navigation has dropdown list, i call this navigation and the dropdown from database. and also index.php has link to register.php, note : load_file.php included in this file
In load_file.php, contain code to check value of page, by using if($_GET['page']),and trigger every value with switch-case
register.php, just a normal form
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
::UPDATE::
this is my index.php file
<?php
session_start();
require_once './model/functions.php';
if(isset($_GET["category"])){
$index_page= $_GET["category"];
$index_sub_page= null;
}elseif (isset ($_GET["sub_category"])) {
$index_sub_page = $_GET["sub_category"];
$index_page= null;
}else{
$index_sub_page= null;
$index_page= null;
}
if($_POST){
$username = $_POST["username"];
$password = $_POST["password"];
if(check_username_and_password_from_users($username, $password)){
$_SESSION["username"] = $username;
}
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Learn Bootstrap</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
</head>
<body>
<div id="TopContainer" class="container">
<div class="pull-right navbar-default">
<ul class="nav navbar-nav">
<?php if(isset($_SESSION["username"])){ ?>
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"><?php echo $_SESSION["username"]; ?></a>
<div class="dropdown-menu" style="padding: 17px;">
Logout
</div>
</li>
<?php }else{ ?>
<!--dropdown here -->
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown" id="login">Dropdown</a>
<div class="dropdown-menu" style="padding:17px;">
<form id="loginform" method="post" action="index.php" class="form">
<div class="form-group">
<input class="form-control" type="text" name="username" id="username" placeholder="username">
</div>
<div class="form-group">
<input class="form-control" type="password" name="password" id="password" placeholder="password">
</div>
<input type="submit" value="Submit">
</form>
</div>
</li>
<li>Register</li>
<?php } ?>
<li>FAQs</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
</div>
<div id="logo" class="container">
<div class="col-md-6">
<a class="navbar no-margin" href="#"><img src="picture/LogoSaya.png"></a>
</div>
<div class="col-md-6">
<div class="col-md-6 pull-right">
<div class="input-group input-group-sm">
<span class="input-group-btn">
<button class="btn btn-default" type="button">Go!</button>
</span>
<input type="text" class="form-control" placeholder="Search for...">
</div>
</div>
</div>
</div>
<nav class="container">
<div class="navbar navbar-default">
<ul class="nav navbar-nav">
<?php
$subject_set = find_all_subjects();
while($subject = mysqli_fetch_assoc($subject_set)){
?>
<li>
<a id="dLabel" data-target="#" href="?subject=<?php echo urlencode($subject["id"]);?>" data-toggle="dropdown" aria-haspopup="true" role="button">
<?php echo $subject["name"];?>
<span class="caret"></span>
</a>
<!--dropdown here -->
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<?php
$page_set = find_pages_from_subjects($subject["id"]);
while($page = mysqli_fetch_assoc($page_set)){
?>
<li>
<?php echo $page["name"];?>
<ul>
<?php
$sub_page_set = find_sub_pages_from_pages($page["id"]);
while($sub_page = mysqli_fetch_assoc($sub_page_set)){
?>
<li>
<?php echo $sub_page["name"];?>
</li>
<?php
}
clear_result($sub_page_set);
?>
</ul>
</li>
<?php
}
clear_result($page_set);
?>
</ul>
</li>
<?php
}
clear_result($subject_set);
?>
</ul>
</div>
</nav>
<div class="container">
<?php
include "load_files.php"; //this is to load the files
?>
</div>
<script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
to navigate register.html, i use this code
<li>Register</li>
as you can see, i put code on below in index.php
<?php
include "load_files.php"; //this is to load file
?>
and this is my load_files.php
<?php
if($_GET){
switch ($_GET['page']) {
case 'register':
if(!file_exists("register.html")){
die("Sorry Empty Page");
}
include 'register.html';
break;
default:
break;
}
}
?>
Seems like an event handler issue. I'd look at how you are adding event handlers and see if the handler is getting wiped out somehow.
::SOLVED::
My problem is, after I navigate to register.php by typing ?page=register in browser, my dropdown in index.php file become unusable
this problem happen because, i had 2
<script src="jquery.js"></script>
, inside index.php and register.html .by remove the one inside register.html will solve the problem
I am trying to attach handler to dynamic created element I am doing this but it isn't work
custom1.js
$(document).ready(function(){
var kart=[];
var found=0;
$(".adTo").on("click",function(){
var name,quantity,price,temp;
name=$(this).parent().children(".name").html().toString();
price=$(this).parent().children(".price").html().toString().substring(2,this.length);
found=0;
temp=kart.length;
for(var i=0;i<kart.length;i++)
{
console.log(kart[i].name);
if((kart[i].name==name))
{
console.log("ni");
kart[i].quantity++;
$(".cartStatus").children("#"+name).children(".quantity").html("Quantity: "+kart[i].quantity);
kart.price=kart.price+parseInt(kart[i].price);
$("#totalCartA").html("Total Amount:"+kart.price);
found=1;
break;
}
}
if(found==0)
{
console.log("ni1");
kart[kart.length]={
"name":name,
"quantity":1,
"price":price
};
$("#cartStatus").append("<div id='"+name+"' class='cartItems mt8'><div class='lf'>"+(temp+1)+"</div><div class='lf mr10'>"+kart[temp].name+"</div><div id='"+name+"' class='reduction rf mr10'>Remove[x]</div><div class='clr bdr'></div><div class='lf quantity'>Quantity: "+kart[temp].quantity+"</div><div class='mr10 rf'>Price: "+kart[temp].price+"</div><div class='clr'></div></div>");
$("#totalCartP").html("Products:"+kart.length);
kart.price=kart.price+parseInt(kart[temp].price);
}
});
$(".reduction").on('click',function(){
console.log('nitin');
console.log($(this));
$(this).parent().remove();
kart.splice(temp, 1);
regenKart(1,temp);
});
function regenKart(howMany, indexFrm){
for(var i=indexFrm; i<(kart.length );i++)
{
kart[i].index=kart[i].index-howMany;
console.log('a');
}
}
});
and this is my view page...
<!DOCTYPE html>
<html>
<head>
<!--script src="/js/jquery.min.js"></script-->
<link rel="stylesheet" href="/css/ekart/style.css" type="text/css" media="all" />
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">EKART</div>
<ul class="menuLinks">
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
</ul>
<div class="clr"></div>
</div>
<!--div class="welComeBar">
<div class="lf mt5">
Welcome Shopper name
</div>
<div class="rf mt5">
<a class="logout" href="javascript:void(0);">Logout</a>
</div>
<div class="clr"></div>
</div-->
<div class="seacrhBar">
<div class="mt5">
<form id="user" action="/do/ekart/userindex/searchproduct/" method="POST" enctype="multipart/form-data">
<select name="category" name="category" id="category">
<option value="">Select your category...</option-->
<?php
foreach($result as $row)
{
echo "<option value='".$row['cat_name']."'> ".$row['cat_name']." </option>";
}
?></select>
<input type="text" value="" name="product" placeholder="Enter Product Name" />
<input type="submit" value="GO" />
</form>
</div>
<div class="clr"></div>
</div>
<div class="mainBody">
<div class="itemWrapper" style= <?php $visible="";echo "'display:".$visible.";'"?> >
<?php foreach($products as $row) { ?>
<div class="itemS">
<div class="name"><?php echo $row['Pro_name'];?></div>
<div class="image"><img src="data:image/jpeg;base64,<?php echo base64_encode($row['image']);?>" alt="No photo" height="100" width='145'/> </div>
<div class="price">Rs <?php echo $row['cost'];?></div>
<a class="adTo" href="javascript:void(0);">Add To Cart</a>
</div>
<?php }?>
</div>
<div id="cartStatus" class="cartStatus">
<div class="yourCart mt8">Your Cart</div>
<div class="yourCart mt8" id="totalCart"><span id="totalCartP">Products:0</span><span class="rf" id="totalCartA">Total Amount: 0</span></div>
<div class="cartStatus1"></div>
</div>
<div class="clr"></div>
</div>
<div class="footer">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Services</li>
<li>Feedback</li>
<li>Contact</li>
X </ul>
<div class="clr"></div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="/js/custom1.js"></script>
</body>
</html>
I am dynamically creating a division cartItems in which there is a subdivision with tag remove i want that when this tag is clicked the cartItem is automatically removed from cart list. I have assign reduction as class name to this division but found myself unable to attach this division with handler using this class name.I have also print "nitin" on console inside this handler to check weather handler is attached with remove tag or not but nothing gets printed on console.I dont know what to do now..
When using on() for dynamic elements, the syntax is
$("#cartStatus").on('click', '.reduction', function() { ...
where you pass in an element that exists at the time of binding the event, and where the second argument after the event is the selector to filter on.
I have this code I am trying to implement that calls a function
<body>
<nav id="menu">
<div id="app">
<ul class="List">
<li><span>Enter Number below</span></li>
<div id="coachid">
<input type="text" name="coachid" id="textbox1" value="22984">
</div>
<li><span>Fitness Programs</span>
<ul id="programs">
<li class="Label"> </li>
<li><span>10-Minute Trainer</span>
<ul id="10min">
<li class="Label"> </li>
<li><span>Base</span>
<ul id="10minBase">
<li class="Label"> </li>
<label for="basic">Text Input:</label>
<input type="hidden" name="basic" id="basic" value="10MinTrainer"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="10min">
<li class="Label"> </li>
<input type="hidden" name="basic1" id="basic1" value="TMT"/>
<button id="getWebSite">Open Website</button><br/>
</ul>
</li>
<li><span>Deluxe</span>
<ul id="Deluxe">
<li class="Label"> </li><input type="hidden" name="basic3" id="basic3" value="TMTUpgrade"/>
<button id="getWebSite">Open Website</button><br/>
<ul>
</li>
</ul>
</li>
</li>
<ul>
</li>
</ul>
</div>
</nav>
</body>
and here is the function
$(function() {
$('#getWebSite').unbind().click(function(){
goUrl = 'http://www.example.com/' + $("#basic").val() + '?referringRepId=' + $("#textbox1").val();
window.location = goUrl;
});
});
I am trying to call the function multiple times throughout the code to redirect the button to a site based on info held within the html. Is this possible?
You need to name your function, apply a class to those elements that should have the click handler, and create the click function:
<button class="myClass">
$(function () {
function doSomething() {
goUrl = 'http://www.example.com/'
+ $("#basic").val()
+ '?referringRepId='
+ $("#textbox1").val();
window.location = goUrl;
}
$('.myClass').unbind().click(function () {
doSomething();
});
});