PHP Ajax表单提交

Question

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 1

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();
  });
});