I want to create checkbox filter for search. For example, I searching about sunglass. At result page, sunglasses are from all of brands, and search URL is:
http://www.my-site.com/?s=sunglass
when I check the Rayban, I want to add some parameters like &brand=rayban at end of this url. Like:
http://www.my-site.com/?s=sunglass&brand=rayban
And when unchecking it, URL back to original state ?s=sunglass.
HTML code is:
<input type="checkbox" name="brand" value="rayban"/>
jQuery code is:
$('input[type="checkbox"]').on('change', function(e){
var data = [],
loc = $('<a>', {href:window.location})[0];
$('input[type="checkbox"]').each(function(i){
if(this.checked){
data.push(this.name+'='+this.value);
}
});
data = data.join('&');
if(history.pushState){
history.pushState(null, null, loc.pathname+'?'+data);
location.reload();
}
Any idea?
You can try with something like this.Hope this will help.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<link rel="stylesheet" href="style.css" />
<script data-require="jquery" data-semver="3.0.0" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.js"></script>
<script>
$(function(){
$('input[type="checkbox"]').on('change', function(e){
var loc = location.href;
loc = loc.split("&")[0]; // to get the URL till /?s=sunglass
$('input[type="checkbox"]').each(function(i){
if(this.checked){
loc += "&" + $(this).attr("name") + "=" + $(this).attr("value");
}
});
location.href = loc;
});
});
</script>
</head>
<body>
<input type="checkbox" name="brand" value="rayban"/>
<input type="checkbox" name="brand" value="armani"/>
</body>
</html>
Related
I'm new to JS and i want to receive the value from a variable in JS, send it by post (or ajax) to a PHP file, and see the text display. The thing is i've been trying different ways to do it but i always get a undefined index in php.
My code is below
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRUEBA AJAX JS PHP HTML</title>
</head>
<body>
<H1>prueba</H1>
<input type="checkbox" name="switch" id="switch" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#switch").change(function ()
{
var checked=$("#switch").attr("checked");
if(checked)
{
$("switch").removeAttr("checked");
console.log("estado apagado switch 1");
var estados="1";
$.post("accion.php", {estado: "david"});
}else
{
$("#switch").attr("checked","checked");
console.log("estado encendido switch 1");
var estados="2";
$.post("accion.php", {estado: "david 2"});
}
});
</script>
</body>
</html>
accion.php
<?php
$est = $_POST['estado'];
echo $est;
if ($est=="david") {
echo "no mameees";
}else{
echo "no mameees no se puso ";
}
?>
Someone has any idea ?
$("#switch").change(function () {
var checked=$("#switch").prop("checked");
if(checked)
{
console.log(checked);
}else{
console.log(checked);
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
Switch <input type="checkbox" name="switch" id="switch" >
Use prop instead of attr to find checkbox is checked or not.
You can let php check if the checkbox was checked or not in a success callback from $.post:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PRUEBA AJAX JS PHP HTML</title>
</head>
<body>
<H1>prueba</H1>
<input type="checkbox" name="switch" id="switch" >
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#switch").change(function ()
{
var checkbox = $("#switch");
$.post("accion.php", {estado: checkbox.val()}, function(data){
$("h1").html(data);
});
});
</script>
</body>
</html>
accion.php
<?php
$checkbox = isset($_POST['estado']) && $_POST['estado'] == 'on'; // 'on' is the default checkbox value when you don't specify it in html
if ($checkbox) {
echo "it's been checked";
}else{
echo "it wasn't checked";
}
?>
PS: when working with ajax ( check out $.post options) i recommend using dataType: 'json' and your php should respond with a valid JSON, you have json_encode for that.
use
var checked = $('#switch').is(':checked');
instead of
var checked=$("#switch").attr("checked");
I am using a $.getJSON method to retrieve weather data from open weather. When i use an explicit URL string for the document ready function, I am able to retrieve the values from the response JSON and write them to the page.
This works fine.
I am attempting to create a basic user input to query the data by zip code. I've created a nested function with the API URL as a concatenated string. I am unable to determine why the code in the nested function submitZip is not writing the response to the page in the same way that the document ready function did.
I have tried debugging and it appears that the string is concatenating correctly and making the API call successfully, but for some reason I am unable retrieve data from the response. Any ideas on I may have incorrect here?
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip() {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
Your page gets reloaded as soon as you press the submit button.
Change the type of the button to button or
prevent the default behaviour using event.prevenDefault()
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
e.preventDefault();
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innertText = data.main.temp;
});
return weather;
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
Two issues:
The form is submitted (and reloads) when you click the button. Avoid this by calling e.preventDefault() on the event object.
You have a spelling mistake in weather.innertText. Remove the extra t in the middle
Working code:
var place = document.getElementById("meat");
var header = document.getElementById("header");
$(document).ready(function () {
$.getJSON("http://api.openweathermap.org/data/2.5/weather?zip=36830&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial", function (data) {
place.innerText = data.main.temp;
});
});
var weather = document.getElementById("Weather");
function submitZip(e) {
var zipCode = document.getElementById("Zip-Code");
var fullURL = "http://api.openweathermap.org/data/2.5/weather?zip=" + zipCode.value + "&APPID=75ed54453a6e806917cfa439b3fb1dd9&units=imperial";
$.getJSON(fullURL, function (data) {
//var currentTemp = api.main.temp;
weather.innerText = data.main.temp;
});
e.preventDefault();
};
var submitButton = document.getElementById("submit-zip");
submitButton.addEventListener('click', submitZip, false);
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<title>Weather</title>
</head>
<body>
<h2 id="header">This page will be utilitzed as practice for API</h2>
<p id="meat"></p>
<form>
<p>Enter the Zip Code to see the Weather there!</p>
<input id = "Zip-Code" type="text"/>
<input id = "submit-zip" type="submit"/>
</form>
<div>
<p id= "Weather"></p>
</div>
</body>
</html>
<script src="javascript/main.js"></script>
</body>
</html>
I want to assign a value to hidden input then grab that value from next section of javascript using input id. So it will alert the value as per hidden input value which assigned from the first section of javascript. However, it looks not useful this is important for my current task. I have to push value to HTML then get it back again in javascript variable. Let me know if you have any solution.
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
var myVal = "some string";
$("#foo").val(myVal);
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
</script>
</body>
</html>
You can use $(document).ready() method which waits until all DOM elements are rendered. Then executes the JS code. You can read more about it here
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.18/pdfmake.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var myVal = "some string";
$("#foo").val(myVal);
});
</script>
<input type="hidden" name="foo" id="foo" value="">
<script>
$(document).ready(function(){
var doo = "";
doo = $(this).find("#foo").val();
if (doo != "") {
alert(doo);
}else{
alert("doo is null");
}
});
</script>
</body>
</html>
Using HTMLFormControlsCollection of the Web API allows us to reference any and all form elements very easily:
Example
/* Find the first form of a page without knowing it's .class or #id */
// HTMLFormControlsCollection // Common way
var form = document.forms[0]; var form = document.getElementsByTagName('form')[0];
Demo
<!DOCTYPE html>
<html>
<head>
<title>Just test</title>
</head>
<body>
<form id='A'>
<input id="X" name="X">
<output id='Y' name='Y'></output>
<input id='Z' name='Z' type='hidden'>
</form>
<script>
var F = document.forms.A;
F.oninput = function() {
var X = F.X.value;
var Y = F.Y;
var Z = F.Z;
Y.value = X;
Z.value = X;
}
</script>
</body>
</html>
Instead of PHP, I want to use jQuery to get user input and pass in a function and update a "div".
My HTML(includes scripts) code is:
<head>
<title>Mobile Locale test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Mobile Locale this is!" />
<script>
var x;
$(document).ready(function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
console.log(x);
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
What I want:
I want to get input from user and assign that input to x.
Then I want to complete a string and pass x in that string.
Then I want to write that complete sentence in div id="test".
I am stumbling this for more than 6 hours but got no success. Tried numerous codes but failed.
Referred w3schools jQuery form example but they are using form method="abcd.asp".
Thanks in advance...
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jquery</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
var x;
$(document).ready(function()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
function CallSubmit()
{
var x = $("input#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
return false;
}
</script>
</head>
<body>
<form>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit" onclick="return CallSubmit();">Submit!</button>
<div id="test">This should change...</div>
</form>
</body>
</html>
Your script is executed on page load, when the input is empty - call the code on an event, like keyup
$(document).ready(function(){
$("#q").keyup(function() {
var name = "Hello " + this.value + ". Welcome to this site";
$("#test").text(name);
})
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<input type="text" id="q" placeholder="Your name please...">
<button id="submit">Submit!</button>
<div id="test">This should change...</div>
You could get the name in the click event of the button.
Working example : http://jsfiddle.net/jjjoeupp/
$('#submit').on('click', function()
{
x = $("#q").val();
var name = "Hello " + x + ". Welcome to this site";
$("#test").text(name);
});
Hope it helps!!!
You can bind the focusoutevent with the input to dynamically change the div. Another approach would be to update on each keypress.
$(document).ready(function () {
$('#q').keypress(function (event) {
if (event.which == 13) {
event.preventDefault();
if ($(this).val() != '') {
var x = $(this).val();
var name = "Your string " + x;
}
$('#test').text(name);
}
});
});
fiddle : http://jsfiddle.net/86evwkbx/
Here is what my front end looks like. I have created checkbox for email on and off, and I would like to store this ON/OFF information in MySQL.
This is my PHP code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Better Check Boxes with jQuery and CSS </title>
<link rel="stylesheet" type="text/css" href="css123/styles.css" />
<link rel="stylesheet" type="text/css" href="jquery.tzCheckbox123/jquery.tzCheckbox.css" />
<script src="jquery123.js"></script>
<script src="jquery.tzCheckbox123/jquery.tzCheckbox.js"></script>
<script src="js123/script.js"></script>
</head>
<body>
<div id="page">
<form method="post" action="">
<br>
<ul>
<li><label for="ch_emails">Email notifications: </label><input type="checkbox" id="ch_emails" name="ch_emails" data-on="ON" data-off="OFF" value="1" CHECKED/></li>
</ul>
</form>
<?php
if(isset($_POST['submit'])){
if(isset($_POST['ch_emails'])){
echo $check=$_POST['ch_emails'];
$sql=mysql_query("Update scott123.rahul_tbl_users set group=$check where Dingoid=$dingo");
if($sql==1){
echo "Checked";
}
else{
echo "Not Checked";
}}}
?>
</body>
</html>
### And here is my Javascript code
(function($){
$.fn.tzCheckbox = function(options){
// Default On / Off labels:
options = $.extend({
labels : ['ON','OFF']
},options);
return this.each(function(){
var originalCheckBox = $(this),
labels = [];
// Checking for the data-on / data-off HTML5 data attributes:
if(originalCheckBox.data('on')){
labels[0] = originalCheckBox.data('on');
labels[1] = originalCheckBox.data('off');
}
else labels = options.labels;
// Creating the new checkbox markup:
var checkBox = $('<span>',{
className : 'tzCheckBox '+(this.checked?'checked':''),
html: '<span class="tzCBContent">'+labels[this.checked?0:1]+
'</span><span class="tzCBPart"></span>'
});
// Inserting the new checkbox, and hiding the original:
checkBox.insertAfter(originalCheckBox.hide());
checkBox.click(function(){
checkBox.toggleClass('checked');
var isChecked = checkBox.hasClass('checked');
// Synchronizing the original checkbox:
originalCheckBox.attr('checked',isChecked);
checkBox.find('.tzCBContent').html(labels[isChecked?0:1]);
});
// Listening for changes on the original and affecting the new one:
originalCheckBox.bind('change',function(){
checkBox.click();
});
});
};
})(jQuery);
I tried to write a code like this but the information email ON/OFF is not storing in database. I have created checkbox for email on/off, and I would like to store this ON/OFF information in MySQL, but the value is not getting stored.