0

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

    //первая
    <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='Создать' onclick='submitForms()'>

//функция 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, помогите, пожалуйста, найти ошибку или альтернативный вариант решения.

2
  • А сервер возвращает ответ на new-task.php? 31 мар 2015 в 15:26
  • Сервер ничего не возвращает, потому что кнопка неактивна, на нее нажать, и что-либо отправить, нельзя
    – TaniaS
    31 мар 2015 в 15:28

1 ответ 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();
    }
  });

});
7
  • при клике на кнопку ничего не происходит, консоль ошибок не выдает
    – TaniaS
    31 мар 2015 в 15:47
  • @TaniaS, вы смотрите jsbin, который по сслке? Запросы отлично отправляются на сервер, все работает. 31 мар 2015 в 15:49
  • посмотрела, переделала у себя: по клику на кнопке ничего не происходит. Я убрала некоторые поля из первой формы, чтобы не перегружать вопрос, может быть дело в них. Чем отличается title: $('#form1 input[name=title]')[0].value, от description: $('#form1 input[name=description]').val(),?
    – TaniaS
    31 мар 2015 в 15:55
  • В первом случае вы сначала получаете ссылку на нативный DOM элемент и берете значение его свойства value. Во втором случае вызывается метод jquery обертки над элементом, который возвращает то же самое значение. В простом виде можно представить, что .val() внутри делает return this[0].value 31 мар 2015 в 16:00
  • Спасибо. Получается дело не в этом. Только что проверила, у меня один и тот же код в jsbin нормально работает, а запускаю на сервере - кнопка не нажимается. Не знаете, в чем может быть проблема?
    – TaniaS
    31 мар 2015 в 17:14

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.