JavScript--表单提交

前台代码

<div >

    <div id="show">asdasdas</div>

    <form id="form">

            <input type="button" name="Test" onclick="Thing()" value="芝麻开门" />

        <div>

            姓名：

            <input type="text" name="name"  />

        </div>

        <div>

            年龄：

            <input type="text" name="age" />

        </div>

        <div>

            语言：

            <select name="code">

                <option value="java">java</option>

                <option value="C#">C#</option>

                <option value="php">php</option>

                <option value="python">python</option>

            </select>

        </div>

        <fieldset>

            <legend>最喜欢的城市</legend>

            <div>

                <input type="radio" name="city" value="0" /><span>广州</span>

            </div>

            <div>

                <input type="radio" name="city" value="1" /><span>深圳</span>

            </div>

            <div>

                <input type="radio" name="city" value="2" checked="checked" /><span>上海</span>

            </div>

        </fieldset>

        <fieldset>

            <legend>喜欢的运动</legend>

            <div>

                <input type="checkbox" name="sports" value="0" /><span>足球</span>

            </div>

            <div>

                <input type="checkbox" name="sports" value="1" /><span>篮球</span>

            </div>

            <div>

                <input type="checkbox" name="sports" value="2" /><span>羽毛球</span>

            </div>

            <div>

                <input type="checkbox" name="sports" value="3" /><span>乒乓球</span>

            </div>

        </fieldset>

    </form>

    <div>

        <button id="btnSubmit">提交</button>

        <button id="btnReset">重置</button>

        <button id="btnFormValue">获取form的值</button>

    </div>

</div>

JQuery代码

<script>

    $(function () {

        var val = $("input[name='age']").val();

        $(":radio[name='city'][value=1]").attr("checked", "checked");

        $(":checkbox[name='sports']").attr("checked", true);

        $('#btnSubmit').click(function () {

            $('#form').submit();

        });

        $('#btnReset').click(function () {

            //由于jQuery没有提供reset方法，只能用form原生的reset方法。

            $('#form').get(0).reset();

        });

        //获取form的值

        $('#btnFormValue').click(function () {

            alert(decodeURIComponent($('#form').serialize()));

        });

    })

 function Thing() {

        //取值

      var val = $("input[name=name]").val();

        //赋值

      $("input[name=age]").val("88");

        //下拉框取值

      var val = $('select[name=code] option:selected').val();

      var val = $('select[name=code] option:selected').text();

        //设置选中项 第一项选中 contains(p)的默认选中

      $('select[name=code]').val(1);

      $("select[name='code'] option:contains(p)").attr("selected", "selected");

      //单选框radio

        //1.获取选中项对应的值

      var test = $(":radio[name='city']:checked").val();

        //2. 默认多选框的值

      $(":radio[name='city']").attr("checked", "checked");

     // 复选框checkbox

        //  1.获取选中项的值

      var values = [];

      var value = '';

      $(":checkbox[name='sports']:checked").each(function () {

          var val = $(this).val();

          values.push(val);

          value += val + ',';

      });

        //  2.设置默认选中项

      $(":checkbox[name='sports'][value=0]").attr("checked", true);

        //  3.设置默认选中全部

      $(":checkbox[name='sports']").attr("checked", true);

    //表单操作

        //1.提交表单

      $('#btnSubmit').click(function () {

          $('#form').submit();

      });

     // 2.重置表单

      $('#btnReset').click(function () {

          //由于jQuery没有提供reset方法，只能用form原生的reset方法。

          $('#form').get(0).reset();

      });

        //获取form的值

      $('#btnFormValue').click(function () {

          alert(decodeURIComponent($('#form').serialize()));

      });

      $("#show").html(values);

        $("#form").show();

 };

</script>

输入框限制只能输入两位小数的金额

<input type="text" name="input1" id="input1" value=""  />

<input type="text" name="input2" id="input2" value=""  />

<input type="text" name="input3" id="input3" value=""  />

onkeyup="var reg = $(this).val().match(/\d+\.?\d{0,4}/);var txt = "";if (reg != null) { txt = reg[0];}$(this).val(txt);"

$(document).ready(function(){

    bindKeyEvent($("#input1"));

    bindKeyEvent($("#input2"));

    bindKeyEvent($("#input3"));

});

function bindKeyEvent(obj){

    obj.keyup(function () {

        var reg = $(this).val().match(/\d+\.?\d{,}/);

        var txt = '';

        if (reg != null) {

            txt = reg[];

        }

        $(this).val(txt);

    }).change(function () {

        $(this).keypress();

        var v = $(this).val();

        if (/\.$/.test(v))

        {

            $(this).val(v.substr(, v.length - ));

        }

    });