Обработка двух форм с помощью ajax

Question

Обработка двух форм с помощью ajax

Рейтинг: 0Ответов: 1Опубликовано: 31.03.2015

Есть две формы, в одной текстовые поля, во второй файлы.

    //первая
    <form method='post' id='form1' action='new-task.php'>
    <input type='text' name='title'> 
    <textarea name='description'></textarea>
    <input type='date' name='deadline'>
    </form> 

    //вторая
    <form enctype='multipart/form-data' id='form2' action='new-task.php' method='POST'>
    <input type='"file' multiple id='file' name='taskfile[]'>
    </form>

Требуется обработать обе нажатием одной кнопки.

Я пробовала с помощью ajax запроса вот так:

//код кнопки
<input type='button' value='Создать'>

//функция submitForms()
submitForms = function(){
   $.ajax({
            type: "POST",
            url: "new-task.php",
            data: {
                title:$('#form1 input[name=title]')[0].value},
                description:$('#form1 input[name=description]')[0].value},
                deadline:$('#form1 input[name=deadline]')[0].value},
            },
            success: function(result){
            $("#form2").submit();
            }
    });

Но при таком варианте кнопка просто становится неактивной (не нажимается).

Плохо понимаю javascript, помогите, пожалуйста, найти ошибку или альтернативный вариант решения.

javascript ajax форма

Источник: Stack Overflow на русском

Answer 1

▲ 1

Нужно просто поправить ошибки в коде. И заменить input на button желательно.

http://jsbin.com/hoqusideva/1/edit?html,js,output

  <h2>Первая</h2>
  <form method='post' id='form1' action='new-task.php'>
    <input type='text' name='title'> 
    <br/>
    <br/>
    <textarea name='description'></textarea>
    <br/>
    <br/>
    <input type='date' name='deadline'>
  </form> 
  <hr/>
  <h2>Вторая</h2>
  <form enctype='multipart/form-data' id='form2' action='new-task.php' method='POST'>
    <input type='file' multiple id='file' name='taskfile[]'>
  </form>

  <hr/>
  <button id="send" type="button">Отправить обе формы</button>

-

$('#send').click(function(e) {
  e.preventDefault();

  $.ajax({
    type: "POST",
    url: "new-task.php",
    data: {
      title: $('#form1 input[name=title]')[0].value,
      description: $('#form1 input[name=description]').val(),
      deadline:$('#form1 input[name=deadline]').val(),
    },
    success: function(){
      $("#form2").submit();
    }
  });

});

Обработка двух форм с помощью ajax

Ответы