I am really struggling in trying to figure out how I can find all Checkbox input IDs and pass thme through individually to my SQL DB with just one string or something that can handle the request. This is what I have so far, and it's repetitive and redundant and a PAAAIN because I have like 70 more checkboxes to go through and this is just getting ridiculous. Surely there si a way to do it in Javascript? This all works at the moment, and I have a separate PHP upload script that sends all this info to the DB, correctly, I just want to know a shortcut or array or whatever it is to help me manage my 70+ checkboxes people will be selecting and that will need to be sent to the DB.
The code below is what I am using and it works, but as you can see it's getting preposterous to handle all these IDs..... Any ideas? I would be eternally grateful.
Separate snippet form HTML file:
<tr>
<td>
<input id="fire_extinguisher" value="fire_extinguisher" type="checkbox">Fire Extinguisher
</td>
<td>
<input id="eye_wash_shower" type="checkbox">Eye Wash/Shower
</td>
<td>
<input id="ladder_scaffold" type="checkbox">Ladder/Scaffold
</td>
<td>
<input id="warning_signs" type="checkbox">Warning Signs
</td>
<td>
<input id="communications" type="checkbox">Communications
</td>
</tr>
JS FILE
//UPLOAD DATA
//Global variables
var jsaform = {
'location_detail' : "",
'emergency_number' : "",
'today' : "",
'person_in_charge' : "",
'other_employees' : "",
'job_description' : "",
'job_hazards' : "",
'energy_source_controls' : "",
'fire_extinguisher' : "No",
'eye_wash_shower' : "No",
'ladder_scaffold' : "No",
'warning_signs' : "No",
'communications' : "No",
'machine_guarding' : "No",
'forklift' : "No",
'transportation' : "No",
'welding_cutting' : "No",
'test_equipment' : "No",
'barricades' : "No",
'gfci_cord' : "No",
'protective_covering' : "No",
'hand_tools' : "No",
'ventilation' : "No",
'msds' : "No",
'power_tools' : "No",
'soldering' : "No",
'equipment_other' : "",
'natural_fiber' : "No",
'flame_resistant' : "No",
'long_sleeves' : "No",
'kevlar_sleeves' : "No",
'tyvek' : "No",
'hard_hat' : "No",
'hearing_protection' : "No",
'sun_screen' : "No",
'safety_glasses' : "No",
'goggles' : "No",
'face_shield' : "No",
'harness' : "No",
'attachment_point' : "No",
'personal_flotation_device' : "No",
'full_face' : "No",
'half_face' : "No",
'dust_mask' : "No",
'safety_shoes' : "No",
'rubber_boots' : "No",
'dielectric' : "No",
'cotton' : "No",
'leather' : "No",
'hot_gloves' : "No",
'protection_other' : ""
}
function uploaddata() {
//Read all of the data from the page
jsaform.location_detail = document.getElementById("location_detail").value;
jsaform.emergency_number = document.getElementById("emergency_number").value;
jsaform.today = document.getElementById("today").value;
jsaform.person_in_charge = document.getElementById("person_in_charge").value;
jsaform.other_employees = document.getElementById("other_employees").value;
jsaform.job_description = document.getElementById("job_description").value;
jsaform.job_hazards = document.getElementById("job_hazards").value;
jsaform.energy_source_controls = document.getElementById("energy_source_controls").value;
jsaform.equipment_other = document.getElementById("equipment_other").value;
jsaform.protection_other = document.getElementById("protection_other").value;
//Read Checked items
if (document.getElementById('fire_extinguisher').checked) {
jsaform.fire_extinguisher = 'Yes';
}
if (document.getElementById('eye_wash_shower').checked) {
jsaform.eye_wash_shower = 'Yes';
}
if (document.getElementById('ladder_scaffold').checked) {
jsaform.ladder_scaffold = 'Yes';
}
if (document.getElementById('warning_signs').checked) {
jsaform.warning_signs = 'Yes';
}
//Send to database upload function
upload_jsaform();
}
function upload_jsaform() {
$.ajax({
type: 'POST',
url: './php/upload_jsaform.php',
data: jsaform,
async: false,
dataType: 'text',
success: function() {
alert("Thank you. Your Job Safety Analysis form has been submitted.");
},
error: function(jqXHR, textStatus, errorThrown) {
alert("Error... " + textStatus + "\n" + errorThrown);
}
});
return false;
};
You can loop like this:
for (eID in jsaform) {
if(document.getElementById(eID) && document.getElementById(eID).checked) {
jsaform[eID] = 'Yes';
}
}
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.