提交时的HTML表单和javascript不起作用

我已经检查了很多线程，似乎找不到解决问题的有效方法。我是javascript新手，正在寻求帮助，以允许我的页面运行javascript并通过单击一个提交按钮提交表单。 我正在使用codeigniter，并调用一个名为uploadEx（）的javascript函数；将画布提交到目录。提交到目录本身工作，但与表单的提交按钮不同。如果有人能帮我让按钮分享这两个动作那就太好了

<div>

    </div>

    <form method="post" accept-charset="utf-8" name="form1">
        <input name="hidden_data" id='hidden_data' type="hidden"/>
    </form>

    <script>
        function uploadEx() {
            var canvas = document.getElementById("canvasSignature");
            var dataURL = canvas.toDataURL("image/png");
            document.getElementById('hidden_data').value = dataURL;
            var fd = new FormData(document.forms["form1"]);

            var xhr = new XMLHttpRequest();
            xhr.open('POST', '/inc/img/inspection/upload_data.php', true);
            document.forms["form"].submit();

            xhr.upload.onprogress = function(e) {
                if (e.lengthComputable) {
                    var percentComplete = (e.loaded / e.total) * 100;
                    console.log(percentComplete + '% uploaded');
                   //alert('Succesfully uploaded');
                }

            };

            xhr.onload = function() {

            };
            xhr.send(fd);
        };
    </script
<div align="center">

  <?php if( !function_exists('form_open')): ?>
  <?php $this->load->helper('form'); ?>
  <?php endif;?>
  <form  id="form" onClick="uploadEx(); return true;" method="post">



  <?php echo form_label('Trailer Number','trlr_num'); ?>
  <?php echo form_input(array('name'=>'trlr_num','type'=>'text')); ?>

  <?php echo form_label('Seal','seal'); ?>
  <?php echo form_input(array('name'=>'serial_num','type'=>'text')); ?>


  <?php echo form_fieldset_close(); ?>
  <br />

  <input type="submit" name="submit" value="submit" content="submit"/>
<?php echo form_close(); ?>

函数uploadEx（）{
var canvas=document.getElementById（“canvasSignature”）；
var dataURL=canvas.toDataURL（“image/png”）；
document.getElementById（'hidden_data'）。value=dataURL；
var fd=新表单数据（document.forms[“form1”]）；
var xhr=new XMLHttpRequest（）；
xhr.open（'POST'，'/inc/img/inspection/upload_data.php'，true）；
document.forms[“form”].submit（）；
xhr.upload.onprogress=函数（e）{
if（如长度可计算）{
var percentComplete=（e.loaded/e.total）*100；
console.log（完成百分比+'%uploaded'）；
//警报（“成功上传”）；
}
};
xhr.onload=函数（）{
};
xhr.send（fd）；
};

---

您是否尝试了提交事件而不是onclick？我想是的，它会对你有用的。

---

此外，您的第一个

…的功能是什么？
我使用Imran Qarner的建议解决了我的问题，将onsubmit事件从调用codeigniter的php代码中移出。
我尝试了onsubmit而不是onclick，但它不会运行。如果我创建一个作为复选框的输入并单击onclick，那么它会在我每次单击时按预期运行该函数。如果我在同一个场景中尝试提交，它不会通过。另外，我正在使用第一个表单将数据发布到upload_data.php文件中。该文件获取图像并解码为base64，重命名它，然后将其放置在目录中。