Ajax & PHP notepad how do I...

mattd8752 · January 14, 2007

I have a rather large script which I will attach. Basically the script writes to a notepad, and everytime onkeyup() is triggered from the text area, it is saved to the database. I would also like to add a save as button. I can code this button in php myself to make it change the name of the text file in the database, however I would like to make it so that when the button is clicked in the bottom box/div (the code is hosted at http://mattdsworld.theicy.net/note/form.html ) the top section which I would place in a div (the text area) turns into a screen where the user has to put in their info. Just a few fields. Possibly just 1 (the file name). I don't need help coding it. I do need help making clicking that button replace that text area with a form, and then being able to return to the same data. (reloading back to a new dataset). I have no idea how I would do this, but I am willing to learn if someone can tell me what to learn. I will upload all files except the php since there is no need for that.

[attachment deleted by admin]

ScotDiddle · January 29, 2007

mattd8752,

I'm not sure if I understand exactly what you want, but I think what you want is to use <div> hide and show code.

Below you will find your code modified to include a "Save" button. Also, I changed the onKeyUp to onBlur,
so the data only gets sent once ( when the user is finished filling in the text area. )

When the user hits the Save button, the current <div> is hidden by a small javascript, and the <textarea> data is sent off for AJAX processing. AJAX calls fillInTheBlanks.php, which is just a simple form I found on the net. The call to the PHP script also parrots back the user data from your <textarea> from the first page, and gives the user a chance to fill in some blanks... This will sit on top of your original ( now hidden ) <textarea> <div>. You can now save your data to your database. After the user fills in the blanks ( whatever input fields you want ) and hits Submit, you can output anything you want.

Hope this is what you are looking for.

If not, let me know and I can investigate further.

Scot L. Diddle, Richmond VA

AJAXForm.html:

[code]

<html>

<head>

<script type="text/javascript">



</script>

<script type="text/javascript" src="javascript/AJAXForm.js"></script>

</head>
<body>

<div id="searchResults" style="width:295px; padding:5px; border:0px solid #000000">

<TEXTAREA name="q" cols="100" rows="25" id="q" type="text" id="q" onBlur="sendRequest(this.value);">
</TEXTAREA>

The document has not been saved yet.

<input type="button" onClick=" sendRequest(document.getElementById('q').value);" value="Save">

</div>

</body>

</html>

[/code]

AJAXForm.js

[code]

function createRequestObject() {

var req;

if(window.XMLHttpRequest){
// Firefox, Safari, Opera...
req = new XMLHttpRequest();
} else if(window.ActiveXObject) {
// Internet Explorer 5+
req = new ActiveXObject("Microsoft.XMLHTTP");
} else {
// There is an error creating the object,
// just as an old browser is being used.
alert('Problem creating the XMLHttpRequest object');
}

return req;

}

// Make the XMLHttpRequest object
var http = createRequestObject();

function sendRequest(q) {

// Open PHP script for requests
http.open('get', 'fillInTheBlanks.php?content='+q+'&username=public&file=ad.txt&key=000001');
// http.open('get', 'explode.php');
http.onreadystatechange = handleResponse;
http.send(null);

}

function handleResponse() {

if(http.readyState == 4 && http.status == 200){

// Text returned FROM the PHP script
var response = http.responseText;

if(response) {
// UPDATE ajaxTest content
document.getElementById("searchResults").innerHTML = response;
}

}

}

[/code]

fillInTheBlanks.php

[code]

<?php

$Fname = $_POST["Fname"];
$Lname = $_POST["Lname"];
$gender = $_POST["gender"];
$food = $_POST["food"];
$quote = $_POST["quote"];
$education = $_POST["education"];
$TofD = $_POST["TofD"];

if (!isset($_POST['submit'])) { // if page is not submitted to itself echo the form

?>

<html>
<head>
<title>Personal INFO</title>

</head>
<body>

<div id="formArea">
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
First Name:<input type="text" size="12" maxlength="12" name="Fname">:<br />
Last Name:<input type="text" size="12" maxlength="36" name="Lname">:<br />

Gender::<br />
Male:<input type="radio" value="Male" name="gender">:<br />
Female:<input type="radio" value="Female" name="gender">:<br />
Please choose type of residence::<br />
Steak:<input type="checkbox" value="Steak" name="food[]">:<br />
Pizza:<input type="checkbox" value="Pizza" name="food[]">:<br />
Chicken:<input type="checkbox" value="Chicken" name="food[]">:<br />

<textarea rows="5" cols="20" name="quote" wrap="physical">Enter your favorite quote!</textarea>:<br />

Select a Level of Education:<br />
<select name="education">
<option value="Jr.High">Jr.High</option>
<option value="HighSchool">HighSchool</option>
<option value="College">College</option></select>:<br />
Select your favorite time of day::<br />
<select name="TofD" size="3">
<option value="Morning">Morning</option>
<option value="Day">Day</option>
<option value="Night">Night</option></select>:<br />

<input type="submit" value="submit" name="submit"><br />
</form><br />

<?php

echo "<br /> \n";
echo "Here is what we got back from the AJAX Request: <br /><br /> \n";

print_r($_GET);

}

else {
echo "Hello, ".$Fname." ".$Lname.".<br />";
echo "You are ".$gender.", and you like ";
foreach ($food as $f) {
echo $f."<br />";
}
echo "<i>".$quote."</i><br />";
echo "You're favorite time is ".$TofD.", and you passed ".$education."!<br />";
}
?>
</div>

</body>

</html>

[/code]

Sign In

Ajax & PHP notepad how do I...

Recommended Posts

mattd8752

Link to comment

Share on other sites

ScotDiddle

Link to comment

Share on other sites

Archived

Browse

Activity

Important Information