[英]Form is not submiting by jQuery
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. 我想通过jQuery提交表单,也想通过jQuery在同一表单上上传图像,但我真的不明白这是什么问题。 When I click on submit button my page reload and form processed with jQuery.
当我单击提交按钮时,页面将重新加载并使用jQuery处理表单。
I am using CodeIgniter Framework version 3.0.1. 我正在使用CodeIgniter Framework 3.0.1版。
JS Code 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 CODE 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>
I have remove JS code from above HTML section. 我从上面的HTML部分中删除了JS代码。
NOTE : I have attached jquery/1.11.3/jquery.min.js
in <head>
of my HTML page. 注意 :我已在HTML页面的
<head>
中附加了jquery/1.11.3/jquery.min.js
。
Keep the submit URL in form itself. 将提交URL保留在表单本身中。 And in java script use below code.
并在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);
}
});
}));
});
There is a return false;
return false;
statement inside your .on('submit'
event handler before you make your $.ajax
request. 发出
$.ajax
请求之前,您的.on('submit'
事件处理程序中的语句。
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) {
您还可以使用
$("#process-data").submit(function(e) {
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" />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.