Can I ask if it is possible to print result of a "checked" radio button without a submit button in php with ajax?
In my code below, I wanted to print "Thank you" when the "Yes" radio button is being clicked; and "Are you sure?" when the "No" button is being clicked without refreshing the page.
<script>
function getEmail(int){
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState==4 && xmlhttp.status==200){
document.getElementById("emailQ").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET", "index.php?q="+int, true);
xmlhttp.send();
}
</script>
<div id = "emailQ">
<li class="nav-header">Please confirm your facebook email:</li>
<li><?php echo $_SESSION['EMAIL']; ?></li>
<form action="" method="post">
<input type="radio" name="email" onclick="javascript: submit.getEmail()" value="Thank You"> Yes
<input type="radio" name="email" onclick="javascript: submit.getEmail()" value="Are you sure?"> No
</form>
<?php
if(isset($_POST['email'])){
echo " ".$_POST['email'];
}
?>
</div>
Related
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";
I want to prevent the main form to be submitted according to AJAX response.
HTML is like this...
<form action="test.php" method="POST">
<input type="text" name="email" id="email" onblur="ajax_check_email();">
<span id="email_alert"></span>
<input type="submit" name="submit">
</form>
Now I have a js file with ajax query -
function ajax_email_check () {
var xmlhttp;
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
} else {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("email_alert").innerHTML=xmlhttp.responseText;
}
}
var email = document.getElementById("email").value;
xmlhttp.open("GET","ajax/check_email.php?email=" + email,true);
xmlhttp.send();
}
Now the php page returns Email Already Exists or Success.
All goes well but after showing the Text that the "email already exists...!" the main form is getting submitted when I hit submit. It should prevent me. But how am I gonna do that?
You can simply add a flag like var shouldSubmit = false, in your ajax response, if it's okay to submit, change shouldSubmit to true, then add a eventlistener to form
<script>
yourform.addEventListener("submit", function(e){
if(!shouldSubmit){
e.preventDefault();
return false;
}
});
</script>
Just catch the event and stop it.
<form id="myform" action="test.php" method="POST">
<script>
$('form#myform').submit(function(e){
e.preventDefault();
});
</script>
Just add this in form tag onsubmit="return false;"
Like this-
<form action="test.php" method="POST" onsubmit="return false;">
<input type="text" name="email" id="email" onblur="ajax_check_email();">
<span id="email_alert"></span>
<input type="submit" name="submit">
</form>
Have Radio Buttons to Trigger Different PHP Functions.. At the moment though, the page just flashes when the submit button is clicked!
IT SEEMS THE .PHP NEEDS TWEAKING!!
Would like the functions to perform without a page refresh, hence AJAX..
The Form field should submit a string to the PHP when the Submit Button (Return) is clicked, subject to the selected Radio button.
http://bootply.com/61461
HTML PAGE:
<div class="container">
<!-- Input Section -->
<form action="">
<fieldset>
<legend>A Form to input plain English and output Pig Latin</legend>
<label></label>
<input class="span9" type="text" id="txt1" name="yourText" placeholder="… Type Something Here …"><br><br>
<span class="help-block">Choose whether or not you want to have the English input echoed on the output as Pig Latin:</span>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="english" value="english" checked>
Echo the English Input
</label>
<label class="radio inline">
<input type="radio" name="optionsRadios" id="piglatin" value="piglatin">
Output as Pig Latin
</label>
<br><br>
<button type="submit" class="btn" onClick="showTxt(this.value)">Return</button>
</fieldset>
</form>
<br><br><br>
<!-- Output Section -->
<span id="return-text">
<p>Text Will Post Here</p>
</span>
</div>
PHP PAGE:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pig Latin PHP</title>
</head>
<body>
<?php
if( isset($_POST['yourText'])){
$text = $_POST['yourText'];
}
function engish(){
if( isset($_POST['optionsRadios']) &&
$_POST['optionsRadios'] == 'english'){
echo $text;
}
}
function piglatin(){
if( isset($_POST['optionsRadios']) &&
$_POST['optionsRadios'] == 'piglatin'){
echo '…pig latin php operation to be written…';
}
}
echo english();
echo piglatin();
?>
</body>
</html>
AJAX SCRIPT (thanks to ogc-nick's answer):
<!-- AJAX Call to piglatin.php -->
<script>
function showTxt(str)
{
var xmlhttp;
if (str.length==0)
{
document.getElementById("return-text").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("return-text").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","piglatinajax.php", true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
var dataString = $('form').serialize();
xmlhttp.send(dataString);
}
Thanks for Looking
It looks like your request is sending the data in the $_GET variable q but you php is looking for the indexes. You need to add post data in the send method like so
var optionsRadios = document.forms[formname].optionsRadios.value;
var yourText = document.forms[formname].yourText.value;
xmlhttp.send("optionsRadios=" + optionsRadios + "&yourText=" + yourText);
Reference: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
I have form which consists of a text field (id="txt1")
and a submit button(id="submit"). Ajax function 'showhint()' is called on 'onclick' event of submit button.
<form action="">
<input type="text" id="txt1" />
<input type="submit" id="submit" onclick="showhint()"/>
</form>
And ajax function
function showhint(){
var xmlhttp;
if(window.XMLHttpRequest)
{
xmlhttp=new XMLHttpRequest();
}
else
{
xmllhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("txthint").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","gethint.php",true);
xmlhttp.send();
}
Here gethint.php is page where showhint() function does its work and targeted div to write ajax respone is "txthint" .
what I want is to pass text value(form's) to ajax function. Is there any easy way?
Waiting for response, any usefull response would be highly appreciable.
thaks in adavance
var value = document.getElementById("txt1").value;
xmlhttp.open("GET","gethint.php?value="+value,true);
In gethint.php
echo $_REQUEST['value'];
If I read this properly, you are trying to get the value of the textbox and pass that to your showhint() method.
Try this:
<input type="submit" id="submit" onclick="showhint(document.getElementById('txt1').value)" value="test"/>
Then you can accept the value like this:
function showhint(value) {
// use value here
}
Hope that helps.
I am trying to call a function with Javascript, HTML, AJAX, and PHP.
I am still new to Javascript, AJAX, and PHP.
Background info: I am trying to add a new customer to my database but I am now trying to get a confirmation message on the same page without the page refreshing.
This is what I have:
<script type="text/javascript">
function addCustomer(ln,fn,pn,dob)
{
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","addCustomer.php?add_LN="+ln+"?add_FN="+fn+"?add_PN="+pn+"?add_DOB="+dob,true);
xmlhttp.send();
}
</script>
<p>Suggestions: <span id="txtHint"></span></p>
<form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
<input type="text" name="add_LN" id="add_LN" />
<br />
<br />
<input type="text" name="add_FN" id="add_FN" />
<br />
<br />
<input type="text" name="add_PN" id="add_PN" />
<br />
<br />
<input type="text" name="add_DOB" id="add_DOB" />
<br />
<br />
<input type="submit" name="add_Customer" id="add_Customer" value="Add Customer" />
</form>
<span id="txtHint"></span>
</p> </td>
</tr>
</table>
</div>
I get a "This link appears broken"
With:
http://127.0.0.1/cpsc471/return%20addCustomer(this.add_LN,%20this.add_FN,%20this.add_PN,%20this.add_DOB);?add_LN=ee&add_FN=123&add_PN=eee&add_DOB=eee&add_Customer=Add+Customer
in the url bar.
What am I doing wrong? :) I do not want the page to refresh. I am trying to just get the confirmation or non-confirmation to display.
Thanks again for all the help!
Your problem is here:
<form action="return addCustomer(this.add_LN, this.add_FN, this.add_PN, this.add_DOB);">
You don't want the form action to be a javascript call, you need to do this onclick or something.
The arguments above by #thiefmaster and #martin are correct: using jquery is much simpler. You are right about the framework thing, but in this case you need to go and code for a lot of troubles (responses, when is there a successfull AJAX call, different browsers etc)
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
// put your codes here like
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
// document.getElementById("show_label").innerHTML='text as you wish like updated enjoy';
}
}
And add a label with the id of show_label