Форма не отправляется jQuery

Я хочу отправить форму через jQuery, а также загрузить изображение через jQuery в той же форме, но на самом деле не понимаю, в чем проблема. Когда я нажимаю кнопку отправки, моя страница перезагружается и обрабатывается с помощью jQuery.Форма не отправляется jQuery

Я использую CodeIgniter Framework версии 3.0.1.

JS код

<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 КОД

<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>

меня удалить JS код из выше разделе HTML.

ПРИМЕЧАНИЕ: Я приложил jquery/1.11.3/jquery.min.js в <head> моей HTML-страницы.

источник

2015-09-23 Hassaan

Ошибка в консоли? –

@ShailendraSharma в консоли нет ошибок. – Hassaan

Вы получаете исключение где-то в своем скрипте, поэтому браузер перезагрузит страницу. Вы можете приостановить выполнение сценария на исключении из консоли браузера. –

В вашем .on('submit' операторе событий есть return false;, прежде чем вы сделаете свой запрос $.ajax.

Удалить заявление о возврате и форму отправит.

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

EDIT:

Просто заметил, вы также должны правильно представить форму.

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

В настоящее время у вас есть

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

Вы также можете использовать, $("#process-data").submit(function(e) {

источник

2015-09-23 10:10:39 AdityaParab

Но есть и' alert ', но предупреждения не происходит. – Hassaan

Я удалил 'return false', но все равно такая же проблема есть. – Hassaan

Проверьте обновленный ответ. :) – AdityaParab

кнопку заменить вход

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

заменить

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

источник

2015-09-23 10:41:46

Я уже пробовал, но не успел. – Hassaan

Храните URL-адрес отправки в самой форме. И в java-скрипте используйте ниже код.

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

источник

2015-09-23 14:16:52 katamaraju

Форма не отправляется jQuery

ответ

Смежные вопросы