Reputation: 13
I try to develop an update/edit form that have a set of radio button and also two different drop down list.
HTML
2 Radio Button - Populated from SQL Database (One & Two) :
<?php if ($rows_item['choice'] == "One" ) {?><input name="owner_c" id="owner_c1" type="radio" value="One" checked="checked" onclick="show1()"/>One<?php } ?>
<?php if ($rows_item['choice'] == "Two" ) {?><input name="owner_c" id="owner_c2" type="radio" value="Two" checked="checked" onclick="show2()"/>Two<?php } ?>
2 Drop Down List - Populated from SQL Database by while loop (Section & Department) :
<div id="div1" class="<?php if ($rows_item['choice'] != "One") { echo "hide";} ?>">
<p align="center">
<?php
if ($rows_item['choice'] == "One") {
$sql_section = "SELECT * FROM borrower_section";
$query_section = mysql_query($sql_section) or die('Error:'.mysql_error());
?>
<select name="dept" id="dept1" style="width:400px;" required >
<option value="-1" selected="selected" disabled="disabled">Sections *</option>
<?php while ($row_section = mysql_fetch_array($query_section)) { ?>
<option <?php if($rows_item['dept']==$row_section['sections']) { echo "selected";} ?> value="<?php echo $row_section['sections']; ?>"><?php echo $row_section['sections']; ?></option>
<?php } ?>
</select>
</p>
</div>
<div id="div2" class="<?php if ($rows_item['choice'] != "Two") { echo "hide";} ?>">
<p align="center">
<?php
}
if ($rows_item['choice'] == "Two") {
$sql_dept = "SELECT * FROM borrower_dept";
$query_dept = mysql_query($sql_dept) or die('Error:'.mysql_error());
?>
<select name="dept" id="dept2" style="width:400px;" >
<option value="-1" selected="selected" disabled="disabled">Departments *</option>
<?php while ($row_dept = mysql_fetch_array($query_dept)) { ?>
<option <?php if($rows_item['dept']==$row_dept['dept_name']) { echo "selected";} ?> value="<?php echo $row_dept['dept_name']; ?>"><?php echo $row_dept['dept_name']; ?></option>
<?php }}?>
</select>
</p>
</div>
Javascript
function show1(){
document.getElementById('div1').style.display ='block';
document.getElementById('div2').style.display ='none';
$('#dept2').removeAttr('required');
$('#dept1').attr('required','required');
}
function show2(){
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
$('#dept1').removeAttr('required');
$('#dept2').attr('required','required');
}
The flow is; if user choose radio button One, "div1" will appear - "div2" is hidden and user will select any items and save in database through input name=dept.
And if user choose radio button Two, "div2" will appear - "div1" is hidden and user will select any items in it and also save in database through input name=dept.
My problem is, if user choose radio button One, they have to submit this form twice in order to save the record for "dept" in SQL database. Both drop down list is using the same name because I want to fetch data from either one and save in the same column=dept in SQL based on which radio button they choose.
How to prevent this and allow user to submit one time? TQ..
Upvotes: 0
Views: 701
Reputation: 424
If I understand you correctly, you could try naming the inputs dept[1] and dept[2] and then simply set $_POST['dept'] to contain the one that's been filled.
The inputs:
<select name="dept[1]" id="dept1" style="width:400px;" required >...</select>
<select name="dept[2]" id="dept1" style="width:400px;" required >...</select>
The php:
$_POST['dept'] = !empty($_POST['dept'][1]) ? $_POST['dept'][1] : $_POST['dept'][2];
And then you can simply continue as you would if you "filtered" the input with javascript.
Upvotes: 0