我有一个包含三个表单的注册页面。我想从同一页面注册用户和服务提供商。
1 - 包含两个单选按钮[服务提供商和用户]。
2 - 单选按钮 1 上的服务提供商注册表格。
3 - 单选按钮 2 上的用户注册表单。
我已经通过单选按钮 onChange 事件实现了在该页面的 div 标签中打开相应表单的功能。使用样式 display:none 并在单选按钮更改时显示它。
我正在使用 PHP 的 CodeIgniter 框架。我想对这两种形式进行验证。 因此，出于这个原因...
现在的情况是，
我已经检查了第一个单选按钮。但我想这样做，在默认检查时，我想默认仅使用事件打开第一种形式的服务提供者。除此之外，我可以通过删除样式显示来做到这一点:无。但我不想这样做。我想基于事件进行。
我的单选按钮形式。
<form>
<input value="1" type="radio" name="formselector" onchange="displayForm(this)" checked="checked"></input>Service Provider
<br><input value="2" type="radio" name="formselector" onchange="displayForm(this)"></input>User
</form>
上述单选按钮的 JS。
<script type="text/javascript">
function displayForm(c) {
if (c.value == "1") {
document.getElementById("ccform").style.display = 'inline';
document.getElementById("paypalform").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("ccform").style.display = 'none';
document.getElementById("paypalform").style.display = 'inline';
} else {
}
}
</script>
现在有两个表单 Div 标签。
<div id="form">
<!-- <form role="form" id="form" class="login-form" action="<?php echo base_url(); ?>index.php/Home/add_service_provider" method="post" onsubmit="return fun();">
--><form style="display:none" id="ccform">
<div class="form-group">
<div class="input-icon">
<!--<i class="styled-select service-select"></i>-->
<i class="fa fa-building"></i>
<select class="form-control" name="city" style="padding-left:38px" >
<option value="">Choose City</option>
<?php
$i = 0;
foreach ($city as $row) {
?>
<option class="subitem" name="city" value="<?php echo $row->city_name ?>"><?php echo $row->city_name ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-tint"></i>
<select class="form-control" name="area" style="padding-left:38px" >
<option value="">Choose Area</option>
<?php
$i = 0;
foreach ($areaname as $row) {
?>
<option class="subitem" name="area" value="<?php echo $row->area_name ?>"><?php echo $row->area_name ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-user"></i>
<select class="form-control" name="service" style="padding-left:38px" >
<option value="">Choose Service</option>
<?php
$i = 0;
foreach ($service as $row) {
?>
<option class="subitem" name="service" value="<?php echo $row->category_name ?>"><?php echo $row->category_name ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="username" class="form-control" name="username[]" placeholder="First Name">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="lastname" class="form-control" name="username[]" placeholder="Last Name" >
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-envelope"></i>
<input type="email" id="email" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" >
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" id="cpassword" name="cpassword" class="form-control" placeholder="Retype Password" >
</div>
</div>
<div class="checkbox form-group">
<input type="checkbox" id="remember" name="remember" value="forever" style="float: left;">
<label for="remember">By creating account you agree to our Terms & Conditions</label>
</div>
<button type="submit" class="btn btn-common log-btn" id="submit">Register</button>
</form>
<!-- <form role="form" class="login-form" method="post" action="<?php echo base_url(); ?>index.php/Home/add_user" onsubmit="return fun();"> -->
<form style="display:none" id="paypalform">
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="username" class="form-control" name="username[]" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="lastname" class="form-control" name="username[]" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-envelope"></i>
<input type="email" id="email" class="form-control" name="email" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" class="form-control" id="Password" name="Password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" name="cPassword" id="cPassword" class="form-control" placeholder="Retype Password" required>
</div>
</div>
<div class="checkbox">
<input type="checkbox" id="remember" name="rememberme" value="forever" style="float: left;" required>
<label for="remember">By creating account you agree to our Terms & Conditions</label>
</div>
<button type="submit" class="btn btn-common log-btn" id="register">Register</button>
</form>
</div>
最重要的是..我想使用 CodeIgniter Standard 进行验证。 我的问题是，
假设一个场景...目前我正在填写用户注册表格。现在点击提交按钮。它将进行验证检查。假设验证失败。它将重定向到此注册页面，但是，由于未选择单选按钮，因此不会显示用户表单并出现验证错误。
希望您理解我的问题。
请忍受 CSS 和所有这些事情。
谢谢。
最佳答案
单选按钮代码:
<form>
<input value="1" type="radio" id="chk1" name="formselector" onchange="displayForm(this)" checked="checked"></input>Service Provider
<br><input value="2" id="chk2" type="radio" name="formselector" onchange="displayForm(this)"></input>User
</form>
HTML 表单
<div id="form">
<form style="display:none" id="ccform">
<div class="form-group">
<div class="input-icon">
<i class="fa fa-building"></i>
<select class="form-control" name="city" style="padding-left:38px" >
<option value="">Choose City</option>
<?php
$i = 0;
foreach ($city as $row) {
?>
<option class="subitem" name="city" value="<?php echo $row->city_name ?>"><?php echo $row->city_name ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-tint"></i>
<select class="form-control" name="area" style="padding-left:38px" >
<option value="">Choose Area</option>
<?php
$i = 0;
foreach ($areaname as $row) {
?>
<option class="subitem" name="area" value="<?php echo $row->area_name ?>"><?php echo $row->area_name ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="fa fa-user"></i>
<select class="form-control" name="service" style="padding-left:38px" >
<option value="">Choose Service</option>
<?php
$i = 0;
foreach ($service as $row) {
?>
<option class="subitem" name="service" value="<?php echo $row->category_name ?>"><?php echo $row->category_name ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="username" class="form-control" name="username[]" placeholder="First Name">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="lastname" class="form-control" name="username[]" placeholder="Last Name" >
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-envelope"></i>
<input type="email" id="email" class="form-control" name="email" placeholder="Email Address">
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" id="password" name="password" class="form-control" placeholder="Password" >
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" id="cpassword" name="cpassword" class="form-control" placeholder="Retype Password" >
</div>
</div>
<div class="checkbox form-group">
<input type="checkbox" id="remember" name="remember" value="forever" style="float: left;">
<label for="remember">By creating account you agree to our Terms & Conditions</label>
</div>
<button type="submit" class="btn btn-common log-btn" id="submit">Register</button>
</form>
<form style="display:none" id="paypalform">
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="username" class="form-control" name="username[]" placeholder="First Name" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-user"></i>
<input type="text" id="lastname" class="form-control" name="username[]" placeholder="Last Name" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-envelope"></i>
<input type="email" id="email" class="form-control" name="email" placeholder="Email Address" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" class="form-control" id="Password" name="Password" placeholder="Password" required>
</div>
</div>
<div class="form-group">
<div class="input-icon">
<i class="icon fa fa-unlock-alt"></i>
<input type="password" name="cPassword" id="cPassword" class="form-control" placeholder="Retype Password" required>
</div>
</div>
<div class="checkbox">
<input type="checkbox" id="remember" name="rememberme" value="forever" style="float: left;" required>
<label for="remember">By creating account you agree to our Terms & Conditions</label>
</div>
<button type="submit" class="btn btn-common log-btn" id="register">Register</button>
</form>
</div>
Javascript:
<script type="text/javascript">
var i= document.getElementById('chk1').checked;
var j= document.getElementById('chk2').checked;
if(i==true){
document.getElementById("ccform").style.display = 'inline';
}
if(j==true){
document.getElementById("paypalform").style.display = 'inline';
}
function displayForm(c) {
if (c.value == "1") {
document.getElementById("ccform").style.display = 'inline';
document.getElementById("paypalform").style.display = 'none';
} else if (c.value == "2") {
document.getElementById("ccform").style.display = 'none';
document.getElementById("paypalform").style.display = 'inline';
} else {
}
}
</script>
在这里您可以查看示例
关于javascript - 在单选按钮的默认检查中，我想默认显示表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43315282/