Ajax Form Submit appends query strings to url and reloads page

Question

I have an ajax script that submits a form on button click, the script appends the form data to the URL while submitting which isn't safe by any standard, the script works well for other forms except the one am currently debugging. just reloads the page with an annoyingly long URL.

edited: added form method ="post" to the form but still not working. solve url issue though

this is my ajax script:

$("form#PostItemz").click(function(){

            var formData = new FormData(this);

            $.ajax({
                url: 'inc/modules/post_data.php',
                type: 'POST',
                data: formData,
                async: false,
                success: function (data) {
                   alert(data);
                },
                cache: false,
                contentType: false,
                processData: false
            });

            return false;
        });

and this is my html form:

             <form method="post"  id="PostItemz" class="post publisher-box" >

       <div class="panel panel-white post panel-shadow">
          <div id="post-textarea">
                       <img class="post-avatar" src="profile/maxwell/images (1).jpg">
                      <i class="fa fa-spinner fa-spin" id="loading_indicator"></i>
             <textarea onkeyup="textAreaAdjust(this, 70)" onclick="Wo_ShowPosInfo();" name="postText" class="form-control postText" cols="10" rows="3" placeholder="What&#039;s new ? @groups " dir="auto"></textarea> 
          </div>

    <div id="post-status">

      </div>

                <div class="publisher-hidden-option" id="video-form">
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-video-camera"></i>
                <input name="videocount" id="video_value" type="text" class="form-control" readonly>
             </div>
          </div>
                   <!-- ###music widget -->  
                   <div class="publisher-hidden-option" id="music-form"> 
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-music"></i> 
               <input name="musiccount" type="text" class="form-control" id="audio_value"  readonly>
             </div>
             <div class="create-album pull-right" onclick="Wo_OpenAlbum();">
               <div class="create-text">
                 Add to album     <input name="OkAlbum" value="AddToAlbum" type="checkbox" />      </div>
             </div> 
                <div class="clear"></div>
          </div>
          <div class="publisher-hidden-option" id="photo-form" >
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-file-image-o"></i>
                <input name="phtoscount" id="photo_value" type="text" class="form-control" readonly>
             </div>
             <div class="create-album pull-right" onclick="Wo_OpenAlbum();">
               <div class="create-text">
                 Add to album     <input name="OkAlbum" value="AddToAlbum" type="checkbox" />      </div>
             </div>
             <div class="clear"></div>  
          </div>
          <div class="publisher-hidden-option" id="file-form">
             <div class="inner-addon left-addon">
                <i class="glyphicon fa fa-file-text-o"></i>
                <input name="filename" id = "file_value" type="text" class="form-control" readonly>
             </div>
          </div>
          <div id="results"></div>
          <div class="publisher-hidden-option">
             <div id="progress">
                <span id="percent">0%</span>
                <div class="progress">
                 <div id="bar" class="progress-bar progress-bar-striped active"></div> 
                </div>
                <div class="clear"></div>
             </div>
          </div>
          <div class="publisher-box-footer">
             <div class="row col-lg-2 pull-right">
                <button class="form-control btn btn-main">
                <i class="fa fa-edit progress-icon "></i> <span id="postbutton">Post</span></button>
             </div>
            <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-camera" ></i><input type="file" id="publisher-photos" accept="image/x-png, image/gif, image/jpeg, image/pjpeg" name="postPhotos[]" multiple>
                      </span>
                   </div> 
                </div>
             </div>

                      <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-video-camera"></i><input type="file" onchange="xVideo();" id="publisher-video" name="postVideo" accept="video/*">
                      </span>
                   </div>
                </div>
             </div>   
             <div class="row pull-left emo-form" >
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-smile-o "></i>
                      </span>
                   </div>
                </div>
             </div>
              <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <div class="dropdown">
      <button class="btn btn-default btn-file dropdown-toggle" type="button" data-toggle="dropdown"><i class="fa fa-caret-down"></i></button>
      <ul class="dropdown-menu">
        <li>
                   <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-file-text-o"></i><input type="file" onchange="xFile();" id="publisher-file" name="postFile">
                      </span>
                   </div>
                </div>
             </div>

                      <div class="row pull-left">
                <div class="poster-left-buttons">
                   <div class="input-group">
                      <span class="btn btn-default btn-file">
                      <i class="fa fa-music"></i><input type="file" onchange="xAudio();" id="publisher-music" name="postMusic" accept="audio/*">
                      </span>

                   </div>
                </div>
             </div>
                 </li>
      </ul>
    </div>
                   </div>
                </div>
             </div>


             <div class="input-group">
                <div class="pull-right charsLeft-post"><span id="charsLeft"></span></div>
             </div>
             <div id="status"></div>
                      <div class="row pull-right">
                <div class="poster-left-buttons">
                   <div class="publisher-hidden-option inputsm">
                      <select name="postPrivacy" class="form-control inputsm">
                                                 <option value="3" selected>My Groups</option>
                            <option value="0" >Everyone</option>
                                                    <option value="1" disabled>Private</option>
                                                                   </select>
                   </div>
                </div>
             </div>
                      <div class="clear"></div>
          </div>
       </div>
             <input type="hidden" name="hash_id" value="c1183f16ab610230ebe8a9bcb331d2d6f7ebbf66">
       <input type="hidden" name="postRecord" value="" id="postRecord">
    </form>

all what the script at inc/modules/post_data.php does is to echo "hello world"; but nothing seems to work.

Answer 1

Don't forget to add an event.preventDefault() line to avoid having the browser perform the default behavior, which is reloading page on submit.

Try something like

$("#PostItemz").on('submit', function(event){
event.preventDefault()
var formData = new FormData(this);

    $.ajax({
        url: 'inc/modules/post_data.php',
        type: 'POST',
        data: formData,
        success: function (data) {
           alert(data);
        },
        cache: false,
        contentType: false,
        processData: false
    });

});

This should at least solve the reload issue. Also, if you want to target the form, use submit event: $("#form_id").on('submit', function() {//do stuff}) . If you want to target the button in itself, then you can do $("#button_id").on('click', function() {//do stuff}) but for a form I'd advise the first solution.

EDIT : If you place your code in the head, it loads before the rest of the page, thus tries to bind to an ID that does not exists (at the time of processing the script). To avoid this, you should either:

• place the code at the end of the body, just before the </body> tag

• use a $(function() {//stuff}) (shortened for of the $(document).on('ready', function() {//do stuff}) ) to wrap up your jquery code, essentially telling the browser: "wait for the full page to load before executing this script"

The later translates as the following code in your case:

$(function() {
$("#PostItemz").on('submit', function(event){
    event.preventDefault()
    var formData = new FormData(this);

        $.ajax({
            url: 'inc/modules/post_data.php',
            type: 'POST',
            data: formData,
            success: function (data) {
               alert(data);
            },
            cache: false,
            contentType: false,
            processData: false
        });

    });

});

Answer 2

You don't click a form, you submit it

$("#PostItemz").on('submit', function(){

    var formData = new FormData(this);

    $.ajax({
        url     : 'inc/modules/post_data.php',
        type    : 'POST',
        data    : formData,
        success : function (data) {
           console.log(data);
        },
        contentType: false,
        processData: false
    });

    return false;
});