I want to create error message like this
SPACE Not Allowed Please Try Again
If input is space in firstname and do I need to repeat the ajax for the lastname? It is not conflict while using another action update.php in form html?
<!DOCTYPE html>
<html>
<head>
<script>
function showError(str) {
if (str == "") {
document.getElementById("txtError").innerHTML = "";
return;
} else {
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 (this.readyState == 4 && this.status == 200) {
document.getElementById("txtError").innerHTML = this.responseText;
}
};
xmlhttp.open("GET","resident/residenterrormessage.php?g="+str,true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form action="update.php" meth="POST">
<div id="txtError">Error Message</div>
<input onchange="showError(this.value)" title="First Name" name="firstname" type="text">
<input title="Last Name" name="lastname" type="text" value="">
<input type="submit" name="submit">
<input>
</form>
</body>
</html>
this is my residenterrormessage.php in folder resident
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/w3.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<?php
$firstname = str_replace(" ", "", $_GET["g"]);
if(empty($firstname) ){
echo '<h1>"SPACE Not Allowed Please Try Again"</h1>';
}
?>
</body>
</html>
Based on your code you are appending an whole page inside the div. So i did some editing in your code. You might wanna try to edit your residenterrormessage.php to this
<?php
if(empty(str_replace(" ","",$_GET["q"]))){
echo '<h1>SPACE Not Allowed Please Try Again</h1>';
}
else
{
echo "a";
}
?>
Related
I want to pass two variables to my .php page ... the drop down variable is working great. But when I added an additional variable, it only sends a 0 instead of what I enter in the form.
I feel like I'm fairly close to the solution on this ... when I substitute a number on this line:
xmlhttp.open("GET","getdeposit.php?q="+str + "&r=" +restaurant, true);
instead of +restaurant, I use + 101 ... then this page correctly passes 101 ... but when I just enter the number in my form, it returns 0
<html>
<head>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
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","getdeposit.php?q="+str + "&r=" +restaurant, true);
xmlhttp.send();
}
}
</script>
</head>
<body>
<form>
<p>
<label for="restaurant">Restaurant:</label>
<input type="text" id="restaurant" name="restaurant" placeholder="Enter Restaurant" />
</p>
<select name="users" onchange="showUser(this.value)">
<option value="">select a date</optoin>
<option value=" ">Today</option>
<option value="1">Yesterday</option>
<option value="2">Two Days Ago</option>
</select>
</form>
<div id="txtHint"><b>Select Business Date</b></div>
</body>
</html>
Add the following just above the if statement in your js function :
var restaurant = document.getElementById('restaurant').value;
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'm basically copying this example from w3c schools and when you start typing in a name a few suggestions get added. No suggestions are getting added for me.
nameguess.html
<!DOCTYPE html>
<html lang="en-ca">
<head>
<meta charset="utf-8" />
<title>Ajaxing</title>
<script type="text/javascript">
<!--
function showHint(str)
{
var xmlhttp;
if (str.length == 0)
{
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","gethint.php?q="+str,true);
xmlhttp.send();
}
//-->
</script>
</head>
<body>
Hello.<br />
<form method="GET" action="">
Name: <input type="text" id="txt1" /><br />
Suggestions: <span id="txtHint"></span>
</body>
</html>
gethint.php
<?php
// Fill up array with names
$a[]="Anna";
//removed code to save space
$a[]="Vicky";
//get the q parameter from URL
$q=$_GET["q"];
//lookup all hints from array if length of q>0
if (strlen($q) > 0)
{
$hint="";
for($i=0; $i<count($a); $i++)
{
if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
{
if ($hint=="")
{
$hint=$a[$i];
}
else
{
$hint=$hint." , ".$a[$i];
}
}
}
}
// Set output to "no suggestion" if no hint were found
// or to the correct values
if ($hint == "")
{
$response="no suggestion";
}
else
{
$response=$hint;
}
//output the response
echo $response;
?>
I have both files located in the www folder of WAMP and have the virtual server running.
I can see that others have already answered what you are trying to do but I would suggest not making your ajax requests like that example.
Instead try using the jQuery library to make your ajax requests. I was able to shorten up the code above into this.
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$.get(
'gethint.php', //Code behind
{q : $("#txt1").val()}, //json string of variables to post
function(data){$("#txtHint").html(data);}, // What to do with return data
'json'); //Specify json
</script>
It will make life much easier in the long run, because it stinks to have to go through that whole mess and have to worry about cross-browser compatibility.
You can find more information here JQuery
You have missed the key press event binding:
<input type="text" id="txt1" onkeyup="showHint(this.value)">
Also, your PHP could be simplified as
<?php
if(!isset($_GET['q']) exit;
// Fill up array with names
$names = array("Anna", "Vicky");
//get the q parameter from URL
$q=$_GET["q"];
$hints = array();
foreach($names as $name) {
if (stripos($name, $q) !== -1) $hints[] = $name;
}
if(count($hints) == 0) die("no suggestion");
echo implode(', ', $hints);
?>
change this
<input type="text" id="txt1" />
to
<input type="text" id="txt1" onkeypress="showHint(this.value)"/>
and see if this helps
I'm making a UNIX web-based terminal for learning purposes. So far I have made a text box and the output is being displayed. Sort of like this.
<?php
$output = shell_exec('ls');
echo "<pre>$output</pre>";
?>
Form
<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function shell_execute(str)
{
if (str.length==0)
{
document.getElementById("txtOut").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("txtOut").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","exec.php?q="+str,true);
xmlhttp.send();
}
</script>
</head
<body onLoad="setUser();">
<div class="container">
<h2>UNIX Web Based Terminal 1.0</h2>
<br />
<p><b>output</b></p>
<form>
<span id="User"></span>< <input type="text" class="textbox" onkeyup="shell_execute(this.value)" size="20" />
</form>
<div class="output">
<p><span id="txtOut"></span></p>
</div>
</div>
</body>
</html>
But I want it to look as if the page was really a terminal. When I type a command, it should store the result of the shell command, and then append it to a div tag. So as I am typing in commands, it will keep on showing the output. Just like in the UNIX terminal.
How can I append the output of the commands to a div tag?
change:
document.getElementById("txtOut").innerHTML=xmlhttp.responseText;
to:
document.getElementById("txtOut").innerHTML += xmlhttp.responseText;
On a sidenote, why are you not using any of the well established javascript frameworks?
With jQuery for example you could reduce your code to maybe 4 lines.
Edit - using jQuery:
http://api.jquery.com/jQuery.ajax/
<html>
<head>
<link href="/css/webterminal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(function () {
$('#cmd').bind('keydown', function (evt) {
if (evt.keyCode === 13) { // enter key
var cmdStr = $(this).val();
$.ajax({
url: 'exec.php',
dataType: 'text',
data: {
q: cmdStr
},
success: function (response) {
$('#txtOut').append(response);
}
});
}
});
});
</script>
</head>
<body>
<div class="container">
<h2>UNIX Web Based Terminal 1.0</h2>
<br />
<p><b>output</b></p>
<span id="User"></span>
<input id="cmd" type="text" class="textbox" size="20" />
<div class="output">
<p><span id="txtOut"></span></p>
</div>
</div>
</body>
</html>
I don't see any errors in Firebug, and I can't figure out what's wrong with the AJAX.
PHP:
<?php
$subject = $_POST['subject'];
echo $subject;
?>
Javascript
<html>
<head>
<script type="text/javascript">
/* <![CDATA[ */
function ajax() {
if (window.XMLHttpRequest) {
xmlhttp=new XMLHttpRequest();
} else {
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
document.getElementById("result_div").value = xmlhttp.responseText;
}
}
xmlhttp.open("POST","message.php",true);
xmlhttp.send();
return false;
}
/* ]]> */
</script>
</head>
<body>
<div id="result_div"></div>
<form action="" onsubmit="return ajax();">
<select name="teest">
<option value="hi">hi</option>
</select><br />
<input type="text" name="subject"> <br />
<input type="submit">
</form>
</body>
</html>
You are not POSTing anything. When using ajax forms are not handled automatically for you.