CODEWITHSUNDEEP
jqueryhtmlajax
Tiny
Tiny

Reputation: 363

jquery click function sends to refering page not the url'd page

I have a jquery ajax click function for a form, when it sends without any inputs it sends to the correct php page, but when user inputs have been filled in it sends to the same page it sends from, also it is sent as post and gets changed to get

jquery:

<script type="text/javascript">

$(document).ready(function() {

    $("#videoToUpload").click(function() {

var vidName = $("#vidName").val();
var videoDescription = $("#videoDescription").val();
var albumName1 = $("#choosevidCat").val();
var vidFile =$("#video").val();

  // Put an animated GIF image insight of content
  $("#loader").empty().html('<img src="/images/loader.gif" class="vidloader1"/>');

        $.post("includes/vid_upload.inc.php",{vidName: vidName, videoDescription: videoDescription, albumName1: albumName1,  vidFile: vidFile}, function(json)
         {

            if(json.result === "success") {

        $("#viduploadResult").html( "The Video "+vidName+" has been Uploaded!");


//        // First remove all the existing options
//       $('#choosevidCat').empty();
//
//        // Load the content:
//        $('#choosevidCat').load(location.href + "#choosevidCat > *");

    }else{
        $("#viduploadResult").html(json.message);
    }   

         });
    });
})
</script>

html (with some embedded php):

 <div id="title">Upload Videos</div>
  <div class="vidUpload">
    <form id="vidUpload">
<input name="vidName" type="text" required="required" id="vidName" placeholder="Enter Video Name Here" title="Video Name">
<br>
<textarea name="videoDescription" id="videoDescription" required class="videoDescription" placeholder="Enter Video Description Here" title="Enter Video Description Here"></textarea>

<select name="select" required class="choosevidCat" id="choosevidCat">
<option value="">Choose the Catagory for your Video Here</option>
            <?php 
    $sql = ("SELECT albumId, albumName, albumSelect FROM albums");
if (mysqli_connect_errno()) {
  echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($mysqli, $sql);

while($row = mysqli_fetch_array($result)) {
$albumid = ($row['albumId']);
$album_name = ($row['albumName']);
$album_name1 = ($row['albumSelect']);
echo "<option value=".$album_name1. ">$album_name</option>";
}

?>


<option id="createCat" value="createCatagory">Create New Catagory Here</option>
</select>

<input type="file" name="video" id="video">
<input type="submit" name="videoToUpload" id="videoToUpload" value="Upload">

</form>
<div id="loader"></div>
<div id="viduploadResult"></div>

can anyone see what I'm doing wrong please, I'm at a loss

Upvotes: 0

Views: 40

Answers (2)

Just Lucky Really
Just Lucky Really

Reputation: 1401

You can get rid of the <form> tags, and change the <input type="submit"> to <input type="button"> which will stop the HTML form trying to handle the post. The reason it is sending as GET is because it is the default method for forms (And you havn't specified a method).

Your jQuery takes care of handling the input fields, and posting the data, so you don't need the form as such.

Upvotes: 1

Shawn Jacobson
Shawn Jacobson

Reputation: 1352

Change the button to input type="button" to prevent automatic form submission

Upvotes: 2

Related Questions