Question

在我目前的春季项目中，我有一个这个html表单的视图：

<form role="form" class="form" id="form" method="post" action="/loja/idiomas/set" enctype="multipart/form-data">
<table>
  <tr>
    <td>
      <select class="form-control" id="left" multiple="multiple" size="20">...</select>
    </td>
    <td>
      <button class="btn btn-default" id="btn_left">&lt;&lt;</button>
      <br />
      <button class="btn btn-default" id="btn_right">&gt;&gt;</button>
    </td>
    <td>
      <select class="form-control" id="right" name="listaDeIdiomas" multiple="multiple" size="20"></select>
    </td>
  </tr>
</table>
</form>

由此jquery代码提交的内容：

$(document).ready(function() {
  $('.summernote').summernote({height: 360, minHeight: null, maxHeight: null});

  $('#submit').on('click', function(){
    var $form = $( 'form.form' ), url = $form.attr( "action" );
    var posting = $.post( url, $form.serialize() );
    posting.done(function(data){
      if(data == "") {
        $("#alerta_sucesso").css("display", "block");
      } else {
        $("#alerta_erro").find("#texto").text(data);
        $("#alerta_erro").css("display", "block");
      }
    });
  });
});

最初，选择#left填充了数据，用户可以将数据发送到选择#right。我检查过，这确实有效（并且选项已正确地放在选择#right中。）

但是当我提交表单时，没有数据发送到服务器 - 我通过浏览器的开发人员工具进行检查，并且没有转发任何参数。

任何人都可以知道这里有什么问题吗？ jquery代码与另一种形式一起使用，除了这一种形式。

Answer 1

您正在尝试为ID为“submit”的元素获取点击功能。尝试使用

之类的东西

$( "#target" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();
});

其中“target”是按钮的ID

Answer 2

如果选择了第二个选项中的项目，则仅将其发送到服务器。我设法使用以下代码自动选择它们：

$(document).ready(function() {
 $('#btn_left').click(function() {
  return !$('#left option:selected').remove().appendTo('#right');
 });
 $('#btn_right').click(function() {
  return !$('#right option:selected').remove().appendTo('#left');
 });
});

提交的表格不包括其字段

2 个答案: