JS：表单提交不带附加值

Question

以下问题： 我需要在提交表单之前在表单的输入字段中放置一个值。我使用 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 仍在工作时以某种方式提交。我希望有人可以帮助我。提前致谢！

Answer 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;
}

Answer 2

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

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

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

JS：表单提交不带附加值

JS: Form Submit doesn't take added value

html

javascript

filereader

编辑

原回答