JavScript--表单提交

Posted 2020-10-19 男刀，你就这样过你的一生。

前台代码

<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>