S. Paw S. Paw - 5 months ago 30
Ajax Question

PHP Ajax Form Submission

I have the following code for my form:

<form id="editpageform" method="post">
<div class="form-group">
<label for="title">Page Title</label>
<input type="text" id="title" name="title" placeholder="Page Title" value="<?php echo $pageRes["title"];?>" class="form-control" required>
</div>
<div class="form-group">
<label for="description">Page Description (Max 160 Characters)</label>
<textarea id="description" rows="4" class="form-control" name="description"><?php echo $pageRes["description"];?></textarea>
<span id="remain_desc"><?php echo 160 - strlen($pageRes["description"]);?></span> Characters Remaining
</div>
<div class="form-group">
<label for="body">Page Content</label>
<textarea name="body" class="form-control tinymce"><?php echo $pageRes["body"];?></textarea>
</div>
<div class="form-group">
<label for="status">Page Status</label>
<select id="status" class="form-control" name="status">
<option value="Draft" <?php echo ($pageRes["status"] == "Draft") ? "selected" : "" ?>>Draft</option>
<option value="Published" <?php echo ($pageRes["status"] == "Published") ? "selected" : "" ?>>Published</option>
</select>
</div>
<div class="form-group">
<label for="url">Page URL</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon2">http://www.champpaw.co.uk/</span>
<input type="text" name="url" id="url" value="<?php echo substr($pageRes["slug"], 1);?>" class="form-control">
</div>
</div>
<div class="form-group">
<label for="menutitle">Menu Title</label>
<input type="text" name="menutitle" id="menutitle" class="form-control" value="<?php echo $pageRes["menutitle"];?>">
</div>
<div class="form-group">
<label for="menutitle">Menu Order</label>
<input type="number" name="menu" id="menu" class="form-control" value="<?php echo $pageRes["menu"];?>">
</div>
<div class="form-group">
<input type="hidden" readonly id="id" name="id" value="<?php echo $pageRes["id"];?>">
<button class="btn btn-default" name="updatepagebtn" id="updatepagebtn">Update Page</button>
</div>
</form>


And this for my JS:

$('#updatepagebtn').click(function() {
$(this).preventDefault();
$.ajax({
type:"post",
url:"process/editpage.php",
data: $("#editpageform").serialize(),
success: function(response){
$(".result").html(response);
}
});
});


And this for my
process/editpage.php


<?php
session_start();
if((!isset($loginpage)) && $_SESSION['logged'] != true){
header('Location: login.php');
die();
}
require_once("../../config.php");

if(isset($_POST["updatepagebtn"])){
$updatepage = $db->prepare("UPDATE content SET title=:title, description=:desc, body=:body, status=:status, slug=:url, menutitle=:menutitle, menu=:menu WHERE id=:id");

$updatepage->bindParam(':title', $_POST["title"]);
$updatepage->bindParam(':desc', $_POST["description"]);
$updatepage->bindParam(':body', $_POST["body"]);
$updatepage->bindParam(':status', $_POST["status"]);
$updatepage->bindParam(':menutitle', $_POST["menutitle"]);
$updatepage->bindParam(':menu', $_POST["menu"]);
$updatepage->bindParam(':id', $_POST["id"]);
$url = "/".$_POST["url"];
$updatepage->bindParam(':url', $url);

if($updatepage->execute()){
echo "Success!";
}else{
echo "Error updating page. Ensure you have entered a valid and unique URL.";
}
}else{
echo "Error";
}


However when I submit the form it just seems to reload instead of submitting the form and updating the table. I tried adding
action="process/editpage.php
to the form and it worked fine then so I think the problem is with the jQuery but I am not sure what it is.

Can anyone see the problem and let me know what it is so I can get it fixed?

Thanks

Answer

Wrap your jQuery code inside $(document).ready(function(){ Also change code function(e) { $(this).preventDefault() to function(e) { e.preventDefault()

$(document).ready(function() {
  $('#updatepagebtn').click(function(e) {
    $.ajax({
      type: "post",
      url: "process/editpage.php",
      data: $("#editpageform").serialize(),
      success: function(response) {
        $(".result").html(response);
      }
    });
    e.preventDefault();
  });
});

Another way

$(document).ready(function() {
  $('#editpageform').submit(function(e) {
    $.ajax({
      type: "post",
      url: "process/editpage.php",
      data: $("#editpageform").serialize(),
      success: function(response) {
        $(".result").html(response);
      }
    });
    e.preventDefault();
  });
});