单选按钮将值发送为 Male=on 或 Female=on。我只想将 Male/Female 发送到数据库

Posted

技术标签:

【中文标题】单选按钮将值发送为 Male=on 或 Female=on。我只想将 Male/Female 发送到数据库【英文标题】:Radio button sends value as Male=on or Female=on.I want to send only Male/Female to Database 【发布时间】:2016-03-14 03:04:36 【问题描述】:

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

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

【问题讨论】:

尝试将值添加到单选按钮&lt;input type="radio" name="Male" value="male"&gt; 【参考方案1】:

您需要将两个无线电命名为相同的名称并赋予它们唯一的值:

<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”值发送到您的脚本。

【讨论】:

【参考方案2】:

正如我在评论中提到的,只需添加一个值,请参见小提琴,例如 https://jsfiddle.net/5egjjv91/1/

Click on these two radio buttons to see the diference
<input type="radio" name="Male" id="male" onclick="value1()">
<input type="radio" name="Male" id="male2" value="male" onclick="value2()">
<script>
  function value1()
   var male = document.getElementById('male').value; 
   alert(male);
  
  function value2()
   var male2 = document.getElementById('male2').value; 
   alert("This is what the value of male is "+male2);
  
</script>

【讨论】:

以上是关于单选按钮将值发送为 Male=on 或 Female=on。我只想将 Male/Female 发送到数据库的主要内容,如果未能解决你的问题,请参考以下文章

如何将值从 DB 传递到单选按钮组?

从单选按钮获取文本[重复]

设置变量值,从无线电组中选择一个单选按钮

layui单选按钮后台传值问题on和off 变成 0 和1

Ruby如何将值从单选按钮传递到控制器方法

如何验证 Laravel 5.4 单选按钮?