@Gorthaur

Как вывести данные php скрипта в модальное окно?

Приветствую! Есть форма в модальном окне на bootstrap, которая посылает данные методом POST к обработчику на php, он читает, дает ответ, и его надо вывести обратно в эту форму. Не получается взять ответ и отобразить его в этом модальном окне. Как быть? яваскрипт и аякс я совсем не знаю, на просторах интернета находил подобные решения и подстраивал под себя.
код модального окна:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
        <h4 class="modal-title" id="myModalLabel">Добавить площадку</h4>
      </div>
<div id="result">
      <div class="modal-body">
      <form method="post" id="forms" action="javascript:void(null);" onsubmit="FormSendOK()">
<table class="table">
<tbody><tr>
<th class="lable">  Адрес:</th>
<td class="input"><input size="50" name="address" type="text"></td>
</tr>
<tr>
<th class="lable">IP-сервера:</th>
<td class="input"><input size="15" name="IP" type="text"></td>
</tr>
<tr>
<th class="lable">  SID:</th>
<td class="input"><input size="15" name="SID" type="text"></td>
</tr>
<tr>
<th class="lable">  Тип площадки: </th>
<td class="input"><select name="tabletype">
<option value="1">Старая</option>
<option value="3" selected="selected">Новая</option>
<option value="4">Сторонняя</option>
<option value="2">Тестовая</option></select></td>
<input type="hidden" name="submit" value="submit" >
</tr>
</tbody>
</table>
</div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Закрыть</button>
       <button type="submit" id="submit"  class="btn btn-primary" name="submit" value="submit">Добавить</button>
</form>
</div>
    </div>
  </div>
</div>

Код скрипта
<script>
    var SendContactForm = {
       type: 'POST',
       resetForm: 'true',
       url: 'action3.php',
       success:    function(){
       }
      }
    function FormSendOK() {
        $(\"#forms\").ajaxSubmit(SendContactForm);
        $(\"#result\").html();
     }
</script>

кусок обработчика:
if (count($msg) === 0) {
$answer="Данные добавлены!";
}
print ("$answer");
  • Вопрос задан
  • 4240 просмотров
Решения вопроса 1
ilyachase
@ilyachase
web-developer
Видно, что подключен jQuery, при это вы используете ajaxSubmit(), хотя, насколько я знаю, в стандартном jQuery его нет (видимо, это какой-то плагин?). В jQuery для этих целей есть ajax(), а у него, в свою очередь есть callback-функция success(), которая может принимать ответ сервера. Судя по коду, в плагине, который вы используете, тоже есть что-то подобное (функция success в "коде скрипта").
Как бы это выглядело с использованием встроенного функционала jQuery:
  1. Вы отправляете запрос на сервер.
  2. Получаете ответ (success: function(data), где в data - ответ сервера).
  3. Выводите ответ сервера в необходимый элемент. В случае вашей разметки это может быть "modal-content", тогда будет выглядеть так - $(".modal-content").html(data);

Обратите внимание, что делать $(".modal-content").html(data) - плохая практика, так как у вас на странице может быть не один элемент с этим классом. Лучше присвоить блоку, в который будете выводить результат id и обращаться к нему через $("#...").
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы