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.
Related
<!doctype html>
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
<title>Who is working on the table</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<link href="css/custom.css" rel="stylesheet" />
<style type="text/css">
</style>
</head>
<body>
<ul class="list-group">
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox" value="yes"> Alex is working on the table.</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox3" value="yes"> Tom is working on the table.</li>
<li class="list-group-item"><input type="checkbox" class="save-cb-state" name="mycheckbox2" value="yes"> Lisa is working on the table.</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery.js"></script>
<!-- This JavaScript file is required to load the XpressDox interview as well as the code required to run it -->
<script>
// Avoid scoping issues by encapsulating code inside anonymous function
(function() {
// variable to store our current state
var cbstate;
// bind to the onload event
window.addEventListener('load', function() {
// Get the current state from localstorage
// State is stored as a JSON string
cbstate = JSON.parse(localStorage['CBState'] || '{}');
// Loop through state array and restore checked
// state for matching elements
for(var i in cbstate) {
var el = document.querySelector('input[name="' + i + '"]');
if (el) el.checked = true;
}
// Get all checkboxes that you want to monitor state for
var cb = document.getElementsByClassName('save-cb-state');
// Loop through results and ...
for(var i = 0; i < cb.length; i++) {
//bind click event handler
cb[i].addEventListener('click', function(evt) {
// If checkboxe is checked then save to state
if (this.checked) {
cbstate[this.name] = true;
}
// Else remove from state
else if (cbstate[this.name]) {
delete cbstate[this.name];
}
// Persist state
localStorage.CBState = JSON.stringify(cbstate);
});
}
});
})();
</script>
</body>
</html>
The code shows 3 checkboxes. I want to save changes made from any location and devices. For example Alex checked the first box, I want to edit the table, but I that Alex is working on it. After he finished Alex unchecks the box and I refresh the page, so that i can see Alex is done with his work...
I have an HTML page where we enter the name of a movie and if that movie is present in the database,then the name is displayed. I am trying to connect to the database using JavaScript, Ajax and PHP. The database is in the MySQL Workbench Server.
This is what I have done:
pc.html
<html>
<head>
<script type="text/javascript">
function Search_Data()
{
var httpr = new XMLHttpRequest();
var movie_name=document.getElementById("moviename").value;
console.log(movie_name);
httpr.open("GET","get_data.php",true);
httpr.send();
httpr.onreadystatechange = function()
{
if(this.readyState==4 && this.status==200)
{
alert(this.responseText);
}
}
}
</script>
<body>
<input type="text" name="moviename" id="moviename" placeholder="Enter a movie...">
<br/>
<input type="button" name="search" value="Search" onclick="Search_Data()">
<br/>
<span id="response"></span>
</body>
</head>
</html>
get_data.php
(Below code is a trial code to see if its working)
<?php
echo "Hello World"
?>
In the browser,the result I am getting is:
The files are in the following location:
C:\Users\Admin\AppData\Roaming\MySQL\Workbench\scripts
The entire code is getting displayed instead of just "Hello World".I am new to web development and PHP and I am not sure what seems to be the problem.
what are you using is ajax with normal java-script i suggest to use jquery ajax and this is a full example how to connect it to php and how to get the value or list
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" name="search" id="search" class="btn btn-info">Search</button>
<td width="90%"><span id="employee_name"></span></td>
second
<input type="input" id="inputs" value="submit">
<p id="email"></p>
<p id="pass"></p>
<p id="permission"></p>
<script>
$(document).ready(function(){
$('#search').click(function(){
var val = document.getElementById("inputs").value;
var id= $('#employee_list').val();
setInterval(function(){
$.ajax({
url:"db.php",
method:"POST",
data: {val : val},
dataType:"JSON",
success:function(data)
{
$('#email').text(data[val].email);
$('#pass').text(data[val].pass);
$('#permission').text(data[val].perm);
}
})
}, 1000);
});
});
</script>
</body>
</html>
the php file
<?php
$items = array();
$url="localhost";
$user= "root";
$pass="";
$dbname="test";
$value= 0;
if(isset( $_POST['val'])){
$value= $_POST['val'];
}
$num=0;
$connect=mysqli_connect($url,$user,$pass,$dbname);
$result="SELECT email,pass,permission FROM test where id=$value";
$sql=mysqli_query($connect,$result);
while($row=mysqli_fetch_assoc($sql) ){
/* add a new item */
$num++;
$items[$value] = array(
'email' => $row['email'],
'pass' => $row['pass'],
'perm' => $row['permission']
);
}
$json_response = json_encode($items);
echo $json_response;
?>
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");
This question already has an answer here:
how to send dynamically created text field value to php mail
(1 answer)
Closed 4 years ago.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<form role="form" action="#" method="post" class="f1">
<label>
<input type="radio" name="optradio" value="3" count="3">3
PERSON
</label>
<input type="submit" value="send">
</form>
<div class="table-responsive">
<table class="table table-hover table-striped">
<tbody id="container">
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
<script>
$('input[type="radio"]').click( function(){
$val = $(this).val();
$('#container').html('');
$content = '';
$val = $(this).attr('count')
var i = 1;
for( i = 0; i < $val; i++ ) {
$content += '<tr><td><div class="form-group"><input type="text" name="username[]" placeholder="Name" class="f1-email form-control" id="username"></div></td></tr>';
}
$('#container').html($content);
});
</script>
how to post the three dynamically created textbox value, for textbox addition i am using the javascript, please check and let me know. i am not able to post the php value to my mail id...
You give each textbox a name value (name="name" for instance). For each input you make a php variable, like this:
$nameinput1 = $_POST['name'];
The $nameinput1 is the variable wich you will call in your script. This could be anything you want!
The $_POST['name'] gets the actual info from the POST method of your form. Here for it needs to have the exact SAME name at the input element!
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>