使用jquery和DOM访问表单元素 [英] Accessing form elements using jquery and DOM

问题描述

这是表单

 < form method =post> 
 
< input type =hiddenname =resulttypevalue =Create> 
< table> 
< tr> 
< td> Name< / td> 
< td>< input type =textid =namevalue =Abhishek/>< / td> 
< / tr> 
< tr> 
< td>用户名< / td> 
< td>< input type =textid =usernamename =usernamevalue =AbhishekSimion>< / td> 
< / tr> 
< tr> 
< td>电子邮件< / td> 
< td>< input type =textid =emailname =emailvalue =[e-mail]>< / td> 
< / tr> 
< tr> 
< td>部< / td> 
< td>< input type =textid =departmentname =department>< / td> 
< / tr> 
< tr>< td colspan =2>< input type =buttonid =buttonvalue =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（）; 
}）; 
}）; 
函数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

解决方案>

至少电子邮件值应该工作...

任何情况下，不要手动创建字符串。将数据设置为包含值的对象：

  data：{name ：$（'＃name'）。val（），email：$（'＃email'）。val（）}，
 //或
 data：$（'＃yourformID' （），
  

这样，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 b $ b success：function（msg）{
 alert（Data Saved：+ msg）; 
} 
}）; 
} 
 
 }）; 
  

另请注意，

  var msg = $ .ajax（{...}）。responseText; 
  

将无法正常工作，因为Ajax请求是异步。这意味着在Ajax响应可用之前， callme（）将返回。响应文本可作为参考成功回调。

更正：看到 async：false ，但似乎我的脑子有一个错误;）在这种情况下，上述声明将会工作。但是你应该避免同步的Ajax（应该叫Sjax）然后调用它阻止客户端。

Here is the form

<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="[e-mail]"></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>

here is the Javascript part

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;

}

Why do I get a message "name=null&email=undefined" in my alert box? What is wrong here?

Note: I am using JQuery v1.5.2

解决方案

At least the email value should work...

In any case, don't create the string manually. Set data to an object containing the values:

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

This way, jQuery will take care of proper escaping.

Also note that IDs have to be unique. If you have other elements with the same IDs farther up the page, it won't work. Changes the IDs then.

Update:

The flow of your code is not correct. This part:

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

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

will be executed before the page finished loading. That means (a) that the elements are not available yet and (b) even if they were, the user would not have been able to enter any information.

You have to read the values at the time you want to sent the form:

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

});

Also note that

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

will not work as the Ajax request is asynchronous. That means callme() will return before the Ajax response is available. The response text is available as argument to the success callback.

Correction: I saw the async: false , but it seemed I had a bit error in my brain ;) In this case the above statement would work indeed. But you should avoid synchronous Ajax (should be called Sjax then) calls at it blocks the client.

这篇关于使用jquery和DOM访问表单元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！