2015-12-17 3 views
1

Я хочу отправить запрос на отправку данных из html-формы, которая будет заполнена пользователем. Я хотел бы использовать jquery для достижения этого. Вот моя попытка (не работает):Как отправить данные формы html с jquery

$(function() { 
    $("#create").click(function (event) { 
     event.preventDefault(); 
     $.ajax({ 
      type: "POST", 
      url: "/home/new", 
      data: $(this).serialize(), 
      success: function (data, textStatus, jqXhr) { 
       //call "home/new" with data from html form as json and update current view with returned data 
       console.log("success"); 
      }, 
      error: function() { 
       alert("error"); 
      } 
     }); 
    }); 
}); 

<html lang="en"> 
<head> 
    <script type="text/javascript" src="/Scripts/jquery-1.10.2.js"></script> 
    <script src="/Scripts/Helpers.js"></script> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 
    <title>Title Goes Here</title> 
</head> 

<body> 
    <form> 
     Note:<br> 
    </form> 
    <textarea rows="4" cols="50" name="note" form="form"> 

    </textarea> 
    <br/> 
    <input type="date" name="day" form="form"> 
    <input type="submit" id="create" value="Submit" form="form"> 
</body> 
</html> 
+2

'$ (это)' _не_ относятся к форме, в этом случае, почему вы ожидаете, что? Вы можете решить это самостоятельно, абсолютно. Начните использовать консоль разработки браузеров и выведите '$ (this)'. Просмотрите объект ... – arkascha

+0

Правильно, я буду использовать консоль. Спасибо, –

ответ

2

Я считаю, что это следует сделать трюк:

  1. Loop через свои входы с JQuery, чтобы извлечь ваши ценности.
  2. Сохраните значения в новом объекте.
  3. Передача этого объекта на ваш вызов Ajax.

Вам просто нужно добавить этот кусок кода (источник: Obtain form input fields using jQuery?)

var values = {}; 

$.each($('#myForm input').serializeArray(), function(i, field) { 
values[field.name] = field.value; 
}); 

И передать values как данные на ваш вызов Ajax.

Вот пример в JSFiddle: https://jsfiddle.net/gsdfoyu5/6/

+0

Это хорошо, но не работает для textarea (только для итерации по входам). Я использовал этот код: 'date: document.getElementById (" day "). Value, note: document.getElementById (" note "). Value' Как объекты в данных запроса. –

Смежные вопросы