javascript - Ajax Form Submit appends query strings to url and reloads page -
i have ajax script submits form on button click, script appends form data url while submitting isn't safe standard, script works other forms except 1 debugging. reloads page annoyingly long url.
edited: added form method ="post" form still not working. solve url issue though
this 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 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'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 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 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 script @ inc/modules/post_data.php echo "hello world"; nothing seems work.
don't forget add event.preventdefault() line avoid having browser perform default behavior, reloading page on submit.
try 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 @ least solve reload issue. also, if want target form, use submit event: $("#form_id").on('submit', function() {//do stuff}) . if want target button in itself, can $("#button_id").on('click', function() {//do stuff}) form i'd advise first solution.
edit: if place code in head, loads before rest of page, tries bind id not exists (at time of processing script). avoid this, should either:
place code @ end of body, before
</body>taguse
$(function() {//stuff})(shortened of$(document).on('ready', function() {//do stuff})) wrap jquery code, telling browser: "wait full page load before executing script"
the later translates following code in 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 }); }); }); 
Comments
Post a Comment