jquery-自动提交表单

amrnrhlw  于 2021-09-13  发布在  Java
关注(0)|答案(2)|浏览(369)

我想自动提交表格,流程如下。
输入类型='file'不应显示。
如果单击“提交”按钮,则应打开文件弹出窗口。
选择文件后,表单应自动提交并进行验证。
我完成了大部分工作,但在提交表格时遇到了问题。
注意->我使用css样式隐藏输入类型='file'。
这是我的HTMLROM

<form method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
 <input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
 <br/>
 <input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>

这是我的javascript

<script>
$(document).ready(function(){

    function validation() {
        //validation here
    }

    $('.submit').click(function(event) {
        event.preventDefault();
        $('#myfile').click();
    });

});
</script>
vhmi4jdf

vhmi4jdf1#

这是你想要的吗?

$(document).ready(function(){

    function validation() {
        //validation here
        alert('in function validation')
        $('#myForm').submit();
    }

    $('.submit').click(function(event) {
        event.preventDefault();
        $('#myfile').click();
    });

    $('#myfile').on('change',function(){
        validation();
    });
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form method="post" class="form" id="myForm" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
  <input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
  <br/>
  <input type="submit" class="submit btn btn-primary" value="Import csv"/>
</form>
jtw3ybtb

jtw3ybtb2#

不要使用提交按钮,而是提供隐藏的 input type="file" A. <label> 元素并将其样式设置为按钮。这将使它看起来像一个提交按钮,但会提示文件上传。
那就听录音 change 隐藏文件输入上的事件。每次上载文件时都会触发此事件。在这里,您将需要进行验证。如果验证成功,请使用jquery手动提交表单 .submit() 方法。

$(document).ready(function() {
  function validation(files) {
    //validation here, now returns true for demonstration.
    return true;
  }

  $('#myfile').change(function(event) {
    // Check if files are valid.
    const isValid = validation(event.target.files);

    // If the are..
    if (isValid) {
      // ..submit the form.
      $('#myform').submit();
    }
  });
});
.btn {
  display: inline-block;
  padding: 0.5rem;
  border: 1px solid #d0d0d0;
  border-radius: 3px;
  background-color: #f0f0f0;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<form id="myform" method="post" class="form" action="<?php echo base_url('csv/store'); ?>" enctype="multipart/form-data">
  <label for="myfile" class="submit btn btn-primary">Import CSV</label>
  <input type="file" id="myfile" name="myfile" accept=".csv" style="display:none">
</form>

相关问题