使用 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 将负责正确的转义。

还要注意，ID 必须是唯一的。如果您在页面更远的位置有其他具有相同 ID 的元素，它将不起作用。然后更改 ID。

更新：

您的代码流程不正确。这部分：

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

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

将在页面完成加载之前执行。这意味着 (a) 元素尚不可用，并且 (b) 即使它们可用，用户也无法输入任何信息。

您必须在要发送表单时读取值：

$(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;

您的第二个变量应该可以按预期工作，但是可以省略选择器的输入，因为 ID 始终是唯一的，并且可以为您节省几个字节。

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

你也可以像下面这样使用

数据：{姓名：我的姓名，电子邮件：我的邮件}

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

更新

试试

<input type="text" id="myname" name="myname" value="Abhishek"/> 然后
var myname = $('#myname').val()

用于通过 POST 发送日期

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

Answer 4

改变

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();
    });
  });

Answer 5

因为，

'x' 中的值是一个对象而不是字符串，我认为 '$("input#email")' 的语法是错误的。试试$(":input[id='email']").val()

Answer 6

不知道为什么电子邮件会给你未定义的值，但对于名称，它应该如下所示：

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

或

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