Доступ к элементам формы с помощью jquery и DOM

Question

Вот форма

<form method="post">

    <input type="hidden" name="resulttype" value="Create">              
    <table>
        <tr>
            <td>Name</td>           
            <td><input type="text" id="name" value="Abhishek"/></td>
        </tr>
        <tr>
            <td>User Name</td>
            <td><input type="text" id="username" name="username" value="AbhishekSimion"></td>
        </tr>
        <tr>
            <td>Email</td>
            <td><input type="text" id="email" name="email" value="a@a.com"></td>
        </tr>
        <tr>
            <td>Department</td>
            <td><input type="text" id="department" name="department"></td>
        </tr>
        <tr><td colspan="2"><input type="button" id="button" value="Done!"></td></tr>
    </table>
</form>

Вот часть Javascript

var x = document.getElementById("name");
var email = $("input#email").val();  

var dataString = 'name='+ x + '&email=' + email;
$(function() {
$("#button").click(function() {
    callme();
    });
  });
function callme()
{
    alert(dataString);
    var msg = $.ajax({
        type: "POST",
        url: "/temp/AjaxPostSend",
        data: dataString,
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

}

Почему я получаю сообщение " name = null & email = undefined " вмое окно оповещения?Что здесь не так?

Примечание: я использую JQuery v1.5.2

Answer 1

Как минимум, значение email должно работать ...

В любом случае, не создавайте строку вручную.Установите data для объекта, содержащего значения:

data: {name: $('#name').val(), email: $('#email').val()},
// or
data: $('#yourformID').serialize(),

Таким образом, jQuery позаботится о правильном экранировании.

Также обратите внимание, что идентификаторы должны быть уникальными.Если у вас есть другие элементы с такими же идентификаторами дальше по странице, это не будет работать.Затем изменяет идентификаторы.

Обновление:

Поток вашего кода неверен.Эта часть:

var x = document.getElementById("name");
var email = $("input#email").val();  

var dataString = 'name='+ x + '&email=' + email;

будет выполнена до окончания загрузки страницы .Это означает (а) что элементы еще не доступны и (б) даже если бы они были, пользователь не смог бы ввести какую-либо информацию.

Вы должны прочитать значения весли вы хотите отправить форму :

$(function() {
    $("#button").click(callme);

    function callme() {      
        $.ajax({
            type: "POST",
            url: "/temp/AjaxPostSend",
            data: {name: $('#name').val(), email: $('#email').val()},
            success: function(msg){
                alert( "Data Saved: " + msg );
            }
         });
    }

});

Также обратите внимание, что

var msg = $.ajax({...}).responseText;

не будет работать, поскольку запрос Ajax асинхронный .Это означает, что callme() вернется до того, как станет доступен ответ Ajax.Текст ответа доступен в качестве аргумента для обратного вызова success.

Исправление: Я видел async: false, но мне показалось, что в моем мозгу была небольшая ошибка;) В этомВ этом случае вышеприведенное утверждение будет действительно работать.Но вам следует избегать синхронных вызовов Ajax (тогда он должен называться Sjax), при этом блокируется клиент.

Answer 2

Чтобы получить значение ввода с использованием простого JavaScript, вам нужно получить доступ к переменной с именем value.

var x = document.getElementById("name").value;

Ваша вторая переменная должна работать, как и ожидалось, однако можно пропустить ввод от селектора, поскольку идентификаторы всегда уникальны, и это экономит вам несколько байтов.

var email = $("#email").val();

Также есть более простой способ отправить форму с помощью ajax. Сериализовать форму. Уведомление data: ...

var msg = $.ajax({
        type: "POST",
        url: "/temp/AjaxPostSend",
        data: $("form").serialize(),
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

Answer 3

попробуйте

var myname = $('#name').val()
var mymail = $('#email').val();

DEMO

также вы можете использовать как ниже

данные: {имя: мое имя, электронная почта: mymail}

var msg = $.ajax({
        type: "POST",      
        url: "/temp/AjaxPostSend",
        data: { name: myname, email: mymail }
        async: false,
        success: function(html){
          alert( "Data Saved: " + msg );
        }
     }).responseText;

UPDATE

попробуйте с

<input type="text" id="myname" name="myname" value="Abhishek"/>, а затем
var myname = $('#myname').val()

для отправки даты сверх POST

 data: $('#yourformID').serialize(),

Answer 4

Не уверен, почему электронная почта дает вам неопределенное значение, но для имени оно должно выглядеть следующим образом:

var x = document.getElementById("name").value;

OR

var x = $('#name').val();

Answer 5

Потому что,

значение в 'x' является объектом, а не строкой, и я думаю, что синтаксис '$ ("input # email") "неправильный. Попробуйте $(":input[id='email']").val()

Answer 6

изменение

var x = document.getElementById("name");
var email = $("input#email").val();  

до

var x = $("#name");
var email = $("#email").val();  

также эта часть:

var x = $("#name");
var email = $("#email").val();  
var dataString = 'name='+ x + '&email=' + email;

необходимо выполнить до вызова функции callme () следующим образом:

var dataString;
$(function() {
$("#button").click(function() {
    var x = $("#name");
    var email = $("#email").val();  
    dataString = 'name='+ x + '&email=' + email;
    callme();
    });
  });