Jump to content

Ajax & PHP notepad how do I...


mattd8752

Recommended Posts

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]
Link to comment
https://forums.phpfreaks.com/topic/34168-ajax-php-notepad-how-do-i/
Share on other sites

  • 2 weeks later...
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">

<!--
function toggleBox(szDivID, iState) // 1 visible, 0 hidden
{
    if(document.layers)   //NN4+
    {
      document.layers[szDivID].visibility = iState ? "show" : "hide";
    }
    else if(document.getElementById)   //gecko(NN6) + IE 5+
    {
        var obj = document.getElementById(szDivID);
        obj.style.visibility = iState ? "visible" : "hidden";
    }
    else if(document.all) // IE 4
    {
        document.all[szDivID].style.visibility = iState ? "visible" : "hidden";
    }
}
// -->

</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]

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.