如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回

如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回,第1张

放到<form></form>里,直接使用 var arr=$("form")serializeArray(); 这样就获取到了name-value的数组

1、根据name取值:

<input name="inp" type="text" value="aaa">

<input name="inp" type="text" value="bbb">

<input name="inp" type="text" value="ccc">

$("input[name='inp']")val()

2、根据name取值遍历:

<input name="inp" type="text" value="aaa">

<input name="inp" type="text" value="bbb">

<input name="inp" type="text" value="ccc">

$("input[name='inp']")each(function(){alert($(this)val());})

扩展资料:

取出form中的input:

<script type="text/javascript" language="JavaScript" charset="UTF-8">

$(document)ready(function(){

var a=$("form input");

$each(

a,

function(name,object){

alert(name+":"+$(object)val());

}

);

});

</script>

表单是用form来填写,在提交前可以获取表单里面的数据。我这里用jquery实现。

<html>

<body>

    <form method='post' action=''>

        <label for='inputText'>inputText</label>

        <input type='text' id='inputText'/>

        <br/>

        <label for='checkBox1'>checkBox1</label>

        <input type='checkbox' id='checkBox1'/>

        <br/>

        <label for='checkBox2'>checkBox2</label>

        <input type='checkbox' id='checkBox2'/>

        <!--其他你想填写的表单选项-->

        <input type='button' value='提交表单' id='submitBtn'/>

    </form>

    <script>

        $(document)ready(function()

        {

            $('#submitBtn')click(function(e)

            {

                /一系列根据自己的意图判断输入框是否已输入内容并决定是否往下执行/

                

                //获取表单的系列化数据。这会生成一个A=valueA&B=valueB这种形式的字符串。

                var formData = $('form')serialize();

                $post('目标地址',formData,成功/失败回调函数);

                epreventDefault();

            });

            

        });

    </script>

</body>

</html>

以上就是关于如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回全部的内容,包括:如何使用jquery获取html表单的每个客户端控件的名称name和value值以json格式返回、jQuery,根据name获取多个input表单的值、js表单提交后,如何获取表单中的数据并显示出来等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址:https://54852.com/web/9409794.html

(0)
打赏 微信扫一扫微信扫一扫 支付宝扫一扫支付宝扫一扫
上一篇 2023-04-28
下一篇2023-04-28

发表评论

登录后才能评论

评论列表(0条)

    保存