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
Related
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>
I have two fields in form and onsubmit() event I am calling function. When I click udpate button I could not get the values of "sent", all other values fetched correctly.
In case of insert button, sent is fetched correctly.
I am tracking the values using aler button. Can it be done using firebug too?
<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type" />
<meta content="utf-8" http-equiv="encoding" />
<script type="text/javascript">
function showUser(form, e) {
e.preventDefault();
e.returnValue=false;
var xmlhttp;
var submit = form.getElementsByClassName('submit')[0];
var sent = document.getElementsByName('sent')[0].value || '';
var id = document.getElementsByName('id')[0].value || '';
**alert(id);
alert(sent);
alert(submit.name);
alert(submit.value);**
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(e) {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
document.getElementById("txtHint").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.open(form.method, form.action, true);
xmlhttp.send('sent=' + sent + '&id=' + id + '&' + submit.name + '=' + submit.value);
}
</script>
</head>
<body>
<form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)">
<label>Enter the sentence: <input type="text" name="sent"></label><br />
<input type="submit" class="submit" name="insert" value="submit" />
</form>
<h4>UPDATE</h4>
<form action="ajax_test.php" method="POST" onsubmit="showUser(this, event)">
<pre>
<label>Enter the ID:</label><input type="text" name="id"><br>
<label>Enter the sentence:<input type="text" name="sent"></label><br />
</pre>
<input type="submit" class="submit" value="submit" name="update"/>
</form>
<br />
<div id="txtHint">
<b>Person info will be listed here.</b>
</div>
</body>
</html>
You're always getting the first sent and id elements because you're using document.getElementsByName, so you need to grab the ones within the form that is submitted. By always getting the first, you will get the values from the insert form even when the update form is submitted.
var sent = form.elements['sent'].value;
var id = form.elements['id'].value;
The above will get the sent and id values from the form that was submitted, based on the form object that was passed as an argument.
You can use console.log(...) and console.debug() with firebug.
See the documentation for more info: https://getfirebug.com/wiki/index.php/Console_API
Not sure what you're trying to accomplish, but you should at least provide us with a copy of ajax_test.php if you want us to test your code. Do you get any error messages in to firebug console?
Also, why not use the ajax features of jQuery? That would make things far easier on yourself. Piao Yishi has a good tutorial on NetTuts+ on how to do that: http://net.tutsplus.com/tutorials/javascript-ajax/5-ways-to-make-ajax-calls-with-jquery/
Doing so might just solve your problems.
This ajax test should (by the will of about 2 hours now) return the request result into a textarea. The request is being made to the same page, and I have a $_POST isset test at the top of the body to check whether the request is coming from my POST request (I need to have the code all in one file). The result is that "text to appear in the textarea box" is returned by itself, and isn't placed inside the textarea.
//name of this page is testing.php
<html>
<head>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testTextarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.open("POST","testing.php",true);
xmlhttp.send("test");
}
</head>
<?
if (isset($_POST["testName"])) {
die("text to appear in the textarea box");
}
?>
<body>
<form action="testing.php" method="POST" onsubmit="loadXMLDoc(this.form); return false;">
<input class="command" type="text" name="testName" />
<div><textarea id="testTextarea"></textarea></div>
</body>
</html>
Try moving the die() to the top so that nothing else is outputted before die()
<?
if (isset($_POST["testName"])) {
die("text to appear in the textarea box");
}
?>
<html>
<head>
<script>
function loadXMLDoc()
{
var xmlhttp;
xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("testTextarea").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","testing.php",true);
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xmlhttp.send("testName=blah");
}
</script>
</head>
<body>
<form action="testing.php" method="POST" onsubmit="loadXMLDoc(this.form); return false;">
<input class="command" type="text" name="testName" />
<div><textarea id="testTextarea"></textarea></div>
</form>
</body>
</html>
I am trying to make an html select box which dynamically disables and enables based on what the user inputs in a different select box... This was working fine when I used just html, but I would like to use the jQuery plugin Chosen for this, and it is not working... The main thing I need to do is update chosen to be disabled or enabled based on the onchange for the other select box. Is this possible with chosen? And how? Thanks so much.
Below is my javascript:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>PROCapture Marketing | My Dashboard</title>
<link rel="stylesheet" type="text/css" href="../Style Sheets/PCMBackOffice-Styles.css">
<link href="../Style Sheets/headermenuhome.css" rel="stylesheet"><script type="text/javascript" src="../Scripts/jQuery1.7.1.js"></script>
<script src="../Scripts/instantiatemenu.js"></script>
<script>
function displayleads(str)
{
var xmlhttp;
if (str=="")
{
document.getElementById("fromleadstransfer").innerHTML="<option value=''>Select Leads To Transfer...</option>";
document.getElementById("fromleadstransfer").disabled=true;
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("fromleadstransfer").innerHTML=xmlhttp.responseText;
if (document.getElementById("fromleadstransfer").value != "noleads") {
document.getElementById("fromleadstransfer").disabled=false;
} else {
document.getElementById("fromleadstransfer").disabled=true;
}
}
}
xmlhttp.open("GET","../Scripts/transferfromselect.php?system="+str,true);
xmlhttp.send();
}
</script>
<script>
function displayfolders(str2)
{
var xmlhttp;
if (str2=="")
{
document.getElementById("tofoldertransfer").innerHTML="<option value=''>Select Folder To Send Leads...</option>";
document.getElementById("tofoldertransfer").disabled=true;
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("tofoldertransfer").innerHTML=xmlhttp.responseText;
document.getElementById("tofoldertransfer").disabled=false;
}
}
xmlhttp.open("GET","../Scripts/transfertoselect.php?system="+str2,true);
xmlhttp.send();
}
</script>
<link rel="stylesheet" type="text/css" href="../chosen/chosen2.css">
<script src="../chosen/jquery.js"></script>
<script src="../chosen/chosen.jquery.js"></script>
<script>
jQuery(document).ready(function(){
jQuery(".fromleadstransfer").chosen();
jQuery(".fromsystemtransfer").chosen();
jQuery(".tofoldertransfer").chosen();
jQuery(".tosystemtransfer").chosen();
jQuery(".operationselect").chosen({disable_search_threshold: 3});
});
And here is the form:
<form method="post" name="transferleadsform">
<div class="transferleftside">
<div class="primarytransfercontainer">
<span class="primarytransferspan">From:</span>
<br>
<div class="transferinnercontainer1"><label>Operation: </label>
<select id="operationselect" name="operationselect" class="operationselect">
<option value="Copy" selected="selected">Copy</option>
<option value="Move">Move</option>
</select></div>
<br>
<div class="transferinnercontainer2"><label>System: </label>
<select name="fromsystemtransfer" class="fromsystemtransfer" id="fromsystemtransfer" onChange="displayleads(this.value)">
<option value="">Select A System...</option>
<?php
foreach($systems as $systemid) {
?>
<option value="<?php echo $systemid?>"><?php echo $systemid?></option>
<?php
}
?>
</select></div>
<br>
<div class="transferinnercontainer2"><label>Leads: </label>
<select name="fromleadstransfer" multiple disabled="disabled" class="fromleadstransfer" id="fromleadstransfer">
<option value="">Select Leads To Transfer...</option>
</select></div>
</div>
</div>
<div class="transferrightside">
<div class="primarytransfercontainer">
<span class="primarytransferspan">To:</span>
<br>
<div class="transferinnercontainer1"><label>System: </label>
<select id="tosystemtransfer" name="tosystemtransfer" class="tosystemtransfer" onChange="displayfolders(this.value)">
<option value="">Select A System To Send Leads...</option>
<?php
foreach($systems as $systemid) {
?>
<option value="<?php echo $systemid?>"><?php echo $systemid?></option>
<?php
}
?>
</select></div>
<br>
<div class="transferinnercontainer3"><label>Folder: </label>
<select id="tofoldertransfer" name="tofoldertransfer" disabled="disabled" class="tofoldertransfer">
<option value="">Select Folder To Send Leads...</option>
</select></div>
<br>
<input type="submit" class="transferbutton TransferSprites" value="<< Transfer Leads >>">
</div>
</div>
<div class="longdivider TransferSprites">
</div>
</form>
after you disable the element, you need to trigger it's update function
$(element).prop('disabled', true).trigger("liszt:updated");
Updating Chosen Dynamically
If you need to update the options in your select field and want Chosen to pick up the changes, you'll need to trigger the "liszt:updated" event on the field. Chosen will re-build itself based on the updated content.
jQuery Version: $("#form_field").trigger("liszt:updated");
Prototype Version: Event.fire($("form_field"), "liszt:updated");
I tried to invoke a function of javascript to make a php page change with the navigation bar, without realoading the whole page, but the closes i've been into is I succed to do that with a button command but the javascript inside the page is turned off, what did I do wrong?
<script src="js/jquery.min.js"></script>
<script src="js/jquery-ui.min.js"></script>
<script src="js/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
$("#accordion").accordion();
$('#button_1, #button_2, #button_3, #button_4').click(function(){
var which_to_load = ( $(this).attr('id')+"" ).replace('button_', ''),
source_of_file = 'content'+which_to_load+'.php';
$('#content_box').load( source_of_file );
return false;
});
});
</script>
Link part:
<div id="content_changing_buttons">
<form method="get" id="change_content_buttons" action="">
<p>
<li><input value="1" type="submit" id="button_1" name="page" /> Reggiani presents at frankfurt Light + Build 2012</a><br/><br /></li>
<li><input value="2" type="submit" id="button_2" name="page" /> Reggiani presents at frankfurt Light + Build 2012</a><br/><br /></li>
<li><input value="3" type="submit" id="button_3" name="page" /> Reggiani presents at frankfurt Light + Build 2012<br/><br /></li>
<li><input value="4" type="submit" id="button_4" name="page" /> Reggiani presents at frankfurt Light + Build 2012<br/><br /></li>
</p>
</form>
</div>
And the content part:
// default number of page to load
$defaultPageNumber = '2';
// check if content number is set
$numberOfPageToInclude = isset($_GET['page']) ? $_GET['page'] : $defaultPageNumber;
$options = array(
'options' => array(
'min_range' => 1,
'max_range' => 4,
));
if (filter_var($numberOfPageToInclude, FILTER_VALIDATE_INT, $options) !== FALSE) {
include ('content' . $numberOfPageToInclude . '.php');
} else {
echo '<span style="color:red;">Wrong page number, including default page!</span><br />';
include 'content1.php';
}
?>
</div>
Now I have done like it was suggested, but when i invoke the code, at first the default php page showed up, then when i clicked the button to change the php side of the page, it worked but somehow it turned off the rest of the javascript, even my accordion js and blinds js (that it reffered from another php page) suddenly turned off.
Anyone can suggest how to fix this problem?
<html>
<head>
<script language="javascript" type="text/javascript">
function showentry()
{
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("right").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","details.php",true);//whatever the contents of file details.php displayed in right div
xmlhttp.send();
}
</script>
<style type="text/css">
#left{width:500px;height:100%; float:left;}
#right{width:500px; float:left;}
</style>
</head>
<div id="left">
<input type="button" name="GET" value="show" onclick="showentry()"/>
</div>
<div id="right">
</div>
</html>