Add text (from another html page) to a current html page using javascript
Question
I have the following code
<!DOCTYPE html> <html> <body> <h2>The select Element</h2> <p>The select element defines a drop-down list:</p> <form action="/action_page.php"> <select name="cars"> <option value="Volvo/text.html">Volvo</option> <option value="Saab/text.html">Saab</option> <option value="Fiat/text.html">Fiat</option> <option value="Audi/text.html">Audi</option> </select> <br><br> <input type="submit"> </form> <table> </table> </body> </html>
What I would like to do is based on my selection, get the html text of say Audi/text.html and insert it between the table tags. So it would look like...
<table> <tr> <td> Some Audi text </td> <td> Some more text</td> </tr> </table>
Obviously, when the selection is changed, the content would change. If someone knows a better way to do this w/o javascript, that would be even better.
Thank you!
2 answers
solution1
0 2019-06-12 19:17:05
It will not be possible to do this without a bit of JS because it requires listening for an event and changing the text accordingly. From my understanding of the question you want the selection to replace the first td element within the table every time a new option is selected. With that in mind something like this should work.
I'll begin by adding an id to your select box and first td element so we can easily target them both. Then I will add an event listener so every time the selection changes the text will change accordingly.
<!DOCTYPE html>
<html>
<body>
<h2>The select Element</h2>
<p>The select element defines a drop-down list:</p>
<form action="/action_page.php">
<select id="cars" name="cars">
<option value="Volvo/text.html">Volvo</option>
<option value="Saab/text.html">Saab</option>
<option value="Fiat/text.html">Fiat</option>
<option value="Audi/text.html">Audi</option>
</select>
<br><br>
<input type="submit">
</form>
<table>
<tr>
<td id="switcheroo"></td>
</tr>
</table>
<script>
(function() {
var tdEl = document.getElementById('switcheroo'),
select = document.getElementById('cars');
select.addEventListener('change', function() {
tdEl.innerHTML = this.value;
});
})();
</script>
</body>
</html>
Let me know if this meets your requirements.. now that I'm rereading your question it might not quite be exactly what you're looking for but hopefully it's pretty close and will see you towards the proper solution
solution2
0 ACCPTED 2019-06-12 19:36:52
I would rather suggest you to use jQuery with some ajax calls
$(document).ready(function(){ // On Page Load this is going to be executed $.ajax({ url: "Volbo/text.html" , }).always(function(data) { $("#myTable").html(data); }); // on Select change this is going to be executed $("#drop").change(function () { $.ajax({ url: this.value, }).always(function(data) { $("#myTable").html(data); }); }); });
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select id="drop" name="cars"> <option value="Volvo/text.html">Volvo</option> <option value="Saab/text.html">Saab</option> <option value="Fiat/text.html">Fiat</option> <option value="Audi/text.html">Audi</option> </select> <table id="myTable"> </table>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.