Блог

Главная - Вопросы по программированию - Диалоговое окно пользовательского интерфейса Jquery всегда получает пустое входное значение

Диалоговое окно пользовательского интерфейса Jquery всегда получает пустое входное значение

#jquery #jquery-ui

#jquery #jquery-ui

Вопрос:

  • Поэтому я пытаюсь получить входное значение #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

 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();
});

Комментарии:

1. Мне не ясно, в чем проблема. Что вы пытаетесь сделать со значением, которое не работает?

2. Добро пожаловать в Stack Overflow. Диалоговое окно пользовательского интерфейса jQuery — это DIV в вашем HTML. Возможно, было бы лучше переместить весь ваш скрипт в один блок кода вместо того, чтобы загружать его в разных местах.

3. Спасибо за ваше рассмотрение, я впервые задаю вопрос о переполнении стека. Я все еще не знаю, как мне сформулировать свой вопрос. Поэтому я прошу прощения за свою ошибку, если что-то не ясно.

Ответ №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 просто сбросит форму.

Комментарии:

1. Спасибо, это очень полезно.