im working with a form and im thinking of making a radio button so that if the no is selected, the row of input will be disabled or hidden or something. So that when it is parsed to the next page, the hidden value is gone and not parsed together with the other values. How do i go about doing it ? Example the row with value of Examination and Consultation. How do i make it so that it will not send any value to the next page when i select a radio button with value of no?
Form
<script type="text/javascript">
var count = 0;
function addTextArea(){
count= count+1;
var div = document.getElementById('name');
div.innerHTML += "<div> <input type='text' name='name[]' value='' "+"id=name"+count+"> </div>";
//div.innerHTML += "
<br />";
var div = document.getElementById('quantity');
div.innerHTML += "<div><input type='text' name='quantity[]' value ='' "+"id=quantity"+count+"></div>";
//div.innerHTML += "
<br />";
var div = document.getElementById('amount');
div.innerHTML += "<div><input type='text' name='amount[]' value ='' "+"id=amount"+count+"></div>";
//div.innerHTML += "
<br />";
}
function removeTextArea(){
document.getElementById("name"+count).remove();
document.getElementById("quantity"+count).remove();
document.getElementById("amount"+count).remove();
count = count-1;
}
</script>
</head>
<body>
<form method="POST" action="confirm_invoice.php" >
<?php
echo "<table border='2'>
";
echo "<tr>
";
echo "<th>Description</th>
";
echo "<th>Quantity</th>
";
echo "<th>Amount($)</th>
";
echo "</tr>";
echo "<tr>";
echo "<td>"?><input type='text' size="50" name='name[]' value='Examination and Consultation' readonly/><?php "</td>";
echo "<td>"?><input type='text' size="50" name='quantity[]' value='' /><?php "</td>";
echo "<td>"?><input type='text' size="50" name='amount[]' value='' /><?php "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"?><input type='text' size="50" name='name[]' value='Anesthesia' readonly/><?php "</td>";
echo "<td>"?><input type='text' size="50" name='quantity[]' value='' /><?php "</td>";
echo "<td>"?><input type='text' size="50" name='amount[]' value='' /><?php "</td>";
echo "</tr>";
echo "<tr>";
echo "<td>"?><div id="name"></div> <?php "</td>";
echo "<td>"?><div id="quantity"></div> <?php "</td>";
echo "<td>"?><div id="amount"></div> <?php "</td>";
echo "</tr>";
?>
<br />
<input type="button" value="Add Description" onClick="addTextArea();">
<input type="submit" name="submit" value="submit">
<input type="button" value="Remove Description" onClick="removeTextArea();">
<input type="submit" name="submit" value="submit">
</form>
</body>
</html>
you should give the attribute disabled="disabled" to the input to prevent it to be sent to the next page with the form post.
use a function like this in js:
function disableInputs(cnt)
{
document.getElementById("name"+cnt).disabled = "disabled";
document.getElementById("quantity"+cnt).disabled = "disabled";
document.getElementById("amount"+cnt).disabled = "disabled";
}
and your radio should look like this:
<input type="radio" name="disableInput" value="1" onclick="javascript:disableInputs(1)">
so in your js function you could add it like this:
function addTextArea(){
count= count+1;
var div = document.getElementById('name');
div.innerHTML += "<div> <input type='text' name='name[]' value='' "+"id=name"+count+"> </div>";
var div = document.getElementById('quantity');
div.innerHTML += "<div><input type='text' name='quantity[]' value ='' "+"id=quantity"+count+"></div>";
var div = document.getElementById('amount');
div.innerHTML += "<div><input type='text' name='amount[]' value ='' "+"id=amount"+count+"></div>";
div.innerHTML += "<div><input type='radio' name='disableInput' value='1' onclick='javascript:disableInputs(" + count + ")'></div>";
}