Form is not submiting by jQuery

Question

I want to submit form via jQuery and also want to upload image via jQuery on same form but really don't understand what is the issue. When I click on submit button my page reload and form processed with jQuery.

I am using CodeIgniter Framework version 3.0.1.

JS Code

<script> var loading_message = "<div class='row'><div class='col-md-4 col-md-offset-4'><img src='<?=site_url()?>assets/_admin/images/loading.gif'/></div></div>"; function add() { $('#right_block').html(loading_message); var form_data = { ajax : '1', actioncall : 'add_form', }; $.ajax({ url : "<?=site_url()?>itadmin/ajaxBanners", type : 'POST', data : form_data, success : function(data){ $('#right_block').html(data); } }); } $(document).ready(function() { add(); $('#addbanner').on('click',function(){ add(); }); $("#process-data").on('submit',(function(e) { e.preventDefault(); alert('Hello'); var form_data = { ajax : '1', link_togo : $('#link_togo').val(), title : $('#title').val(), description : $('#description').val(), keyword : $('#keyword').val(), placement : $('#placement').val(), location : $('#location').val(), status : $('#default').val(), actioncall : 'add' }; alert(form_data); $.ajax({ url : "<?=site_url()?>itadmin/ajaxBanner", type : 'POST', data : form_data, success : function(data) { $('#right_block').html('<div class="alert alert-primary"><h4>Banner added successfully!</h4></div>'); } }); })); }); </script>

HTML CODE

<div class="banner-right-inner2"> <h4 class="text-center"><u>Add Banner</u></h4> <form method="post" action="" id="process-data"> <div class="a-center"> <img class="img_pre" src="<?=site_url()?>assets/_admin/images/banner.png" /> <img class="delete_btn" src="<?php echo base_url();?>assets/_admin/images/delete_icon.png" style="display:none" /> <input type="file" name="imagefile" id="imagefile" required /> </div> <label>Link</label> <input id="link_togo" name="link_togo" type="text" /> <label>Heading</label> <input id="title" name="title" type="text" /> <label>Description</label> <input id="description" name="description" type="text" /> <label>Keywords</label> <input id="keyword" name="keyword" type="text" /> <div class="row clearfix"> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <label>Placement</label> <select id="placement" required> <option></option> <option value="top">Top</option> <option value="bottom">Bottom</option> <option value="others">Others</option> </select> </div> <div class="col-lg-6 col-md-6 col-sm-6 col-xs-12"> <label>Location</label> <select id="location" required> <option></option> <option value="Homepage">Homepage</option> <option value="static_page">Static Page</option> <option value="contact_page">Contact Page</option> </select> </div> </div> <div class="swicth-box"> <div class="demo" id="default"> <input type="checkbox" value="1" checked> </div> <h2>Status</h2> </div> <div class="clr"></div> <button id="submit" name="submit" type="submit" class="save-b">Save</button> </form> </div>

I have remove JS code from above HTML section.

NOTE: I have attached jquery/1.11.3/jquery.min.js in <head> of my HTML page.

You are getting exception somewhere in your script that's why browser will reload the page. You can pause script on exception from browser console. — Indrasinh Bihola
– Indrasinh Bihola, Commented Sep 23, 2015 at 10:15
add var loading_message = "<div class='row'><div class='col-md-4 col-md-offset-4'><img src='<?=site_url()?>assets/_admin/images/loading.gif'/></div></div>"; inside add function and check — Saty
– Saty, Commented Sep 23, 2015 at 10:18
@IndrasinhBihola I have tried to PAUSE it but page reload does not blocked by PAUSE — Hassaan
– Hassaan, Commented Sep 23, 2015 at 10:28

katamaraju · Accepted Answer · 2015-09-23 14:16:52Z

Keep the submit URL in form itself. And in java script use below code.

$(document).ready(function(){ $('#process-data').on('submit',(function(e) { e.preventDefault(); var edit_img=$("#imagefile").val(); var profile=document.getElementById('imagefile'); var profile_img=profile.value; var img = profile_img.substring(profile_img.lastIndexOf('.')+1).toLowerCase(); if(edit_img!='') { if(img == "jpg" || img == "jpeg" || img == "png" || img == "gif") { } else { alert('Only jpg,jpeg,png,gif files are allowed'); return false; } } var formData = new FormData(this); $.ajax({ type: "POST", url: $(this).attr('action'), data: formData, cache:false, contentType: false, processData: false, success: function(resp) { //alert(resp); //$("#preview_profileimage").html(resp); } }); })); });

AdityaParab · Accepted Answer · 2015-09-23 10:14:57Z

There is a return false; statement inside your .on('submit' event handler before you make your $.ajax request.

Remove the return statement and the form will submit.

alert(form_data); //return false; <------------ Commented

EDIT:

Just noticed, you also need to submit the form correctly.

$(document).on('submit','form#process-data',function(e){ // Your code });

Currently, you have

$("#process-data").on('submit',(function(e) {

You can also use, $("#process-data").submit(function(e) {

I have removed return false but still same issue is there.
$(document).on('submit','form#process-data',function(e){ works for me. Can you please help me out in uploading image on same form?

Chintan Mathukiya · Accepted Answer · 2015-09-23 10:41:46Z

replace button with input

<button id="submit" name="submit" type="submit" class="save-b">Save</button>

replace with

<input id="submit" name="submit" type="submit" class="save-b" value="Save" />

Collectives™ on Stack Overflow

Form is not submiting by jQuery

3 Answers 3

Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

4 Comments

Comments

Linked

Related