Abdul Rahman
Reputation: 13
How do I select only one radio button from two different form sets?
<div class="div_services service_block">
<div class="activenicksrv">
<h5>Extreme Service</h5>
</div>
<div class="div_extservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B1" />
<label><span class="price">$7.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B2" /> <label>
<span class="price">$14.99</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B3" />
<label><span class="price">$24.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B4" />
<label><span class="price">$44.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-ext buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
<div class="extranicksrv">
<h5>Executive Service</h5>
</div>
<div class="div_exeservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G1" />
<label><span class="price">$12.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G2" /> <label>
<span class="price">$23</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G3" />
<label><span class="price">$40.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G4" />
<label><span class="price">$59.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-exe buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
This is what I have tried and I need to select only one radio buttons from either services. If one service from a package is selected the other package services shouldn't be selected.I have 6 other packages User should be able to select one at a time from these different sets of packages please help. TIA
Upvotes: 1
Views: 74
Answers (3)
F5 Buddy
Reputation: 494
you can disable or hide second form radio button if first form radio button has selected or vice versa
<div class="div_services service_block">
<div class="activenicksrv">
<h5>Extreme Service</h5>
</div>
<div class="div_extservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" class="activenicksrv_form" action="<?php //echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B1" />
<label><span class="price">$7.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B2" /> <label>
<span class="price">$14.99</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B3" />
<label><span class="price">$24.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B4" />
<label><span class="price">$44.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-ext buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
<div class="extranicksrv">
<h5>Executive Service</h5>
</div>
<div class="div_exeservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" class="extranicksrv_form" action="<?php //echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G1" />
<label><span class="price">$12.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G2" /> <label>
<span class="price">$23</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G3" />
<label><span class="price">$40.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G4" />
<label><span class="price">$59.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-exe buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
/*-----It will disable second form radio button---------*/
$(".activenicksrv_form input[name=service]")
.on("click", changeEvent);
function changeEvent(event){
if ($('.activenicksrv_form input[name=service]:checked').length > 0) {
$(".extranicksrv_form input[type=radio]").attr('disabled', true);
}
}
//--------
/*-----It will disable first form radio button---------*/
$(".extranicksrv_form input[name=service]")
.on("click", changeEvent2);
function changeEvent2(event){
if ($('.extranicksrv_form input[name=service]:checked').length > 0) {
$(".activenicksrv_form input[type=radio]").attr('disabled', true);
}
}
</script>
Upvotes: 0
webshifu
Reputation: 185
Instead of keeping two form tags just keep the one form tag and keep the whole html in that form tag.
<form method="post" action="
<?php echo base_url('services'); ?>">
<div class="div_services service_block">
<div class="activenicksrv">
<h5>Extreme Service</h5>
</div>
<div class="div_extservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B1" />
<label>
<span class="price">$7.99</span> - 1 Month
</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B2" />
<label>
<span class="price">$14.99</span> - 3 Months
</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B3" />
<label>
<span class="price">$24.99</span> - 6 Months
</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B4" />
<label>
<span class="price">$44.99</span> - 1 Year
</label>
</div>
<div class="buynowbtnbox-ext buynowbtnbox">
<input type="hidden" name="
<?php echo $csrf['name']; ?>" value="
<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
<div class="extranicksrv">
<h5>Executive Service</h5>
</div>
<div class="div_exeservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G1" />
<label>
<span class="price">$12.99</span> - 1 Month
</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G2" />
<label>
<span class="price">$23</span> - 3 Months
</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G3" />
<label>
<span class="price">$40.99</span> - 6 Months
</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G4" />
<label>
<span class="price">$59.99</span> - 1 Year
</label>
</div>
<div class="buynowbtnbox-exe buynowbtnbox">
<input type="hidden" name="
<?php echo $csrf['name']; ?>" value="
<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</div>
</div>
</form>
Upvotes: 0
Terry Wei
Reputation: 1531
Since the name is the same, I bind event handler on input and name.
I don't know whether you use jQuery or not.
For convenience I did it below by jQuery.
Only thing I did is to add the event handler.
$('input[name="service"]').click(function(event){
$('input[name="service"]:checked').not(this).prop('checked', false);
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="div_services service_block">
<div class="activenicksrv">
<h5>Extreme Service</h5>
</div>
<div class="div_extservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B1" />
<label><span class="price">$7.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B2" /> <label>
<span class="price">$14.99</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B3" />
<label><span class="price">$24.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="B4" />
<label><span class="price">$44.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-ext buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>
<!-- Extra Service -->
<div class="div_services service_block">
<div class="extranicksrv">
<h5>Executive Service</h5>
</div>
<div class="div_exeservices">
<ul>
<li class="ui-corner-left">E Service 1</li>
<li class="ui-corner-left">E Service 2</li>
<li class="ui-corner-left">E Service 3</li>
<li class="ui-corner-left">E Service 4</li>
<li class="ui-corner-left">E Service 5</li>
<li class="ui-corner-left">E Service 6</li>
<li class="ui-corner-left">E Service 7</li>
<li class="ui-corner-left">E Service 8</li>
</ul>
<form method="post" action="<?php echo base_url('services'); ?>">
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G1" />
<label><span class="price">$12.99</span> - 1 Month</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G2" /> <label>
<span class="price">$23</span> - 3 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G3" />
<label><span class="price">$40.99</span> - 6 Months</label>
</div>
<div class="buynowbtn" style="text-align: left;">
<input name="service" type="radio" value="G4" />
<label><span class="price">$59.99</span> - 1 Year</label>
</div>
<div class="buynowbtnbox-exe buynowbtnbox">
<input type="hidden" name="<?php echo $csrf['name']; ?>" value="<?php echo $csrf['hash']; ?>" />
<a class="btnSubmit" href="javascript:void(0)">Buy Now</a>
</div>
</form>
</div>
</div>Upvotes: 2
Related Questions
- How to pass 2 radio selection value with a single Submit??
- Only Select one radio button but they cant have the same name because of the PHP
- Only allowing selection of one radio button in a form with PHP
- Multiple Forms and Radio Buttons
- Allow only one radio button checked in two forms
- Making only one radio button selectable with PHP when not in a form
- Only Select One Radio Button
- Select between two different forms
- PHP form - if 2 radio buttons are selected
- Multiple radio buttons - Code Igniter