What can javascript do for you? Well let's say we have a dropdown selection type of field added in my html form with 3 possible selections. I would like the first option to dispay a text box upon selecting it, the second a radio button grid ,etc.
Best real case scenario is for a database filled with towns, counties, streets data. As you might know when you select a town you want to see only streets correspondent to your selection.
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
</head>
<body id="page-top">
<form method="get/post" enctype="multipart/form-data">
<h5>Incarca referinta catre un fisier</h5> <select style="height:30px" id="doc" name="doc" size="1" onchange="change();">
<option></option>
<option value="plan_uz">Plan Uz</option>
<option value="certif_urb">Certificat de urbanism</option>
<option value="aviz_cu">Avize CU</option>
</select>
<input type="text" name ="plan_uz" id="plan_uz" style="display: none;">
<input type="text" name ="certif" id="certif" style="display: none;">
<br><br>
<div id="aviz_cu" style="display:none;" class="checkboxes-and-radios">
<table border="0" style="padding-left:30px; display: inline-block; float: left; ">
<tbody>
<form>
<tr>
<td>
<div class="radio">
<label> <input type="radio" name="aviz_electric" value="aviz_electric"></label>Aviz Electric
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_politie" value="aviz_politie"></label>Aviz Politie
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_apa" value="aviz_apa"></label>Aviz Apa
</div>
</td>
</tr>
</form>
</tbody>
</table>
<table border="0" style="display: inline-block;">
<tbody>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_aeroport" value="aviz_aeroport"></label>Aviz Aeroport
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_gaze" value="aviz_gaze"></label>Aviz Gaze
</div>
</td>
</tr>
<tr>
<td>
<div class="radio">
<label><input type="radio" name="aviz_x" value="aviz_x"></label>Aviz X
</div>
</td>
</tr>
</tbody>
</table>
</div>
<br>
<input class="" type="submit" name="incarca_plan_uz" value="Incarca plan uz" id="plan_uz" style="display: none;">
<input class="" type="submit" name="incarca_cu" value="Incarca CU" id="incarca_cu" style="display: none; ">
</body>
</form>
</html>
As you can see we have 6 radio buttons, 2 text boxes, and 2 buttons for submitting.
Radio buttons have been arranged in a table form so that they can allign properly. As you might know, it's a tricky part to allign a grid with radio buttons over all browsers, so the best solution is to encapsulate them into a table.
The buttons don't do anything in this tutorial, they are there only to show the potential of running multiple queries (separate queries) from the same html page.(This code is extracted from an app that I worked on, which could submit data to one of two MySQL databases correspodent to the field selected in the dropdown.
"display:none" style helps us to hide all the elements untill javascript is called to reveal them, and keep the others hidden.
index.js:
<script type="text/javascript">
$(document).ready(function () {
$('#doc').change(function () {
if ($('#doc').val() == 'plan_uz') {
$("#txtImage").show()
$("#certif").hide()
$("#plan_uz").show()
$("#incarca_cu").hide()
$("#aviz_cu").hide()
}
if ($('#doc').val() == 'certif_urb') {
$("#certif").show()
$("#txtImage").hide()
$("#plan_uz").hide()
$("#incarca_cu").show()
$("#aviz_cu").show()
}
if ($('#doc').val() == 'aviz_cu') {
$("#certif").hide()
$("#txtImage").hide()
$("#plan_uz").hide()
$("#incarca_cu").hide()
$("#aviz_cu").show()
}
});
});
</script>
The jquery script must be added to the index.html file either with a reference tag or by pasting it inside index.html at the last part of <head> tag.
Before the script tag you need to reference the jquery library. An example of site which offers to host the script for free is this one:<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> , so you just paste this code before the script.
If you need help contact me :-)
Comments
Post a Comment