[英]Not Able to Submit a Form Using jQuery On Click method
Using jQuery Form , for some reason I have to submit a form through jQuery on
method like this: 使用jQuery Form ,由于某种原因,我必须通过jQuery
on
方法on
提交表单:
$("#submitImage").on("click", function() {
$('#loaderForm').ajaxForm(function() {
alert("Uploaded SuccessFully");
});
});
but this is not submitting the form! 但这不是提交表格! Can you please take a look at this demo and let me know what i am missing or doing wrong here?
您能否看一下这个演示,让我知道我在这里想念的地方或做错了什么?
$("#uploadFile").change(function() { $('#image_preview').html(""); var total_file=document.getElementById("uploadFile").files.length; for(var i=0;i<total_file;i++) { $('#image_preview').append("<img src='"+URL.createObjectURL(event.target.files[i])+"'>"); } }); $("#submitImage").on("click", function() { $('#loaderForm').ajaxForm(function() { console.log("Uploaded SuccessFully"); }); });
input[type=file]{ display: inline; } #image_preview{ border: 1px solid black; padding: 10px; } #image_preview img{ width: 200px; padding: 5px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.form/4.2.2/jquery.form.min.js"></script> <div class="container"> <form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data"> <input type="file" id="uploadFile" name="uploadFile[]" multiple/> </form> <br/> <button type="button" class="btn btn-success" id='submitImage' >Upload Image </button> <div id="image_preview"></div> </div>
按钮类型应为“提交”
<button type="submit" class="btn btn-success" id='submitImage' >Upload Image </button>
move the submit button inside the <form>
tag and its type should by submit
将提交按钮移到
<form>
标记内,其类型应通过submit
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
<input type="submit" class="btn btn-success" id='submitImage' value='Upload Image' />
</form>
Otherwise, you can just call $('#loaderForm').submit();
否则,您可以调用
$('#loaderForm').submit();
from within the button click event; 从按钮单击事件中;
<form id="loaderForm" action="uploadFile.php" method="post" enctype="multipart/form-data">
<input type="file" id="uploadFile" name="uploadFile[]" multiple/>
</form>
<button type="button"
onclick="javascript:function(){ $('#loaderForm').submit(); }"
class="btn btn-success" id='submitImage' >Upload Image
</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.