PROBLEM SOLVED
I just started learning JavaScript, and I came across a problem while coding a quick tool for a game that I play. I want users to be able to input a couple of things via an HTML Form and I want the JS Script to take that input and turn it into an SQL.
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HabSQL - Online SQL Generator</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css'>
<link href="css/styles.css" rel='stylesheet' type='text/css'>
</head>
<body>
<header>Welcome to HabSQL v1.0! The Online Habbo SQL Generator!</header>
<p>HabSQL is strictly for use with Habbo Furniture SQLs and Data. Please enter all necessary information accordingly.</p>
<script src="scripts/habSQL.js"></script>
<form action="javascript:void(habSQL())">
<fieldset>
Furniture Name: <input id="furniName" type="text">
Furniture ID: <input id="furniID" type="number"><br>
SWF File Name: <input id="fileName" type="text"> (Exclude .SWF)<br>
Sprite ID: <input id="spriteID" type="number"> (We recommend that you use the same ID as Furniture ID).
</fieldset>
<fieldset>
Furniture Type: <input id="furniType" type="radio" value="s" name="furniType">Floor <input id="furniType" type="radio" value="i" name="furniType">Wall <input id="furniType" type="radio" value="e" name="furniType">Effect<br>
</fieldset>
<fieldset>
Furniture Width: <input id="furniWidth" type="number" class="dimensions"> Furniture Length: <input id="furniLength" type="number" class="dimensions"> Furniture Height: <input id="furniHeight" type="number" class="dimensions"><br>
Can you stack furniture on it? <input id="canStack" type="radio" value="1" name="canStack">Yes <input id="canStack" type="radio" value="0" name="canStack">No<br>
Can you sit on it? <input id="canSit" type="radio" value="1" name="canSit">Yes <input id="canSit" type="radio" value="0" name="canSit">No<br>
Can you walk on/through it? <input id="canWalk" type="radio" value="1" name="canWalk">Yes <input id="canWalk" type="radio" value="0" name="canWalk">No<br>
Can you recycle it? <input id="canRecycle" type="radio" value="1" name="canRecycle">Yes <input id="canRecycle" type="radio" value="0" name="canRecycle">No<br>
Can you trade it? <input id="canTrade" type="radio" value="1" name="canTrade">Yes <input id="canTrade" type="radio" value="0" name="canTrade">No<br>
Can you sell it on the Marketplace? <input id="canSell" type="radio" value="1" name="canSell">Yes <input id="canSell" type="radio" value="0" name="canSell">No<br>
Can you give it to someone as a gift? <input id="canGive" type="radio" value="1" name="canGive">Yes <input id="canGive" type="radio" value="0" name="canGive">No<br>
Can you stack it in the inventory? <input id="invStack" type="radio" value="1" name="invStack">Yes <input id="invStack" type="radio" value="0" name="invStack">No<br>
</fieldset>
<fieldset>
Interaction Type:<br>
<input id="intType" type="radio" value="default" name="intType">None<br>
<input id="intType" type="radio" value="bed" name="intType">Bed<br>
<input id="intType" type="radio" value="vendingmachine" name="intType">Vending Machine<br>
<input id="intType" type="radio" value="trophy" name="intType">Trophy<br>
<input id="intType" type="radio" value="gate" name="intType">Gate<br>
<input id="intType" type="radio" value="onewaygate" name="intType">One Way Gate<br>
<input id="intType" type="radio" value="dice" name="intType">Dice<br>
<input id="intType" type="radio" value="teleport" name="intType">Teleporter<br>
(More Interaction Types Coming in v2.0)<br>
</fieldset>
<fieldset>
How many interactions does the furniture have? (i.e. a dice has 6 sides and a closed side, therefore 7 interactions.)<br>
<input id="intCount" type="number"><br>
If your furniture gives out an item, what is the item's ID? 0, if none. (View external_flash_texts.txt or external_flash_texts.xml for ID #'s.)<br>
<input id="vendingID" type="number"><br>
</fieldset>
<input type="Submit" value="Generate!">
</form>
Furniture SQL:<br>
<textarea id="furniSQL" readonly="true" rows="10" cols="50"></textarea>
</body>
</html>
And here is my JS:
// HabSQL - Online Habbo SQL Generator
// Developed by Thomas Yamakaitis - March 3, 2015
function habSQL() {
var furniID = document.getElementById('furniID').value;
var furniName = document.getElementById('furniName').value;
var fileName = document.getElementById('fileName').value;
var furniType = document.getElementById('furniType').value;
var furniWidth = document.getElementById('furniWidth').value;
var furniLength = document.getElementById('furniLength').value;
var furniHeight = document.getElementById('furniHeight').value;
var canStack = document.getElementById('canStack').value;
var canSit = document.getElementById('canSit').value;
var canWalk = document.getElementById('canWalk').value;
var spriteID = document.getElementById('spriteID').value;
var canRecycle = document.getElementById('canRecycle').value;
var canTrade = document.getElementById('canTrade').value;
var canSell = document.getElementById('canSell').value;
var canGive = document.getElementById('canGive').value;
var invStack = document.getElementById('invStack').value;
var intType = document.getElementById('intType').value;
var intCount = document.getElementById('intCount').value;
var vendingID = document.getElementById('vendingID').value;
var comma = ", ";
var commaQuotes = "', '";
var quoteComma = "', ";
var commaQuote = ", '";
document.getElementById('furniSQL').innerHTML = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
}
I can't seem to pinpoint exactly what it is that I am doing wrong. If somebody could please assist me, that would be greatly appreciated.
Thanks!
Thanks to a few users here! The solution was a typo and I believe it was also value instead of innerHTML too.
A simple typo: furniId instead of furniID on the last line
JavaScript is case-sensitive so if you capitalize a variable name differently it's a completely different variable, and so it does not know what you mean.
You got a typo: furniID in your last element which is document.getElementById('furniSQL').value= is spelled as furniId
Textareas are modified by value, not innerHTML
so set it up to
document.getElementById('furniSQL').value = "INSERT INTO `furniture` (`id`, `public_name`, `item_name`, `type`, `width`, `length`, `stack_height`, `can_stack`, `can_sit`, `is_walkable`, `sprite_id`, `allow_recycle`, `allow_trade`, `allow_marketplace_sell`, `allow_gift`, `allow_inventory_stack`, `interaction_type`, `interaction_modes_count`, `vending_ids`, `is_arrow`, `foot_figure`, `height_adjustable`, `effectM`, `effectF`, `HeightOverride`) VALUES (" + furniId + commaQuote + furniName + commaQuotes + fileName + commaQuotes + furniType + quoteComma + furniWidth + comma + furniLength + comma + furniHeight + commaQuote + canStack + commaQuotes + canSit + commaQuotes + canWalk + quoteComma + spriteID + commaQuote + canRecycle + commaQuotes + canTrade + commaQuotes + canSell + commaQuotes + canGive + commaQuotes + invStack + commaQuotes + intType + quoteComma + intCount + comma + vendingID + ");";
and you should be good to go.
Related
I'm having issues getting input from a document and outputting it using the this keyword. When outright calling the object and attribute followed by .value I didn't encounter a problem, but trying to use this has become a complication. Calling person.display results in undefined areas. I've looked for how to get a value for this and I'm starting to get further away from the solution. Could someone provide help?
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lesson 11 Lab</title>
</head>
<body>
<label for="first_name">Enter first name:</label><br>
<input type="text" id="first_name"><br><br>
<label for="last_name">Enter last name:</label><br>
<input type="text" id="last_name"><br><br>
<label for="course">Enter your course:</label><br>
<input type="text" id="course"><br><br>
<label for="section">Enter your section:</label><br>
<input type="text" id="section"><br><br>
<label for="role">Enter your role:</label><br>
<input type="text" id="role"><br><br>
<input type="button" id="button1" value="Show: Person/Class/Role"><br>
<p id="fill_in"></p>
<script src="person_java.js"></script>
</body>
</html>
JavaScript
let person = {
first_name: document.getElementById("first_name"),
last_name: document.getElementById("last_name"),
course: document.getElementById("course"),
section: document.getElementById("section"),
role: document.getElementById("role"),
display: function() {
document.getElementById("fill_in").innerHTML = this.first_name + " " + this.last_name + " has the role of " + this.role + " in " + this.course + " section " + this.section + ".";
}
};
document.getElementById("button1").addEventListener("click", );
You need to reference the value when you are building the string. You need to call your function onclick. With those changes, your code will work fine.
let person = {
first_name: document.getElementById("first_name"),
last_name: document.getElementById("last_name"),
course: document.getElementById("course"),
section: document.getElementById("section"),
role: document.getElementById("role"),
display: function() {
document.getElementById("fill_in").innerHTML = this.first_name.value + " " + this.last_name.value + " has the role of " + this.role.value + " in " + this.course.value + " section " + this.section.value + ".";
}
};
document.getElementById("button1").addEventListener("click", function (){
person.display();
});
<label for="first_name">Enter first name:</label><br>
<input type="text" id="first_name"><br><br>
<label for="last_name">Enter last name:</label><br>
<input type="text" id="last_name"><br><br>
<label for="course">Enter your course:</label><br>
<input type="text" id="course"><br><br>
<label for="section">Enter your section:</label><br>
<input type="text" id="section"><br><br>
<label for="role">Enter your role:</label><br>
<input type="text" id="role"><br><br>
<input type="button" id="button1" value="Show: Person/Class/Role"><br>
<p id="fill_in"></p>
I'm creating a custom HTML page for my team at work. We are using dropdowns, text fields, and radio buttons to generate the fields of an email. We all use IE and Outlook so that's not a problem. I'm having trouble getting the "generate email" button to fill in the message. I can get the email window to pop up, but all of the fields are blank. I need the subject, to field, CC field, and body to be filled in according to the options they selected on the page. Here's my code:
<script>
$(function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue") + "<br>Contact info: " + $("#contactInformation") + "<br>Requested action: " + $(".requestedAction:checked");
window.location.href = "mailto:" + emailTo + "&CC=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
});
</script>
<body>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
</body>
In addition, I also need to format the body with line breaks and bold letters. The code above doesn't work. I'm pretty sure it won't work because of the less than/greater than symbols, but I dunno how else to put in HTML code. I know its possible because the old tool I'm replacing was able to achieve it, I just don't know how. Go easy on me, I'm new to jQuery and Javascript. Thanks in advance!
You are missing the ? in the mailto url so the querystring parameters are not passed in (note the ? before cc=):
window.location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
To add line breaks you could use %0A%0A as a line breakers. This will spawn different paragraphs like so:
&body=first line %0A%0A second line
You also have some errors in you code, some missing val() calls, to get the fields values, and missing conditionals to check if fields are set (to build the query string including those values or not).
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
location.href = "mailto:" + emailTo + "?" +
(emailCC ? "cc=" + emailCC : "") +
(emailSubject ? "&subject=" + emailSubject : "") +
(emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
Hope it helps.
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = "Escalation Request - Ticket #: " + $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0AContact info: " + $("#contactInformation").val() + "%0A%0ARequested action: " + $(".requestedAction:checked").val();
location.href = "mailto:" + emailTo + "?" +
(emailCC ? "cc=" + emailCC : "") +
(emailSubject ? "&subject=" + emailSubject : "") +
(emailBody ? "&body=" + emailBody : "");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Team</h1>
<select id="teamName">
<option value="a#a.com">Team A</option>
<option value="b#b.com">Team B</option>
<option value="c#c.com">Team C</option>
</select><br><br>
<h1>CC</h1>
<input type="text" id="CC"><br><br>
<h1>Issue</h1>
<input type="text" id="issue"><br><br>
<h1>Ticket Number</h1>
<input type="text" id="ticketNumber"><br><br>
<h1>Customer contact info</h1>
<input type="text" id="contactInformation"><br><br>
<h1>Requested action</h1>
<input type="radio" name="requestedAction" class="requestedAction" value="Expedite service" id="reqActExpediteService" checked>Expedite service<br>
<input type="radio" name="requestedAction" class="requestedAction" value="Callback" id="reqActCallback">Callback<br><br>
<input type="submit" value="Generate email" onclick="generateEmail()">
Why i can't getElementByName?
<form class="form" action="#">
<p class="EmptySlot" hidden>
<input name="characters" type="radio" id="empty" disabled="disabled"/>
<label for="empty">Пустой слот</label>
</p>
</form>
Then:
$(".form").append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
And it's don't work:
var radios = document.getElementsByName('character');
The method will return a collection, not a single Element. You may try...
$(".form")[0].append('\
<p>\
<input name="character" type="radio" id="' + notformatname + '" value="' + notformatname + '"/>\
<label for="' + notformatname + '" id="charlabel">' + formatname + '</label>\
</p>');
Should get the first form that belongs to the "form" class.
The second should work, but remember that "radios" will be a collection too.
.getElementsByName might return more than one element if multiple elements have the name of 'character'.
To get the first item in the list of returned elements, try:
var radios = document.getElementsByName('character')[0];
Thanks to the help from StackOverflow I have got as far as creating a single line entry with fields and then this adds each field to an array but the Hours SQL statement isn't working e.g. it will have blank sql entries for the first 2 records and then work correctly on another but I cannot see what I am doing wrong. Any help would be very appreciated.
<td colspan="3" align="left"><div id="hoursrow">
<p> <span class="text">Hours Labour :</span></span></p>
<p> <span class="headings"><span class="text"><span class="hours">Start Time:
<input type="time" name="add_start" size="4" />
Finish Time:
<input type="time" name="add_finish" size="4" />
Date:
<input type="date" name="add_date" size="4" />
OVT:
<input type="checkbox" name="add_overtime_hours" id="add_overtime_hours" size="1" maxlength="1" />
</span></span><span class="text"><span class="hours">
<input onclick="addhours(this, event);" type="button" value="Add Labour" />
</span></span></p>
<p class="headings"><span class="text"><span class="hours">
<span class="info">(This row will not be saved unless you click on "Add Labour" first) </span></span></span></p>
</div></td>
<td width="7"></td>
</tr>
<tr>
var rownumhours = 1;
function addhours(obj, e) {
rownumhours++;
var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[' + rownumhours + ']" size="4" value="' +
$(obj).closest('span.headings').find('[name="add_start"]').val() + '"> Finish Time: <input type="time" name="add_finish[' + rownumhours + ']" value="' +
$(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[' + rownumhours + ']" value="' +
$(obj).closest('span.headings').find('[name="add_date"]').val() + '"> Show_Overtime: <input type="text" name="show_overtime_hours[' + rownumhours + ']" size="1" value="' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0' ) + '"> Overtime: <input type="checkbox" name="add_overtime_hours[' + rownumhours + ']" size="1" value="' +
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
' "> <input type="button" value="Remove" onclick="removeRow(' +
rownumhours + ');"></p>';
jQuery('#hoursrow').append(hoursrow);
$(obj).closest('span.headings').find('[name="add_start"]').val("");
$(obj).closest('span.headings').find('[name="add_finish"]').val("");
$(obj).closest('span.headings').find('[name="add_date"]').val("");
$(obj).closest('span.headings').find('[name="show_overtime_hours"]').val("");
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked');
}
function removeRow(rnum) {
jQuery('#rownumhours' + rnum).remove();
}
So it is showing on the page properly as I want it to but then the major problem is is won't add properly to the database.
I have echo'd the sql that is to be inserted into the database and it shows the following.
INSERT INTO hours(job_number,start_time,finish_time,date,overtime)
VALUES('904','','','','')
INSERT INTO hours(job_number,start_time,finish_time,date,overtime)
VALUES('904','','','','')
INSERT INTO hours(job_number,start_time,finish_time,date,overtime)
VALUES('904','10:10','11:11','2017-01-03','') //
The Sql part is as follows
if (
!empty($_POST['add_start']) && !empty($_POST['add_finish']) && !empty($_POST['add_date']) && !empty($_POST['show_overtime_hours'])&&
is_array($_POST['add_start']) && is_array($_POST['add_finish']) && is_array($_POST['add_date']) && is_array($_POST['show_overtime_hours'])&&
count($_POST['show_overtime_hours']) && count($_POST['add_finish']) && count($_POST['add_date']) === count($_POST['add_start'])
) {
$add_start_array = $_POST['add_start'];
$add_finish_array = $_POST['add_finish'];
$add_overtime_hours_array = $_POST['show_overtime_hours'];
$add_date_array =$_POST['add_date'];
for ($i = 0; $i < count($add_start_array); $i++) {
$add_start_values = $mysqli->real_escape_string($add_start_array[$i]);
$add_finish_values = $mysqli->real_escape_string($add_finish_array[$i]);
$add_date_values = $mysqli-> real_escape_string($add_date_array[$i]);
$add_overtime_hours_boolean = $mysqli-> real_escape_string($add_overtime_hours_array[$i]);
$sql_add_hours = "INSERT INTO hours(job_number,start_time,finish_time,date,overtime) VALUES('$increment_job_number','$add_start_values','$add_finish_values','$add_date_values','$add_overtime_hours_boolean')";
$mysqli-> query($sql_add_hours);
// This next section is for debugging only
//echo ($add_date_values);
//echo ($add_start_values);
//echo ($add_finish_values);
echo ($sql_add_hours);
//echo ($add_overtime_hours_values);
}
Ok, after doing some inspections, actually the first group of the html components produced from the JQuery is :
"Start Time:"
<input type="time" name="add_start[2]" size="4" value="23:57">
"Finish Time:"
<input type="time" name="add_finish[2]" size="4" value="22:57">
"Date:"
<input type="date" name="add_date[2]" value="2017-01-13">
"Show_overtime:"
<input type="text" name="show_overtime_hours[2]" size="1" value="0">
"Overtime:"
<input type="checkbox" name="add_overtime_hours[2]" size="1" value="on">
<input type="button" value="Remove" onclick="removeRow(2)">
You see there...,the counter (rownumhours) starts from 2.
Thus in your php part, the first entries for these array :
$add_start_array = $_POST['add_start'];
$add_finish_array = $_POST['add_finish'];
$add_overtime_hours_array = $_POST['show_overtime_hours'];
$add_date_array =$_POST['add_date'];
Also at 2nd-index, but as your loop starts from zero , hence the entry for the location is empty.
So start the rownumhours in javascript part from -1:
var rownumhours = -1;
Quick Fix
You increment the rownumhours before dynamically adding a new row of fields.
The quickest fix is change the rownumhours value to 0
var rownumhours = 0;
So the newly added row of fields will have the index of 1 and up.
Also add [] to the name tag to the first/default row:
<input type="time" name="add_start[]" size="4"> <!-- this will have an index of 0 -->
<!-- DO THE SAME WITH FIRST/DEFAULT SET OF FIELDS -->
Recommendation
But what you can actually do is do not bother with the assigning of index.
Just put [] to the given row of fields:
<td colspan="3" align="left">
<div id="hoursrow">
<p>
<span class="text">Hours Labour :</span>
</p>
<p>
<span class="headings">
<span class="text">
<span class="hours">
Start Time: <input type="time" name="add_start[]" size="4" />
Finish Time: <input type="time" name="add_finish[]" size="4" />
Date: <input type="date" name="add_date[]" size="4" />
OVT: <input type="checkbox" name="add_overtime_hours[]" id="add_overtime_hours" size="1" maxlength="1" />
</span>
</span>
<span class="text">
<span class="hours">
<input onclick="addhours(this, event);" type="button" value="Add Labour" />
</span>
</span>
</span>
</p>
<p class="headings">
<span class="text">
<span class="hours">
<span class="info">(This row will not be saved unless you click on "Add Labour" first)</span>
</span>
</span>
</p>
</div>
</td>
Then remove the rownumhours and do not assign index for dynamically added input fields:
var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' + $(obj).closest('span.headings').find('[name="add_start"]').val() + '"> /*** JUST CONTINUE THE REST OF THE INPUT FIELDS ***/
Thank you all so very much for the help. I am sorry It took a few days to reply. I have made the changes by taking the rownumhours ++ off and using the [] for the naming to be taken care of itself which I had no idea it was clever enough to do it on its own.
The Mysql Section worked well and I also left the html section because I only wanted to have different names for the multiple hours into the entries
var rownumhours = 0;
function addhours(obj, e) {
var hoursrow = '<p id="rownumhours' + rownumhours + '">Start Time: <input type="time" name="add_start[]" size="4" value="' +
$(obj).closest('span.headings').find('[name="add_start"]').val() + '"> Finish Time: <input type="time" name="add_finish[]" value="' +
$(obj).closest('span.headings').find('[name="add_finish"]').val() + '"> Date: <input type="date" name="add_date[]" value="' +
$(obj).closest('span.headings').find('[name="add_date"]').val() + '"> <input type="hidden" name="show_overtime_hours[]" size="1" value="' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? '1' : '0' ) + '"> Overtime: <input type="checkbox" name="add_overtime_hours[]" size="1" value="' +
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').val() + '"' +
(($(obj).closest('span.headings').find('[name="add_overtime_hours"]').is(':checked')) ? 'checked' : '') +
' "> <input type="button" value="Remove" onclick="removeRow(' +
rownumhours + ');"></p>';
jQuery('#hoursrow').append(hoursrow);
rownumhours++;
$(obj).closest('span.headings').find('[name="add_start"]').val("");
$(obj).closest('span.headings').find('[name="add_finish"]').val("");
$(obj).closest('span.headings').find('[name="add_date"]').val("");
$(obj).closest('span.headings').find('[name="show_overtime_hours"]').val("");
$(obj).closest('span.headings').find('[name="add_overtime_hours"]').removeAttr('checked');
}
function removeRow(rnum) {
jQuery('#rownumhours' + rnum).remove();
}
</script>
I'm learning HTML, JavaScript & NodeJs (I'm just getting started(.
I'm trying to create a web site, which the user will answer some question (with radio buttons) and when the user click on Submit button, the answers will be sent to the server).
I'm creating the questions by this javascript function:
<script type="text/javascript" >
var questionCounter = 0;
var questionId = 0;
function printQueue(question) {
questionId++;
questionCounter++;
var radioName="Q"+questionCounter;
var id = "Q" + questionCounter;
document.write("<p> <b> " + question + " </b> </p>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.value)\" value=\"5\">Best<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.value)\" value=\"4\">Very Good<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.value)\" value=\"3\">Good<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.value)\" value=\"2\">Not Good<br>");
document.write ("<input type=\"radio\" id=" + id + " name=" + radioName +
" onclick=\"check(this.value)\" value=\"1\">Worst<br>");
}
</script>
and call this function in the following way:
<script type="text/javascript" >
printQueue("1. XXX1 ? ");
printQueue("2. XXX2 ? ");
printQueue("3. XXX3 ? ");
...
...
printQueue("N. XXXN ? ");
</script>
Is there a way to go over the questions and get the value of the selected answer of each question ?
I looked at:
How to get value of selected radio button
But it seem to cumbersome...
is there a way like:
1. loop over the questions
1.1 for each Q getSelected().getvalue()
Thanks
This might help
HTML
<form id="myForm">
<div class='Q'> <span>Q1</span>
<input type="radio" name="Q1" value="1" />1
<br />
<input type="radio" name="Q1" value="2" />2
<br />
<input type="radio" name="Q1" value="3" />3
<br />
</div>
<div class='Q'> <span>Q2</span>
<input type="radio" name="Q2" value="1" />1
<br />
<input type="radio" name="Q2" value="2" />2
<br />
<input type="radio" name="Q2" value="3" />3
<br />
</div>
<input type='button' value='Get Values' id='temp'>
</form>
JS
$('#temp').on('click', function () {
var Ans = [];
$('.Q').each(function (index, Obj) {
Ans.push({
"Name ": $(this).find('span').text(),
"Answer": $(this).find('input[type="radio"]:checked').val()
})
})
console.log(Ans)
});
Demo