如何使用jquery检索表单值

时间:2012-07-24 17:29:33

标签: jquery html

如何从表单元素中检索名称和值?

例如:我的输出应该是id=110kgod, checkbox=cancel, name=aj, age=23 我听说过序列化但可以应用吗?

<DIV style="BORDER-BOTTOM: blue 2px ridge; BORDER-LEFT: blue 2px ridge; WIDTH: 1000px; BORDER-TOP: blue 2px ridge; BORDER-RIGHT: blue 2px ridge" id=0_212099594_990000 class=mid>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="100%" align=center>
    <TBODY>
        <TR vAlign=top align=middle width="100%" cellPadding="0" cellSpacing="0" border="0">
            <TD width="15%"><H4>ID</H4></TD>
            <TD width="5%"></TD>
            <TD width="30%" align=left><INPUT onblur="this.style.backgroundColor='#fff'" class=input_0_212099594_990000 onfocus="this.style.backgroundColor='#ccc'" value=110KG0D name=ow_id> </TD>
            <TD width="19%"></TD>
            <TD style="BORDER-BOTTOM: black 1px solid; BORDER-LEFT: black 1px solid; BORDER-TOP: black 1px solid; BORDER-RIGHT: black 1px solid" class=radiobutton width="20%" align=middle>YES<INPUT class=0_212099594_990000 disabled value=YES type=radio name=0_212099594_990000 jQuery172033007169320727875="2">NO<INPUT class=0_212099594_990000 disabled value=NO type=radio name=0_212099594_990000 jQuery172033007169320727875="3">MAYBE<INPUT class=0_212099594_990000 value=MAYBE CHECKED type=radio name=0_212099594_990000 jQuery172033007169320727875="4"></TD>
            <TD width="5%" align=right><BUTTON style="BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BACKGROUND-COLOR: white; BORDER-TOP: medium none; BORDER-RIGHT: medium none" onclick="javascript:ShowHide('0_212099594_990000')"><IMG src="../images/delete.png"></BUTTON> 
            </TD>
        </TR>
    </TBODY>
</TABLE>
<TABLE border=0 cellSpacing=0 cellPadding=0 width="98%" align=center>
    <TBODY>
        <TR vAlign=top align=left>
            <TD style="PADDING-BOTTOM: 1em" width="9%" align=middle><FONT color=black size=2><B>NAME</B></FONT></TD>
            <TD class=input_0_212099594_990000 width="8%" align=left><SELECT name=bsn_code> <OPTION selected value=a>A</OPTION> <OPTION value=B>B</OPTION> <OPTION value=C>C</OPTION> <OPTION value=D>D</OPTION> <OPTION value=OS>OS</OPTION></SELECT> </TD>
            <TD vAlign=top width="10%" align=middle><FONT color=black size=2><B>Age</B> </FONT></TD>
            <TD vAlign=top width="10%" align=left><INPUT onblur="this.style.backgroundColor='#fff'" class=input_0_212099594_990000 onfocus="this.style.backgroundColor='#ccc'" size=15 value=23 name=osi_cd> </TD>
            <TD width="1%"></TD>
            <TD class=input_0_212099594_990000 width="10%">22</TD>
            <TD class=input_0_212099594_990000 width="30%"></TD>
        </TR>
    </TBODY>
</TABLE>                        
</DIV>

2 个答案:

答案 0 :(得分:0)

$(document).ready(function () {
    var ow_id = $('#ow_id').val();
    var bsn_code = $('#bsn_code').val();
    var osi_cd = $('#osi_cd').val();
    alert('ID: ' + ow_id + ', NAME: ' + bsn_code + ', AGE: ' + osi_cd);
});

这是小提琴:http://jsfiddle.net/collabcoders/NQ5jf/

答案 1 :(得分:0)

Serialize将为您提供给定元素/表单中输入的名称/值

基于输入名称和输入值,使用osi_cd=21&bsn_code=[SELECTED.VALUE]&....之类的字符串基本上是一个键/值对。输入类型我认为与序列化无关。

如果你想要捕获的不仅仅是你需要在演讲中手动循环遍历表单中的元素,那么构建你自己的字符串以便基于此发布。

另一方面,您的HTML不是非常有效,并且可能会在某些浏览器上引起一些问题,尤其是某些较旧的浏览器。所有属性自定义或其他属性应始终为小写并用双引号括起来

例如: <input name="something" class="colorme" id="whatever" rel="something_else">然后还取决于您选择的HTML格式,即:XHTML,HTML5,其他。你必须补偿那些有效的东西。 W3C有一个很好的验证页面,你可以提供一个URL,它将验证HTML(如果你希望搜索引擎不惩罚你并给你一个较低的索引,这是好的,使用javascript / jquery也可以省去一些头痛在将来)

总的来说,你可以通过一些自定义编码模仿序列化。例如循环遍历给定包含元素或表单标记内的元素,并在该循环内构建一个更符合您发布需求的字符串。

或者你也可以使用“hidden”元素来运行序列化,从而获得每个元素的对,并相应地构建字符串。最后虽然它不会像串行化并传递数据那样简单,但某些自定义逻辑需要在某处应用。相应地处理数据。就个人而言,我会建立一个多维数组,然后根据我从你的帖子收集的内容发布帖子。