时间戳

首页 > 解决方案 > jQuery更改表单提交的输入值

jquery - jQuery更改表单提交的输入值

问题描述

我创建了一个从下拉选项接收值的表单字段。

On the front end, when a dropdown option is selected, the correct data appears; 但是，当您查看检查器时，该值仍然为空，并且在提交表单时，没有捕获任何数据。

这是代码：

$(window).load(function()  {
  $("#position").appendTo(".form-columns-1");
  $("#position").change(function(){
    var positionValue = $("option:selected").val();
    $('input[name=bdm_position]').val(positionValue); 

  }); 
});

我在这里想念什么？

标签： jqueryforms

解决方案

编辑

“......它在前端工作，但是当你提交表单时，值没有传递。”

<form>现在添加了A ，它将提交到实时测试服务器，其响应被重定向到<iframe>位于<form>. 查看演示：

  1. 选择<option>一个<select>...

  2. ...注意该<input>值设置为该<select>值。

  3. 接下来点击Submit按钮...

  4. ...注意下面打印的服务器响应<iframe>：

   {
      "args": {}, 
      "data": "", 
       "files": {}, 
       "form": {
         "bdm_position": "B"
     }, 
     "headers": {...

如果您选择了“B”，则该结果是预期的

在附加之前没有看到$('#position')它是如何存在的，所以我猜了。问题是<select>s直接访问标签本身的值：

$('select').val()

演示

var pos = $(`<select id='position'>
  <option val='A'>A</option>
  <option val='B'>B</option>
  <option val='C'>C</option>
  <option val='D'>D</option>
</select>`);



pos.appendTo(".form-columns-1");

pos.on('change', function() {

  $('input[name=bdm_position]').val($(this).val());

});
<form id='ui' action='https://httpbin.org/post' method='post' target='view'>
  <fieldset class='form-columns-1'>

  </fieldset>

  <input name='bdm_position'><input type='submit'>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

推荐阅读