【问题标题】：JS: Form Submit doesn't take added valueJS：表单提交没有附加价值
【发布时间】：2019-12-14 09:54:39
【问题描述】：

以下问题：我需要在提交表单之前在表单的输入字段中放置一个值。我使用 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;
}

在 FileReader 仍在工作时，表单似乎以某种方式提交。我希望有人可以帮助我。提前致谢！

【问题讨论】：

标签： javascript html filereader

【解决方案1】：

编辑

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

所以在这种情况下，在 #gps_daten 输入上监听 change 事件。只要此输入的值发生更改，就会触发此事件。实际上，只要您将文件上传到输入，在提交表单之前，这将运行您的 FileReader 代码。

现在，当您提交表单时，它已经在 #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;
}

【讨论】：

如果我做对了event.preventDefault() 与最后一行中的return false; 具有相同的效果。它阻止提交表单。但我确实希望在插入隐藏字段的值之后提交我的表单。我该怎么做呢？
在这种情况下你是对的。当我有一个简单的 FileField 就可以了。但是，我有一个类似的场景，我需要用我描述的方法解决问题。在提交表单之前填写字段..
那么使用 AJAX 可能是您的方案的可行解决方案。这可能吗？

【解决方案2】：

它适用于一次性监听器和手动提交：

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

所以第一次没有提交表单并且手动调用提交时，提交会执行其默认工作。

【讨论】：