Jquery UI 对话框总是得到空输入值

Question

所以我尝试在提交时获取#title 的输入值
但是使用提交事件时总是""
我尝试用keyup事件来测试
但效果很好...
这是我的代码

<div id="dialog-form" title="Create new task">
  <form autocomplete="off" class="taskform">
    <input type="text" id="title" placeholder="Add title">
    <textarea placeholder="Details" id="details" rows="5" cols="40"></textarea>
    <!-- User need to press enter to submit -->
    <input type="submit" tabindex="-1" style="position:absolute; top:-1000px">

    <script>
      $(document).ready(function() {
        $('#title').keyup(function() {
          $('#details').val($('#title').val());
        });
        $('#dialog-form').submit(function(e) {
          e.preventDefault();
          console.log($('#title').val());
        });
      });
    </script>
  </form>
</div>

Jquery UI

dialog = $("#dialog-form").dialog({
  autoOpen: false,
  height: 370,
  width: 370,
  resizable: false,
  draggable: false,
  modal: true,
  buttons: {
    "Add task": addTask,
    Cancel: function() {
      dialog.dialog("close");
    }
  },
  close: function() {
    form[0].reset();
  }
});

form = dialog.find("form").on("submit", function() {
  addTask();
});

Answer 1

考虑以下示例。

$(function() {
  var dialog;

  function dlgReset(cnt) {
    console.log("Form Reset");
    $("form", cnt).get(0).reset();
  }

  function addTask() {
    var t = $(".title", dialog).val(),
      d = $(".details", dialog).val();
    if (t == "") {
      console.log("Error: No Title");
      return false;
    }
    console.log("Add Task: '" + t + "', Details:", d);
    dlgReset(dialog);
    console.log("Close Dialog");
    dialog.dialog("close");
    return true;
  }

  dialog = $("#dialog-form").dialog({
    autoOpen: false,
    height: 320,
    width: 420,
    resizable: false,
    draggable: false,
    modal: true,
    buttons: [{
        text: "Save Task",
        class: "ui-state-default",
        tabindex: "3",
        click: function() {
          console.log("Save Selected");
          addTask();
        }
      },
      {
        text: "Cancel",
        tabindex: "4",
        click: function() {
          console.log("Cancel Selected");
          dlgReset(this);
          console.log("Close Dialog");
          $(this).dialog("close");
        }
      }
    ]
  });

  $("form", dialog).submit(function(e) {
    e.preventDefault();
    console.log("Form Submit | Save Selected");
    addTask();
  });

  $(".open").click(function() {
    console.log("Open Dialog")
    dialog.dialog("open");
  });
});

em {
  color: red;
}

.ui-dialog .task {
  margin-top: 10px;
}

.ui-dialog button.ui-state-default {
  font-weight: bold;
}

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<button class="open">Add Task</button>
<div id="dialog-form" title="Create New Task">
  <form>
    <input type="text" class="task title" tabindex="1" placeholder="Add Title" /> <span><em>*</em> Required</span>
    <textarea placeholder="Add Details" tabindex="2" class="task details" rows="5" cols="40"></textarea>
  </form>
</div>

这使我们能够从表单中收集详细信息并重置表单。这将在按下 Save Task 按钮或 Enter 键时发生。 Cancel 只会重置表格。

Jquery UI 对话框总是得到空输入值

Jquery UI dialog always get empty input value

jquery

jquery-ui