Need help with HTML coding?
Need help with HTML coding?
1) I need a dropdown that reveals additional text or input fields when an option is selected.
2) Should I replicate this with checkboxes so selected items trigger related actions?
3) Can there be an input field that automatically fills in as the user types?
4) Is it possible to enable short typing, like typing "MST" and getting "Microsoft" corrected?
5) How can I keep JavaScript and CSS organized in separate local files for a cleaner HTML structure?
6) If I type "MS" instead of "Microsoft", should the system recognize it as a variation of Microsoft?
7) Can you provide guidance on translating a list of codes into proper terms?
8) Please share a concise summary that can be copied elsewhere.
XoXSneakyXoX
08-29-2023, 03:13 PM #1I have four functionalities in mind:
1) I need a dropdown that reveals additional text or input fields when an option is selected.
2) Should I replicate this with checkboxes so selected items trigger related actions?
3) Can there be an input field that automatically fills in as the user types?
4) Is it possible to enable short typing, like typing "MST" and getting "Microsoft" corrected?
5) How can I keep JavaScript and CSS organized in separate local files for a cleaner HTML structure?
6) If I type "MS" instead of "Microsoft", should the system recognize it as a variation of Microsoft?
7) Can you provide guidance on translating a list of codes into proper terms?
8) Please share a concise summary that can be copied elsewhere.
<html>
<head>
<title>Test Code</title>
</head>
<body>
<!-- This is the test code we want to try -->
<script>
// Placeholder for the actual test logic
console.log("Running test...");
</script>
</body>
</html>
```
*Note: Replace the placeholder comment with your actual test implementation. Screenshots should be attached separately.*
Okeinshield
09-02-2023, 02:38 AM #2<!DOCTYPE html>
<html>
<head>
<title>Test Code</title>
</head>
<body>
<!-- This is the test code we want to try -->
<script>
// Placeholder for the actual test logic
console.log("Running test...");
</script>
</body>
</html>
```
*Note: Replace the placeholder comment with your actual test implementation. Screenshots should be attached separately.*
For instance, to include jQuery in your HTML, add this line inside the head section:
<script src="jquery-3.6.3.min.js"></script>
Then, for a sample dropdown with additional details:
HTML:
<select id="fruitSelect">
<option value="" disabled selected>Select your option</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="bananas">Bananas</option>
</select>
<div id="moreOptions" style="display:none;">
<p id="itemDescription"></p>
<br>
<label for="itemQuantityInput">Quantity to buy:</label>
<input id="itemQuantityInput" type="number" min="0" max="100" value="1">
</div>
And the JavaScript code to display more information:
JavaScript:
$('#fruitSelect').change(() => {
$('#moreOptions').show();
const selectValue = $('#fruitSelect option
elected').val();let descriptionText = '';
if (selectValue == "apples") {
descriptionText = "Apples offer a sweet and tangy treat!";
} else if (selectValue == "oranges") {
descriptionText = "Oranges take a bit of work, but once you peel them, they're delicious!";
} else if (selectValue == "bananas") {
descriptionText = "Bananas are sweet and aromatic, just don't throw them like a boomerang";
}
$('#itemDescription').text(descriptionText);
})
tbnrfrag123
09-02-2023, 02:53 AM #3HTML serves as a fixed collection of information. Anything you input without external assistance remains unchanged upon page loading. To achieve your goals, you need to incorporate JavaScript. You might opt for plain JavaScript, but I favor jQuery since it simplifies the process (or at least reduces the amount of code).
For instance, to include jQuery in your HTML, add this line inside the head section:
<script src="jquery-3.6.3.min.js"></script>
Then, for a sample dropdown with additional details:
HTML:
<select id="fruitSelect">
<option value="" disabled selected>Select your option</option>
<option value="apples">Apples</option>
<option value="oranges">Oranges</option>
<option value="bananas">Bananas</option>
</select>
<div id="moreOptions" style="display:none;">
<p id="itemDescription"></p>
<br>
<label for="itemQuantityInput">Quantity to buy:</label>
<input id="itemQuantityInput" type="number" min="0" max="100" value="1">
</div>
And the JavaScript code to display more information:
JavaScript:
$('#fruitSelect').change(() => {
$('#moreOptions').show();
const selectValue = $('#fruitSelect optionelected').val();
let descriptionText = '';
if (selectValue == "apples") {
descriptionText = "Apples offer a sweet and tangy treat!";
} else if (selectValue == "oranges") {
descriptionText = "Oranges take a bit of work, but once you peel them, they're delicious!";
} else if (selectValue == "bananas") {
descriptionText = "Bananas are sweet and aromatic, just don't throw them like a boomerang";
}
$('#itemDescription').text(descriptionText);
})