I have a website where you can edit and format text, then you can save it on to the server. I am using jquery to send the data to a PHP page where it will be saved. My site won't send the name of the file and the formatted text to PHP.
Here is my html code:
<div id="editor" contenteditable="true">
This is the editable text.
</div>
<input type="text" id="name" placeholder="File Name">
<input type="submit" id="save" value="Save">
<script>
$(document).ready(function() {
$("#save").on("click", function(event) {
var formData = {text: $("#editor").html(), name: $("#name").val()};
event.preventDefault();
$.ajax({
url: 'freewordsave.php',
type:'POST',
data: formData,
success: function(msg)
{
alert('Your file was saved!');
}
});
});
});
</script>
Here is also my PHP code:
$name = $_POST['name'];
$text = $_POST['data'];
$file = fopen("./location/" . $name . ".html", "w") or die("<script> alert('Error'); </script>");
fwrite($file, $text);
fclose($file);
My code won't even bring up the alert in javascript.
Thank you.
I fixed my code after Simone Rossaini posted a comment.
I forget a } closing bracket at the end of formData.
Fixed JQuery Code.
$(document).ready(function() {
$("#save").on("click", function(event) {
var formData = {text: $("#editor").html(), name: $("#name").val()};
event.preventDefault();
$.ajax({
url: 'freewordsave.php',
type:'POST',
data: formData,
success: function(msg)
{
alert('Your file was saved!');
}
});
});
});
I know my PHP said $_POST['data'] but that was a mistake I made when I asked my question it wasn't actually like that in my PHP file.
Thank you
Related
I have a Leaflet map, and a text input. I want to take the address from the textbox, run it through a PHP script, and get the result all through jQuery.
Here is my form:
<form id="mapcheck" method="POST" action="geo.php">
<input id="largetxt" type="text" name="checkAddress">
<input id="button" type="submit" name="submit" value="Check">
</form>
Here is part of the PHP:
<?php
if (isset($_POST["checkAddress"])) { //Checks if action value exists
$checkAddress = $_POST["checkAddress"];
$plus = str_replace(" ", "+", $checkAddress);
$json = file_get_contents('https://maps.googleapis.com/maps/api/geocode/json?address=' . $plus . '&key=GMAPSKEY');
$obj = json_decode($json);
$mapLat = $obj->results[0]->geometry->location->lat;
$mapLng = $obj->results[0]->geometry->location->lng;
$coords = ('' . $mapLat . ', ' . $mapLng . '');
return $coords;
}
?>
And the jQuery:
$(document).ready(function() {
$("#button").click(function(){
$.ajax({
url: "geo.php",
method: "POST",
data: {
checkAddress: $("#largetxt").val()
},
success: function(response){
console.log(response);
}
});
});
});
I need to listen on submit of the form via jQuery (NOT PHP), run it through a geocode script, then take that result and put it through regular JavaScript (Leaflet map.) I have played around with the AJAX feature of jQuery to no avail. There is a very simple solution to this, but I have not figured it out.
UPDATE: Problem resolved, thanks Vic.
You would need AJAX. Remove the form element but keep the inputs.
$("#button").click(function(){
$.ajax({
url: "geo.php",
method: "POST",
data: {
checkAddress: $("#largeText").val()
},
success: function(response){
console.log(response);
//your script
}
})
});
I have a form with an input field for a userID. Based on the entered UID I want to load data on the same page related to that userID when the user clicks btnLoad. The data is stored in a MySQL database. I tried several approaches, but I can't manage to make it work. The problem is not fetching the data from the database, but getting the value from the input field into my php script to use in my statement/query.
What I did so far:
I have a form with input field txtTest and a button btnLoad to trigger an ajax call that launches the php script and pass the value of txtTest.
I have a div on the same page in which the result of the php script will be echoed.
When I click the button, nothing happens...
Test.html
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
//AJAX CALL
function fireAjax(){
$.ajax({
url:"testpassvariable.php",
type:"POST",
data:{userID:$("#txtTest").val(),},
success: function (response){
$('#testDiv').html(response);
}
});
}
</script>
</head>
<body>
<form name="testForm" id="testForm" action="" method="post" enctype="application/x-www-form-urlencoded">
<input type="text" name="txtTest" id="txtTest"/>
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"
<input type="submit" name="SubmitButton" id="SubmitButton" value="TEST"/>
</form>
<div id="testDiv" name="testDiv">
</div>
</body>
The submit button is to insert updated data into the DB. I know I have to add the "action". But I leave it out at this point to focus on my current problem.
testpassvariable.php
<?php
$player = $_POST['userID'];
echo $player;
?>
For the purpose of this script (testing if I can pass a value to php and return it in the current page), I left all script related to fetching data from the DB out.
As the documentation says 'A page can't be manipulated safely until the document is ready.' Try this:
<script>
$(document).ready(function(){
//AJAX CALL
function fireAjax(){
$.ajax({
url:"testpassvariable.php",
type:"POST",
data:{userID:$("#txtTest").val(),},
success: function (response){
$('#testDiv').html(response);
}
});
}
});
</script>
You need to correct two things:
1) Need to add $(document).ready().
When you include jQuery in your page, it automatically traverses through all HTML elements (forms, form elements, images, etc...) and binds them.
So that we can fire any event of them further.
If you do not include $(document).ready(), this traversing will not be done, thus no events will be fired.
Corrected Code:
<script>
$(document).ready(function(){
//AJAX CALL
function fireAjax(){
$.ajax({
url:"testpassvariable.php",
type:"POST",
data:{userID:$("#txtTest").val(),},
success: function (response){
$('#testDiv').html(response);
}
});
}
});
</script>
$(document).ready() can also be written as:
$(function(){
// Your code
});
2) The button's HTML is improper:
Change:
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"
To:
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"/>
$.ajax({
url: "testpassvariable.php",
type: "POST",
data: {
userID: $("#txtTest").val(),
},
dataType: text, //<-add
success: function (response) {
$('#testDiv').html(response);
}
});
add dataType:text, you should be ok.
You need to specify the response from the php page since you are returning a string you should expect a string. Adding dataType: text tells ajax that you are expecting text response from php
This is very basic but should see you through.
Change
<input type="button" id="btnLoad" name="btnLoad" onclick="fireAjax();"/>
Change AJAX to pass JSON Array.
data = $(this).serialize() + "&" + $.param(data);
$.ajax({
type: "POST",
dataType: "json",
url: "action.php",
data: data,
....
// action.php
header('Content-type: application/json; charset=utf-8');
echo json_encode(array(
'a' => $b[5]
));
//Connect to DB
$db = mysql_connect("localhst","user","pass") or die("Database Error");
mysql_select_db("db_name",$db);
//Get ID from request
$id = isset($_GET['id']) ? (int)$_GET['id'] : 0;
//Check id is valid
if($id > 0)
{
//Query the DB
$resource = mysql_query("SELECT * FROM table WHERE id = " . $id);
if($resource === false)
{
die("Database Error");
}
if(mysql_num_rows($resource) == 0)
{
die("No User Exists");
}
$user = mysql_fetch_assoc($resource);
echo "Hello User, your number is" . $user['number'];
}
try this:- for more info go here
$(document).ready(function(){
$("#btnLoad").click(function(){
$.post({"testpassvariable.php",{{'userID':$("#txtTest").val()},function(response){
$('#testDiv').html(response);
}
});
});
});
and i think that the error is here:-(you wrote it like this)
data:{userID:$("#txtTest").val(),}
but it should be like this:-
data:{userID:$("#txtTest").val()}
happy coding :-)
I have a contenteditable div like this:
<form>
<div name="new_post" class="post" contenteditable="true"></div>
<button type="submit">Submit</button>
</form>
The contenteditable div allows bold and italic tags, but no other tag.
My issue is that if the user types something like Hello there <u>world</u>!, it will save in the database as Hello there. It seems to remove everything after the tags and I don't know why.
I'm using AJAX and PHP to handle posts, so here's the rest of the code.
Ajax:
$(document).ready(function() {
$(document).on("submit", "form", function(event) {
event.preventDefault();
alert($('.post').html()); // added this to debug it. This prints "Hello there <u>world</u>!"
$.ajax({
url: 'php/post.php',
type: 'POST',
dataType: 'json',
data: $(this).serialize() + "&post_field=" + $('.post').html(),
success: function(data) {
alert(data.message);
}
});
});
});
PHP:
<?php
$post = $_POST["post_field"];
// query to insert post into database goes here
$array = array('message' => $post);
echo json_encode($array);
?>
Please help!
Change:
$('.post').html()
to:
encodeURIComponent($('.post').html())
The HTML characters need to be encoded in a URL parameter.
I've looked at many posts here on SO and I thought that what I have would work in terms of sending form data using AJAX without refreshing the page. Unfortunately it's not working and I'm at a loss to see what it going wrong so here is my code:
profile.php
<script>
$(function () {
$('form#commentform').on('commentsubmit', function(e) {
$.ajax({
type: 'post',
url: 'insertcomment.php',
data: $(this).serialize(),
success: function () {
alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
$("#comment").val('');
}
});
e.preventDefault();
});
});
</script>
<form id='commentform' method='post'>
<textarea class='comment' id='comment'></textarea>
<input type='hidden' name='activityid' value='$activityid'>
//$activityid is the ID of the status so the database knows what status ID to connect the comment with
<input type='submit' name='commentsubmit' value='Comment'>
</form>
insertcomment.php
<?php
include 'header.php';
$activityid=htmlspecialchars($_POST['activityid'], ENT_QUOTES);
$comment=htmlspecialchars($_POST['comment'], ENT_QUOTES);
$commentsql=$conn->prepare('INSERT INTO wp_comments (user_id, activity_id, comment, datetime) VALUES (:userid, :friendid, :comment, CURRENT_TIMESTAMP)');
$commentsql->bindParam(':userid', $_SESSION['uid']);
$commentsql->bindParam(':activityid', $activityid);
$commentsql->bindParam(':comment', $comment);
$commentsql->execute();
include 'bottom.php';
?>
The end result hopefully is that the comment gets inserted into the database without refreshing the page and then the text area is reset.
As of right now when I click the comment submit button it refreshes the page.
try this:
$(document).ready(function(){
$('form#commentform').submit(function( e ) {
var postData = $(this).serializeArray();
$.ajax({
type: 'post',
url: 'insertcomment.php',
data: postData,
success: function () {
alert('MUST ALERT TO DETERMINE SUCCESS PAGE');
$("#comment").val('');
}
});
e.preventDefault();
});
});
I've been searching this forum, but I had no good result. I have this HTML:
<form method="post" id="postform">
<input type="text" name="message" id="message" placeholder='Say "Hello!"' class="mymessage" maxlength="255"/>
<br />
<input id="submit" type="button" value="Send"/>
</form>
PHP:
<?php
include ('connect.php');
session_start();
if (isset($_POST['message'])){
mysql_query("INSERT INTO messages VALUES ('','".$_POST['message']."','".$_SESSION['user']."')");
}
?>
And jQuery:
$('#submit').click(
function(){
var message = $('#message').val();
$.ajax({
url: post.php,
type:'POST',
data: {"message":message}
});
});
I need to pass #message content to PHP without refreshig the page. This is what I've made, but it's not working.
Check your syntax:
Wrap url with quotes '
Remove single quotes around 'message' variable
$.ajax({
url: 'post.php',
type: 'POST',
data: {message : message}
}).done(function( msg ) {
alert( "Data Saved: " + msg );
});
See the first example of $.ajax() at the bottom of its documentation page.
I need to pass #message content to PHP without refreshig the page.
Handle form submit instead:
$("#postform").submit(function(){
var message = $('#message').val();
$.ajax({
url: 'post.php',
type:'POST',
data: {message:message}
}).done(function( data) {
// handle response from the server in case of success.
});
return false; //to prevent submitting and refreshing the page.
});