Javascript JS:formsubmit不'；我不接受附加值

以下问题：在提交表单之前，我需要在表单的输入字段中放置一个值。我使用jQuery submit（）函数来处理这个问题。点击提交后，输入值会直观地显示在输入字段中，但发送表单时，我的输入字段中没有设置任何值。我的验证处理程序说该字段是必需的

以下是我的代码的相关部分：

HTML: 
<form id="form" method="POST">
   <input id="gps_daten" type="file">
   <input id="input" type="hidden">
   <button type="submit">Submit</button>
</form>


JS:
$(document).ready(function(){
   $('#form').submit(function(){
      input_file = document.getElementById('gps_daten').files[0];
      var data; 
      if(input_file){
          var reader = new FileReader();
          reader.readAsText(input_file , "UTF-8");
          reader.onload = function (evt){
             data = evt.target.result;
             var geoJSON = toGeoJSON.gpx((new DOMParser()).parseFromString(data, 'text/xml'));
             document.getElementById('input').value = geoJSON.features[0].geometry.coordinates[0][0]);
          }
      }             
   }
   return true;
}

HTML：
提交
JS:
$（文档）.ready（函数（）{
$（'#form'）。提交（函数（）{
input_file=document.getElementById（'gps_daten'）。文件[0]；
var数据；
如果（输入_文件）{
var reader=new FileReader（）；
reader.readAsText（输入_文件，“UTF-8”）；
reader.onload=函数（evt）{
数据=evt.target.result；
var geoJSON=toGeoJSON.gpx（（新的DOMParser（））.parseFromString（数据，'text/xml'））；
document.getElementById（'input'）。value=geoJSON.features[0]。geometry.coordinates[0][0]）；
}
}             
}
返回true；
}

不知何故，该表单似乎是在文件阅读器仍在工作时提交的。我希望有人能帮助我。提前感谢！

Edit 更改要侦听的元素。如果我理解正确，您希望用文件输入中的值填充隐藏输入字段的值

因此，在本例中，请在

#gps_daten

输入上侦听

更改

事件。每当此输入的值发生更改时，将触发此事件。实际上，在提交表单之前，每当将文件上载到输入时，将运行

文件阅读器

代码

现在，当您提交表单时，

#input

中已经填写了一个值

$(document).ready(function(){
   $('#gps_daten').on('change', function(event){
      var input_file = event.target.files[0];
      if(input_file){
          var reader = new FileReader();
          reader.readAsText(input_file , "UTF-8");
          reader.onload = function (evt){
             var data = evt.target.result;
             var geoJSON = toGeoJSON.gpx((new DOMParser()).parseFromString(data, 'text/xml'));
             $('#input').val(geoJSON.features[0].geometry.coordinates[0][0]));
          }
      }             
   }
   return true;
}

原始答案 使用

submit

回调上的

event

参数。这将打开

event

对象的使用，该对象为您提供有关提交的信息以及对事件的一些控制

$('#form').submit(function(event){
  ...

在

submit

回调的末尾和内部，使用

event.preventDefault（）

告诉浏览器不要执行

submit

事件的默认行为。这将如名称所示，阻止表单提交

  ...
    event.preventDefault();
  });
  return true;
}

---

它使用一次性侦听器和手动提交：

$('#form').one('submit', function(event) {
   ...
   $( "#form" ).submit(); 
   return false;
}

---

因此，第一次未提交表单时，当手动调用submit时，submit将执行其默认任务。

如果我做对了

event.preventDefault（）

具有与最后一行中的

return false；

相同的效果。它阻止提交表单。但我确实希望在插入隐藏字段的值后提交表单。我将如何继续执行此操作？在这种情况下，您是对的。当我有一个简单的FileField时，我会这样做。但是，我有一个类似的szenario，我需要用我描述的方法来解决这个问题。在表单提交之前填写字段。然后使用AJAX可能是您的场景的可行解决方案。这可能吗？