I am trying to make this part of the form disappear by putting it in a div and the id = loan
To troubleshoot I put TESTTEXT1 in after the div element, and it does what I want (disappears when user clicks a radio button),However TESTTEST2 and beyond does not seem to be affected by the user's action. Does anyone know why this could be?
HTML:
<header>
<script>
function checkA(){
document.getElementById('loan').style.display='none';
document.getElementById('assigned').style.display='block';
}
function checkL(){
document.getElementById('assigned').style.display='none';
document.getElementById('loan').style.display='block';
}
</script>
</header>
<body>
<table>
<td>
<input type="radio" onclick='checkA()' name="toloan" id="0" value="0"/> <label for="0">To assign</label>
<input type="radio" onclick='checkL()' name="toloan" id="1" value="1"/> <label for="1">To loan</label>
</td>
<div id="loan">
TESTTEXT1
<tr>
<th>
<label for="borrowing_month">Borrowing date</label>
</th>
<td>
<select name="borrowing_month" id="borrowing_month">
<option value ='1' selected="selected">
TEST
</option>
</select>
<select name="borrowing_day" id="borrowing_day">
<option value="2" selected="selected">
</select>
<select name="borrowing_year" id="borrowing_year">
<option value="3" selected="selected">
</select>
</td>
</tr>
<tr>
<th>
<label for="return_month">Return date</label>
</th>
<td>
<select name="return_month" id="return_month">
<option value="4" selected="selected">
</option>
</select>
<select name="return_day" id="return_day">
<option value="5" selected="selected">
</select>
<select name="return_year" id="return_year">
<option value="6" selected="selected">
</select>
</td>
</tr>
</div>
</table>
</body>
OK I tried to remove all the php as requested.
Let it be known that you can not use div elements inside table-wrappers. If you wish to use the div element to add CSS to only part of a table. It is better to add a ID to the table head/row/data or just make a new table altogether for that specific part of the table.
As #DanielBeck points out, there is no table-wrapper, so I would try changing the <div id="loan"> to <table id="loan">.
You'll have to change the closing tag from </div> to </table>, of course, and it will change your javascript a little:
function checkA() {
document.getElementById('loan').style.display = 'none';
document.getElementById('assigned').style.display = 'table';
}
function checkL() {
document.getElementById('assigned').style.display = 'none';
document.getElementById('loan').style.display = 'table';
}
Related
I'm trying to modify and example from this same page but its not working as I want.
I have two groups in a select, and I want chose any option from one of the second group "Unique" and if you select any option from that group show Div, else show nothing.
the html:
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email"
name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint"
checked required/>
</div>
the Js:
function showDiv(divId, element)
{
document.getElementById(divId).style.display = element.value ==
'Diplomacy' || 'Survival' ? 'block' : 'none';
}
css :
.extras{
display: none;
}
You can access the optgroup by finding the selected option, using closest() to find the enclosing optgroup tag, then accessing it's label attribute
function doSomething(element) {
// get optgroup
let optgroup = element.options[element.options.selectedIndex].closest('optgroup').getAttribute('label')
console.log(optgroup)
if (optgroup == 'Unique') {
console.log("do something ...")
}
}
.extras {
display: none;
}
<div class="form-floating mb-3 mt-3">
<table>
<tr>
<td><input class="form-control input-lg email" type="email" name="mail[]" required />
</td>
<td>
<select class="form-select" name="skills[]" onchange='doSomething(this)' required>
<optgroup Class="unique" label="Common">
<option value="Extraction">Extraction</option>
<option value="Hunting">Hunting</option>
<option value="Farming">Farming</option>
</optgroup>
<optgroup class="unique" label="Unique">
<option value="Diplomacy">Diplomacy</option>
<option value="Survival">Survival</option>
</optgroup>
</select>
</td>
<td>
</tr>
</table>
</div>
<div class="mt-5 extras" id="mydiv">
<h4 class="text-dark">Check</h4>
Increased through making items, sewing and cooking.<br>
<input class="form-check-input" type="checkbox" name="checkpoint" checked required/>
</div>
enter image description hereI have to create "View" and "Update" radio buttons with a dropdown below each one. To do this, I've written the following code:
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<input type='radio' id='byState' ; style="margin-left:180px" ; value='View' name='byState'>View by Student's unique identity number
<input type='radio' id='byClub' ; style="margin-left:80px" ; value='Update' name='byClub'>Update by Student's identity number
<table>
<tr>
<td>
<div style="width:200px;text-align: left; display: inline;">
<select id="Select" ;>
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
However, I'm unable to place the drop-down menu below radio buttons; this is what I get instead:
enter image description here
Using CSS:
.container {
width: 100%;
}
.container,
.radio-buttons,
.radio-buttons>span,
.dropdowns {
}
.cell {
display: inline-block;
width: calc(50% - 2px);
}
<div class="pageHead" align="center">
Auto Loan Basis Point (Bps) Adjustments by State
</div> <br><br>
<div class="container">
<div class="radio-buttons">
<div class="cell">
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</div>
<div class="cell">
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number </div>
</div>
<div class="dropdowns">
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
<div class="cell">
<select id="Select">
<option value="dropdown">Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</div>
</div>
Using Tables:
You can use a table to align items together like so:
td {
width: 50vw;
}
<div class="pageHead" align="center">Auto Loan Basis Point (Bps) Adjustments by State</div> <br><br>
<table>
<tr>
<td>
<input type='radio' id='byState' value='View' name='byState'>View by Student's unique identity number
</td>
<td>
<input type='radio' id='byClub' value='Update' name='byClub'>Update by Student's identity number
</td>
</tr>
<tr>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
<td>
<div>
<select id="Select">
<option value="dropdown"> Select</option>
<option value="TN">Test1</option>
<option value="IN">test2</option>
</select>
</div>
</td>
</tr>
</table>
I'm having issues using the below code to save the text input value to a .txt file. Any suggestions would be appreciated. I'm calling the function from the .js file using onclick in the last input tag. It's supposed to save the data from the second to last input tag to the .txt file. Ultimately I would like to save all values in the form, but just one value is a starting point.
<script src="../Js/Code.js"></script>
<form>
<table>
<tr>
<td>
<label for="incomeday">Date of income:</label>
<input type="date" name="incomeday">
</td>
<td>
<label for="incometype">Frequency:</label>
<select type="list" name="incometype">
<option>Select One</option>
<option value="One Time">One Time</option>
<option value="Weekly">Weekly</option>
<option value="Bi-Weekly">Bi-Weekly</option>
<option value="Monthly">Monthly</option>
</td>
<td>
<label for="incomeamount">Amount:</lable>
<input type="text" name="incomeamount" value="">
</td>
<td>
<input type="submit" onclick="saveIncome()" value="Submit">
</td>
</tr>
</table>
</form>
function saveIncome(){
var amount = document.getElementsByName("incomeamount").value;
var fo = fopen("../Data/Data.txt","w");
fwrite("../Data/Data.txt",amount);
fclose("../Data/Data.txt");
}
Here when i select lose from drop down then I want to change label from win to lose, is it possible to change label (header).
<td>
<select name="action" id="action" class="mondatory" onchange="getAlert()">
<option value="0">--Select--</option>
<option value="win">win</option>
<option value="los">lose</option>
</select>
</td>
<td>win</td>
<td align="left">
<input type="text" name="win" id="win" size="10" class="mondatory">
</td>
Yes, you can set onChange event listener on the select with vanilla javascript, for example:
//html
<select id='mySelect' onchange='mySelectOnChange()'>
<option value='win'>win</option>
<option value='lose'>lose</option>
</select>
<span id='result'></span>
//js
function mySelectOnChange() {
document.querySelector('#result').innerHTML = document.querySelector('#mySelect').value
}
You can do it much more simpler if you use any framework/library supporting two-way data binding. e.g. Angular.js / Vue.js
Just try this
<td>
<select name="action" id="action" class="mondatory" onchange="getAlert()">
<option value="0">--Select--</option>
<option value="win">win</option>
<option value="lose">lose</option>
</select>
</td>
<td><span id="header_td"></span></td>
<td align="left">
<input type="text" name="win" id="win" size="10" class="mondatory">
</td>
In your script
<script>
function getAlert() {
var selected_value = document.getElementById('action').value;
$("#header_td").text(selected_value);
}
</script>
I have the following code that when i change the drop down it doesnt matter which i choose it always puts the first part as the selected....
<script type="text/javascript">
function changeValue(){
var option=document.getElementById('block').value;
if(option=="1"){
document.getElementById('a').value="18005551212";
document.getElementById('b').value="PW";
}
else if(option=="2"){
document.getElementById('a').value="5551212";
document.getElementById('b').value="Collector";
}
if(option=="3"){
document.getElementById('a').value="3";
document.getElementById('b').value="3";
}
else if(option=="4"){
document.getElementById('a').value="4";
document.getElementById('b').value="4";
}
}
</script>
<form method="post">
<table> <tr><b>Add new data using form below</b></tr>
<tr><td> Keyword: </td><td> <input type="text" name="keyword" id="keyword"><br></td></tr>
<tr><td> Block?: </td><td><select name="block" id="block" onchange="changeValue();">
<option id="block1" value="1">Block 1</option>
<option id="block2" value="2">Block 2</option>
<option id="block3" value="3">Block 3 </option>
<option id="block4" value="4">Block 4</option>
<option id="block5" value="5">Block 5</option>
</select><br></td></tr>
<tr><td> Phone #:</td><td> <input type="text" name="phone" id="a"><br></td></tr>
<tr><td> Reason: </td><td> <input type="text" name="reason" id="b"><br></td></tr>
<tr><td> </td><td align="left"> <input type="submit" name="submit" value="Submit Data"></td></tr>
</table>
</form>
So when i select option 2 it should show collector and phone #...
You're missing a <td colspan="2"> in your first row, but regardless, your code works fine. Test here.
Go on jsfiddle.net and paste your code in. The code you provided works.