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.
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 soReference: http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp