Moms
Reputation: 165
How to make an entry in a text box required when one specific radio button is selected?
I have several radio buttons which can be chosen and then the form can be sent without an issue. However a user can easily select the "Other" radio button and submit without giving any context or reason on why they chose it leaving the people receiving the "completed" form guessing what the issue is.
What I want to happen is that if a person selects the "Other" radio button and try and submit without a note/message/comment they will be interrupted with a requirement massage.
The snippet of the form that I want this to happen to is:
<label>
<input name="category" type="radio" value="Other" checked>Other
</label><br><br><br>
Note: <br> <textarea name="comment" rows="10" cols="70" placeholder="More detail... (Is there a way to recreate the error? What happened?)"></textarea>
<br><br>
<input type="submit" name="submit" value="Submit" class="userFriendly">
I have tried many variations of if statements and the required function given with HTML5 but can not seem to get what I need.
Any help will be appreciated and thanks in advance.
Edit 1: Here is the full code of my form:
<form action="send_form_email.php?OperationID=<?php print ($OperationID) ?>&title=<?php print ($title) ?>" method="post" onsubmit="return this.users.value != ''">
<table>
<tr>
<td>Name:</td>
<td>
<select required name="users">
<option value=""></option>
<?php
foreach($users as $key => $value){
echo "<option value=\"$key\">$key</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td <?php print $hiddenJobDiv ?>>Job Number:</td>
<td><input type="text" name="jobid" value="<?php echo ($jobid) ?>" <?php echo $disabledInput ?>></td>
</tr>
<tr>
<td <?php print $hiddenPartDiv ?>>Part Number:</td>
<td><input type="text" name="partid" value="<?php echo ($part_id) ?>" <?php echo $disabledInput ?>></td>
</tr>
<?php if ($OperationID == 20){ ?>
<tr>
<td>Machine:</td>
<td><input type="text" name="mach" value="<?php echo ($machCode) ?>" <?php echo $disabledInput ?>></td>
<tr>
<?php } ?>
</table><br>
Error:<br><br><br> <!-- Display of dynamic list. -->
<?php
$html = customErr($OperationID);
foreach ($html as $oneError):?> <!-- foreach used to find the next iteration of the array. -->
<label> <!-- Beginning of the dynamic radio button list. -->
<input name="category"
type="radio"
value="<?php echo $oneError; ?>"> <!-- Dynamic value to be used in Slack API and email. -->
<?php echo $oneError; ?> <!-- Dynamic value as a visual representation for user. -->
</label><br><br><br>
<?endforeach;?> <!-- Stops foreach and goes to next object if avaliable. -->
<label> <!-- A permanent radio button labeled "Other" for (cont.) -->
<input name="category" type="radio" value="Other" checked>Other <!-- all report error forms. -->
</label><br><br><br>
<?php
if (isset($_POST['category'])=="Other" && isset($_POST["comment"])=="")
{
$required[] = ("You must write a note if you choose \'other\'.");
}
return $required;
?>
Note: <?php echo $required ?> <br> <textarea name="comment" rows="10" cols="70"
placeholder="More detail... (Is there a way to recreate the error? What happened?)"></textarea> <!-- Allows the user to type in a custom message/note. -->
<br><br>
<input type="submit" name="submit" value="Submit" class="userFriendly"> <!-- A large 'submit' button for touch screen. -->
<a href="#" onclick="close_window();return false;"><input type="submit" name="close" value="Close" class="userFriendly"></a> <!-- A large 'close' button for touch screens. -->
</form>
Edit 2: Here is the full code:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="/css/main_style.css">
<style>
.error {color: #FF0000;}
table, th, td {border: 1px solid white;}
</style>
</head>
<body>
<script>
function close_window() {
close();
}
</script>
<?php
error_reporting(E_ALL);
ini_set('display_errors', '1');
include("includes/classes.php");
include("includes/classes_monitoring.php");
$link = open_v8_db();
$users = get_clocked_in_users();
$OperationID = @$_REQUEST['OperationID'];
$title = "";
$grayedOut = false;
$disabledInput = "";
$hiddenJobDiv = "";
$hiddenPartDiv = "";
$ID = "";
$html = "";
$jobid = @$_REQUEST['JobID'];
$part_id = @$_REQUEST['PartID'];
$machCode = @$_REQUEST['Machine'];
if ($OperationID == 20)
{
$title = "Punching Machine";
$grayedOut = true;
}
elseif ($OperationID == 30)
{
$title = "Folding Machine";
$grayedOut = true;
}
elseif ($OperationID == 40 || $OperationID == 140)
{
$title = "Powder Coating";
$grayedOut = true;
}
elseif ($OperationID == 50 || $OperationID == 150)
{
$title = "Assembly";
$grayedOut = true;
}
elseif ($OperationID == 60 || $OperationID == 160)
{
$title = "Inspection";
$grayedOut = true;
}
elseif ($jobid != "" && $part_id == "")
{
$title = "Job";
$OperationID = 70;
}
else
{
$title = "General";
$OperationID = 80;
$grayedOut = false;
}
if ($greyedOut = true)
{
$disabledInput = "readonly";
}
function customErr($ID)
{
$html = "";
$issueReport_folder = 'document/Production System/';
$issueReporting = $issueReport_folder.'IssueReporting.csv';
$file_handle = fopen($issueReporting, "r");
if ($ID == 20)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "Punch")
{
$html[] = $line_of_text[1];
}
}
}
if ($ID == 30)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "Fold")
{
$html[] = $line_of_text[1];
}
}
}
if ($ID == 40 || $ID == 140)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "Powder")
{
$html[] = $line_of_text[1];
}
}
}
if ($ID == 50 || $ID == 150)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "Assembly")
{
$html[] = $line_of_text[1];
}
}
}
if ($ID == 60 || $ID == 160)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "Inspectoin")
{
$html[] = $line_of_text[1];
}
}
}
if ($ID == 70)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "Job")
{
$html[] = $line_of_text[1];
}
}
}
if ($ID == 80)
{
while (!feof($file_handle))
{
$line_of_text = fgetcsv($file_handle, 1024);
if ($line_of_text[2] == "General")
{
$html[] = $line_of_text[1];
}
}
}
fclose($file_handle);
return $html;
}
$jobErr = $partErr = $machErr = "";
$job = $part = $mach = $note = "";
if ($jobid == "")
{
$hiddenJobDiv = "style=\"display:none;";
}
if ($part_id == "")
{
$hiddenPartDiv = "style=\"display:none;";
}
function test_input($data)
{
$data = trim($data);
$data = stripslashes($data);
$data = htmlspecialchars($data);
return $data;
}
?>
<div class="reportForm">
<h2>Report <u><?php echo $title; ?></u> Error</h2>
<form action="send_form_email.php?OperationID=<?php print ($OperationID) ?>&title=<?php print ($title) ?>" method="post" onsubmit="return this.users.value != ''">
<table>
<tr>
<td>Name:</td>
<td>
<select required name="users">
<option value=""></option>
<?php
foreach($users as $key => $value){
echo "<option value=\"$key\">$key</option>";
}
?>
</select>
</td>
</tr>
<tr>
<td <?php print $hiddenJobDiv ?>>Job Number:</td>
<td><input type="text" name="jobid" value="<?php echo ($jobid) ?>" <?php echo $disabledInput ?>></td>
</tr>
<tr>
<td <?php print $hiddenPartDiv ?>>Part Number:</td>
<td><input type="text" name="partid" value="<?php echo ($part_id) ?>" <?php echo $disabledInput ?>></td>
</tr>
<?php if ($OperationID == 20){ ?>
<tr>
<td>Machine:</td>
<td><input type="text" name="mach" value="<?php echo ($machCode) ?>" <?php echo $disabledInput ?>></td>
<tr>
<?php } ?>
</table><br>
Error:<br><br><br> <!-- Display of dynamic list. -->
<?php
$html = customErr($OperationID);
foreach ($html as $oneError):?> <!-- foreach used to find the next iteration of the array. -->
<label> <!-- Beginning of the dynamic radio button list. -->
<input name="category"
type="radio"
value="<?php echo $oneError; ?>"> <!-- Dynamic value to be used in Slack API and email. -->
<?php echo $oneError; ?> <!-- Dynamic value as a visual representation for user. -->
</label><br><br><br>
<?endforeach;?> <!-- Stops foreach and goes to next object if avaliable. -->
<label> <!-- A permanent radio button labeled "Other" for (cont.) -->
<input name="category" type="radio" value="Other" checked>Other <!-- all report error forms. -->
</label><br><br><br>
<?php
if (isset($_POST['category'])=="Other" && isset($_POST["comment"])=="")
{
$required[] = ("You must write a note if you choose \'other\'.");
}
return $required;
?>
Note: <?php echo $required ?> <br> <textarea name="comment" rows="10" cols="70"
placeholder="More detail... (Is there a way to recreate the error? What happened?)"></textarea> <!-- Allows the user to type in a custom message/note. -->
<br><br>
<input type="submit" name="submit" value="Submit" class="userFriendly"> <!-- A large 'submit' button for touch screen. -->
<a href="#" onclick="close_window();return false;"><input type="submit" name="close" value="Close" class="userFriendly"></a> <!-- A large 'close' button for touch screens. -->
</form> <!-- End of form. -->
</div>
</body>
</html>
Upvotes: 0
Views: 777
Answers (2)
Whatatimetobealive
Reputation: 1353
you can't use required method like that. I think your solution is add dynamically textbox when user clicked the option button like that:
Add this javascript function in your file:
<script language="javascript">
function activateNote()
{
var i = 1;
note_div.innerHTML = "Note: <br> <textarea required id='comment' name='comment' rows='10' cols='70' placeholder='More detail... (Is there a way to recreate the error? What happened?)' ></textarea><br><br>"
}
</script>
Change your elements like that, "delete note textarea" than add div element:
<label>
<input onClick="activateNote()" type="radio" name="category" value="Other">Other
</label>
<div id="note_div"></div>
Upvotes: 1
Milk
Reputation: 2655
One possible solution is to conditionally add the required HTML5 attribute to the required field when the "Other" radio button is selected.
You can do this with a javascript method attached to your radio button that is (de/)activated on select.
Upvotes: 0
Related Questions
- How to get the value of a selected radio button
- How do I make a placeholder for a 'select' box?
- How to trigger a file download when clicking an HTML button or JavaScript
- How to affect other elements when one element is hovered
- How can I know which radio button is selected via jQuery?
- How to use the "required" attribute with a "radio" input field
- How to allow only one radio button to be checked?
- Checking Other Checkboxes when I Select a Checkbox - Not a "Select All" Checkbox