I have a form with a dropdown box, login button, and logout button. My requirement is to insert date and time when user click on the login or logout button after username selection from dropdown. Also, when user clicks on login button, it has to enable by changing the background color without page load. Same functionality required for logout option also.
Now, I can select the user's name from the dropdown which is coming from database. I stucked on the insertion part which i need without page load.
I need to insert data without page load once click on the login button.
Any help would be appreciable. Thanks in advance.
Code:
index.php
<?php
include_once "database.php";
?>
<html>
<head>
<script>
function showUser(str) {
if (str=="") {
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<?php
$sql_user="SELECT * FROM users";
$result_user=mysql_query($sql_user);
?>
<form>
<select name="users" onchange="showUser(this.value)" style="width: 210px;height: 36px; font-size:17px;">
<option style="height:30px;" value="">Select a person:</option>
<?php while($row_user=mysql_fetch_array($result_user)){?><option style="height:30px;" value="<?php echo $row_user['id'];?>"><?php echo $row_user['username'];?></option><?php }?>
</select>
</form>
<br>
<div id="txtHint"></div>
</body>
</html>
getuser.php
<style>
button{
width: 100px;
height: 38px;
background:white;
color:black;
}
</style>
<?php
$q = intval($_GET['q']);
include_once "database.php";
$sql="SELECT * FROM users WHERE id = '$q'";
$result = mysql_query($sql);
$row=mysql_fetch_array($result);
$entry=$row['entry'];
?>
<form method="post" name="">
<table>
<tr><td>
<button id="btnSave" <?php if($entry=='0'){?> style=" background:#6DAAD4;"<?php }?>> Login</button>
</td><td>
<button <?php if($entry=='1'){?> style=" background:#6DAAD4;"<?php }?>> Logout</button>
</td></tr>
</table>
</form>
in you getuser.php remove form tag and add function 'insertDateTime()' to buttons click event like:
<table>
<tr>
<td>
<button id="btnSave" onclick="insertDateTime(this,'<?php echo $q;?>');"> Login</button>
</td>
<td>
<button id="btnSave" onclick="insertDateTime(this,'<?php echo $q;?>')"> Logout</button>
</td>
</tr>
</table>
Add one function to your index.php
<script src="http://code.jquery.com/jquery-1.11.1.min.js"> </script> //better to download and us locally
<script>
function insertDateTime(obj, id)
{
$("[id^='"+obj.id+"']").css('background', '#FFFFFF');
$(obj).css('background', '#6DAAD4');
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var params = "id="+id;
xmlhttp.open("POST","insertdate.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//alert(xmlhttp.responseText);
}
}
xmlhttp.send(params);
}
</script>
and write your code in insertdate.php to insert date and time in database. You can get your id using $_POST['id']; in insertdate.php.
Bind onclick = "func()" in button
inside func method, change the color this way :
document.getElementById("formID").style.backgroundColor="lightblue";
Related
I am having trouble with my php code. I have tried everything and nothing works.
I want that the form will save the search query into the database but but i canot use action="search.php" since the result is displayed on the index.php page so it need's to stay on the index page and execut the save.
The form:
<form class="form-domain" role="form" action="search.php" method=post>
<!-- Search input -->
<div class="search-input">
<span class="www">www.</span>
<input type="text" class="form-control input-domain" placeholder="vasa-nova-domena" name="ime_domene">
<div class="domain-extension">
<select class="form-control" name="koncnica">
<option value=".com" selected="">.com</option>
<option value=".si">.si</option>
</select>
</div>
</div><!-- /.search-input -->
<button class="btn btn-success btn-block" id="poslji" name="preglej" type="submit"><strong>PREVERI</strong></button>
</form>
Right after this form comes the php result so i need to stay on the index.php to have the result of the search visible but the same time i want the input/search that was given saved into the database.
I hope this wasen't to complicated. :)
<script>
function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","<?php include 'search.php';?>",true);
xmlhttp.send();
}
}
</script>
I have two buttons(Login and logout). When logout is active, if user clicks again on the logout button then shouldn't do insertion or updation. The same for login button also.
Now, it's inserting when user clicks on the active button. I need to avoid that.
Thanks in advance.
Code:
<script>
function insertDateTime(obj, id)
{
$("[id^='"+obj.id+"']").css('background', '#FFFFFF').css('font-weight', 'normal').css('font-size', '14px').css('color', 'grey');
$(obj).css('background', '#D4B357').css('font-weight', 'bold').css('font-size', '15px').css('color', 'black');
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else { // code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
var params = "id="+id;
xmlhttp.open("POST","insertdate.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
/* xmlhttp.setRequestHeader("Content-length", params.length);
xmlhttp.setRequestHeader("Connection", "close");*/
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
//alert(xmlhttp.responseText);
}
}
xmlhttp.send(params);
}
</script>
getuser.php
<table>
<tr>
<td>
<button id="btnSave" <?php if($entry=='1'){?> style=" background:#D4B357; font-weight:bold; font-size:15px; color:black;outline:0px;"<?php }?> onclick="insertDateTime(this,'<?php echo $q;?>');"> Login</button>
</td>
<td>
<button id="btnSave" <?php if($entry=='0'){?> style=" background:#D4B357; font-weight:bold; font-size:15px;color:black;outline:0px;"<?php }?> onclick="insertDateTime(this,'<?php echo $q;?>');"> Logout</button>
</td>
</tr>
</table>
insertdate.php
date_default_timezone_set("Asia/Kolkata");
$date=date("Y-m-d", time());?>
<?php $time=date("H:i:s",time());
include_once "database.php";
$q = $_POST['id'];
$sql_check="select * from entries where user_id='$q' order by id desc";/*last row*/
$res_check=mysql_query($sql_check);
$row=mysql_fetch_array($res_check);
$logout_date=$row['logout_date'];
$num=mysql_num_rows($res_check);
$id=$row['id'];
if($logout_date != "" || $num=='0'){
$sql1="insert into entries(user_id,login_date,login_time,logout_date,logout_time)values('$q','$date','$time','','')";
$res1=mysql_query($sql1);
$sql="update users set entry='1' where id='$q'";
$res=mysql_query($sql);
}
else{
$sql="update entries set logout_date='$date', logout_time='$time' where id='$id'";
$res=mysql_query($sql);
$sql1="update users set entry='0' where id='$q'";
$res1=mysql_query($sql1);
}
You can stop the user from clicking the buttons second and consecutive times by disabling the buttons after the first click using a simple JavaScript code.
Once the action is complete, you can enable the button back (or hide it as they are for login/logout).
<table>
<tbody id="eb_body">
<tr>
<td>Booking Bills:</td>
<td><input type="text" id="e_brochure0" name="e_brochure0" placeholder="From Bill No........" required/></td>
</tr>
<tr>
<td>
<a onClick="add_brochures()" style="text-decoration:none !important;"><span style="cursor:pointer; font-size:10px; ">+Add more bill nos.</span></a>
</td>
</tr>
<tr>
<td>
<input type="submit" value="save" name="save" />
</td>
</tr>
</tbody>
</table>
there is an anchor tag on that click i am calling a function as below..
<script type="text/javascript">
var b=1;
function add_brochures()
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("zone").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","five.php",true);
xmlhttp.send();
b=b+1;
}
</script>
with this i am directing the page to five.php where i am displaying a select box....
code for five.php is this...
<?php
include 'dbcon.php';
$sql="select * from tb_zone";
$query=mysql_query($sql);
?>
<tr>
<td>
<select>
<?php
while($row=mysql_fetch_array($query))
{
?>
<option>
<?php echo $row["zone_name"]; ?>
</option>
<?php } ?>
</select>
</td>
</tr>
when i click on anchor tag it is opening one selectbox but bot more....what i want is that when i click on anchor tag then a selectbox appears...if i click on it 5 times then i should open selectbox 5 times....right now it is opening just 1 selectbox....please help
Change:
document.getElementById("zone").innerHTML=xmlhttp.responseText;
to:
document.getElementById("zone").innerHTML += xmlhttp.responseText;
+= will concatenate the response to the existing HTML, which will add a new row to the table.
I have a form that let user to choose where them come from..
I have list out the country list by select box..
and i success to do it onchange and use ajax to read out all the state list..
actually i have two php file.. one is the main one that contain all the code include the form.. another one is generate state list.. my ajax code and form are in the main php
this is the one that generate state list...
$cID = $_GET["country"];
$sql = "SELECT * FROM States WHERE CountryID=$cID";
$result = $db->get_results($sql);
if (isset($result)) {
foreach ( $result as $states ) {
?>
<input type="checkbox" name="chkState[]" value="<?=$states->StateID?>" /> <?=$states->StateName?><br />
<?php
}
}
this is part of my code that read out..
but my problem is...
where i submit the form..
i only get the variable of country.. i cannot take the data of state that use ajax to generate out...
sample of my form
<form action="" name="place">
<select name="cboCountry" class="drop" onchange="showState(this.value)">
//some php code the list out the country
</select>
<div id="txtHint">
</div>
<input type="submit" name="submit" value="submit" />
</form>
and here my ajax code
<script>
function showState(str)
{
alert('xxx');
var xmlhttp;
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","state_list.php?country="+str,true);
xmlhttp.send();
}
</script>
so when i submit the from with a save button... i only get the date of country and state are missing.. any body can help me? or having any way to do what i want?
I have this code (below) that works on FF&Chrome but doesn't work on IE*. I am trying to populate the select tag with email address. Thanks
question.php
<html>
<head>
<script type="text/javascript">
function myFunction(val)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.open("POST","qsrcipt.php?q="+val,true);
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.send();
}
</script>
</head>
<body onload="myFunction(document.myForm.mySelect.value)">
<form name="myForm" style="float:left; margin-right: 10px; overflow: hidden;">
<select name="mySelect" onchange="myFunction(this.value)" size="10">
<option value="1" selected="selected">level 1</option>
<option value="2">level 2</option>
<option value="3">level 3</option>
</select>
</form>
<div>
<select id="myDiv" size="10"></select>
</div>
</body>
</html>
qsrcipt.php
<?php
// Fill up array with names
$lsts = array("Anna","Brittany","Cinderella","Diana","Eva","Fiona");
//get the q parameter from URL
$q=$_GET['q'];
if ($q == '1')
{
foreach($lsts as $lst){
echo "<option id='1'>".$lst."</option>";
}
}
else
{
echo "<option id='1'>this is a test</option>";
}
?>
Your $lsts contains the array of names not email.
Secondly, instead generating the HTML server side, it's better to return the values of $lsts as a JSON encoded array and, in JavaScript, dynamically generate the select list.