Fatal编程技术网
  • jquery/
  • Jquery 单选按钮以男性=开启或女性=开启的形式发送值。我只想将男性/女性发送到数据库

Jquery 单选按钮以男性=开启或女性=开启的形式发送值。我只想将男性/女性发送到数据库

jquery html twitter-bootstrap web

Jquery 单选按钮以男性=开启或女性=开启的形式发送值。我只想将男性/女性发送到数据库,jquery,html,twitter-bootstrap,web,radio-button,Jquery,Html,Twitter Bootstrap,Web,Radio Button,我下面的代码在表单中有一个单选按钮来选择性别。但在提交时，它是以男性=on或女性=on的形式发送的。我只想将男性/女性发送到数据库。请告诉我应该做哪些必要的编辑。我正在使用引导 <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge">

我下面的代码在表单中有一个单选按钮来选择性别。但在提交时，它是以男性=on或女性=on的形式发送的。我只想将男性/女性发送到数据库。请告诉我应该做哪些必要的编辑。我正在使用引导

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Home - Student Registration Form</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/datepicker.css" rel="stylesheet">
    <style>
      .error{
        color: red;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <form id="regform" class="form-horizontal">
          <fieldset>
          <!-- Form Name -->
          <legend>Student Registration</legend>
          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="firstname">First Name</label>
            <div class="col-md-4">
            <input id="firstname" name="firstname" type="text" placeholder="First Name" class="form-control input-md">
            </div>
          </div>
          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="lastname">Last Name</label>
            <div class="col-md-4">
            <input id="lastname" name="lastname" type="text" placeholder="Last Name" class="form-control input-md">
            </div>
          </div>
          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="dob">Date of birth</label>
            <div class="col-md-4">
            <input id="dob" name="dob" type="text" placeholder="Date of birth" class="form-control input-md">
            </div>
          </div>
          <!-- Text input-->
          <div class="form-group">
            <label class="col-md-4 control-label" for="age">Age</label>
            <div class="col-md-4">
            <input id="age" name="age" type="text" placeholder="Age" class="form-control input-md" disabled>
            </div>
          </div>
          <div class="form-group">
            <label class="col-md-4 control-label" for="sex">Sex</label>
            <div class="col-md-4">
               <label class="radio-inline"><input type="radio" name="Male">Male</label>
                     <label class="radio-inline"><input type="radio" name="Female">Female</label>
            </div>
          </div>
          <!-- Select Basic -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="subjects">Subjects</label>
            <div class="col-md-4">
              <select id="subjects" name="subjects" class="form-control">
                <option value="Database">Database</option>
                <option value="ADA">ADA</option>
                <option value="Networking">Networking</option>
              </select>
            </div>
          </div>
          <!-- Textarea -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="localaddress">Local Address</label>
            <div class="col-md-4">
              <textarea class="form-control" id="localaddress" name="localaddress"></textarea>
            </div>
          </div>
          <!-- Multiple Checkboxes (inline) -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="localaddresscheckbox">Permenant address</label>
            <div class="col-md-4">
              <label class="checkbox-inline" for="localaddresscheckbox">
                <input type="checkbox" name="localaddresscheckbox" id="localaddresscheckbox" value="1">
                Copy Local Address to permanent Address
              </label>
            </div>
          </div>
          <!-- Textarea -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="permenantaddress">Permenant Address</label>
            <div class="col-md-4">
              <textarea class="form-control" id="permenantaddress" name="permenantaddress"></textarea>
            </div>
          </div>
          <!-- Button -->
          <div class="form-group">
            <label class="col-md-4 control-label" for="submit"></label>
            <div class="col-md-4">
              <button id="submit" name="submit" class="btn btn-primary">Submit</button>
            </div>
          </div>
        </fieldset>
        </form>
      </div>
    </div>
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <script src="js/bootstrap-datepicker.js"></script>
    <script src="js/jquery.validate.min.js"></script>
    <script>
      (function() {

        jQuery.validator.addMethod("lettersonly", function(value, element) {
          return this.optional(element) || /^[a-z]+$/i.test(value);
        }, "Letters only please");

        $("#regform").validate({
          rules: {
            dob: "required",
            localaddress: "required",
            permenantaddress: "required",
            firstname: {
                lettersonly: true,
                required: true
            },
            lastname: {
                lettersonly: true,
                required: true
            }
          },
          submitHandler: function(form) {
            form.submit();
          }
        });

        //init datepicker
        $('#dob').datepicker({
            'format': 'yyyy-mm-dd',
            'autoclose': true
        });

        //copy localaddress to permenant address on checkbox click
        $('#localaddresscheckbox').click(function(){
          if($(this).is(':checked')) {
            var localaddress = $('#localaddress').val();
            $('#permenantaddress').val(localaddress); //copy local address to permenant address box
          }
          else {
            $('#permenantaddress').val('');
          }
        });

        //age handler
        $('#dob').datepicker().on('changeDate', function (ev) {
          //get current date
          var today = new Date();
          var currentYear = today.getFullYear(); //current year
          var selectedYear = $(this).val().split('-')[0]; //selected dob year
          var age = Number(currentYear) - Number(selectedYear);
          $('#age').val(age);
        });

      })();
    </script>
  </body>
</html>


家庭学生登记表
.错误{
颜色：红色；
}
学生注册
名字
姓
出生日期
年龄
性
男性
女性
学科
数据库
艾达
网络
本地地址
永久地址
将本地地址复制到永久地址
永久地址
提交
（功能（）{
jQuery.validator.addMethod（“lettersonly”），函数（值，元素）{
返回此.optional（元素）| |/^[a-z]+$/i.test（值）；
}，“仅限信件”）；
$（“#regform”）.validate({
规则：{
dob：“必需”，
localaddress:“必需”，
PermenanadAddress:“必需”，
名字：{
信一：没错，
必填项：true
},
姓氏：{
信一：没错，
必填项：true
}
},
submitHandler:函数（表单）{
表单提交（）；
}
});
//初始化日期选择器
$（'#dob'）。日期选择器({
“格式”：“yyyy-mm-dd”，
“自动关闭”：正确
});
//单击复选框将本地地址复制到永久地址
$（'#localaddresscheckbox'）。单击（函数（）{
如果（$（this）.is（':checked'））{
var localaddress=$（'#localaddress'）.val（）；
$（“#永久地址”）.val（本地地址）；//将本地地址复制到永久地址框
}
否则{
$（'#permenantadress'）.val（''）；
}
});
//年龄处理者
$（'#dob'）.datepicker（）.on（'changeDate'，函数（ev）{
//获取当前日期
var today=新日期（）；
var currentYear=today.getFullYear（）；//当前年份
var selectedYear=$（this.val（）.split（'-'）[0]；//所选dob年份
var年龄=编号（当前年份）-编号（已选年份）；
$（'年龄'）.val（年龄）；
});
})();
您需要将两个收音机命名为相同的名称，并为它们指定唯一的值：

<label class="radio-inline"><input type="radio" name="sex" value="Male">Male</label>
<label class="radio-inline"><input type="radio" name="sex" value="Female">Female</label>

男性
女性
请记住，如果在此示例中未选择任何一个，则“sex”值将根本不会发送到脚本。

您需要将两个收音机命名为相同的名称，并为它们指定唯一的值：

<label class="radio-inline"><input type="radio" name="sex" value="Male">Male</label>
<label class="radio-inline"><input type="radio" name="sex" value="Female">Female</label>

男性
女性
请记住，如果他们在本例中没有选择任何一个，那么“sex”值将根本不会发送到脚本。

正如我在评论中提到的，只需添加一个值，例如，请参阅fiddle

单击这两个单选按钮查看差异
函数值1（）{
var male=document.getElementById（'male'）。值；
警觉（男性）；
}
函数值2（）{
var male2=document.getElementById（'male2'）.value；
警惕（“这就是雄性的值”+male2）；
}
正如我在评论中提到的，只需添加一个值即可，例如，请参见fiddle

单击这两个单选按钮查看差异
函数值1（）{
var male=document.getElementById（'male'）。值；
警觉（男性）；
}
函数值2（）{
var male2=document.getElementById（'male2'）.value；
警惕（“这就是雄性的值”+male2）；
}
尝试向radiobutton添加值
尝试向radiobutton添加值