How to correctly implement (and maybe better organize) this JavaScript function?
Question
Pretty new to JavaScript and I could use a hand here. I have in my webpage a user review form. It is a row with 10 drop down boxes that allows the user to answer the questions about a student on a rating scale of 1-5. If the user selects < 2 for any of them, they are prompted with a text box to explain the low rating(call it LowRatingPopUp). There is a button that adds another student to review. When the button is clicked, a new review form is added on the fly (call it NewStudent).
The problem I am having is with printing/displaying the new form. In NewStudent function I am concatenating the form as a large string in the function to re-print everything.It therefore is not correctly creating a new LowRatingPopUp when the button is pressed. The code can't be included or it breaks the page. It also make for a HUGE amount of code to be in Function-2.
Default HTML Section:
<section>
<!-- Form -->
<form method="post" action="#">
<div class="row uniform">
<!-- Break -->
<div class="12u$">
<h3>Please use the following scale when rating the student:</h3>
<ul style="list-style: none" ;>
<li>1 = Poor</li>
<li>2 = Less than acceptable</li>
<li>3 = Satisfactory</li>
<li>4 = Very good</li>
<li>5 = Excellent</li>
</ul>
<div style="height:550px;border:1px solid #ccc;font:16px/26px Georgia, Garamond, Serif;overflow:auto;">,<!-- container for reviews-->
<div id="ReviewForm">
<hr>
<h2>
Student:
<select>
<option value="Adam">Adam</option>
<option value="Bob">Bob</option>
<option value="Corey">Corey</option>
</select>
</h2>
<div class="table-wrapper" ; text-align: center;>
<table>
<thead>
<tr>
<th>Motivation and general attitude</th>
<th>Educational initiative & Scholarship</th>
<th>Understanding of course material</th>
<th>Ability to apply course material</th>
<th>Oral English expression skills</th>
<th>Written English expression skills</th>
<th>Ability to analyze/integrate/apply</th>
<th>Ethical standards & integrity</th>
<th>Respect for diversity</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
<td>
<select>
<option value="" selected="selected">Select...</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
</td>
</tr>
<div id="Other" class="showother" style="display:none" name="textbox" id="textbox" type="text">
</div>
</tbody>
</table>
<div style='display:none;' id='business'>
<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." /><!--LowRatingPopUp-->
<br/>
</div>
</div>
</div>
</div>
</div>
</form>
<input type="hidden" name="count" value="1" />
<div class="control-group" id="fields">
<label class="control-label" for="field1"></label>
<div class="controls" id="profs">
<form class="input-group-btn">
<div>
<button class="btn btn-success" type="button" onclick="ReviewForm();">Add another student</button>
</div>
</form>
<br>
<br>
</div>
</div>
</section>
JS Function when button is clicked:
function ReviewForm() {
room++;
var objTo = document.getElementById('ReviewForm')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass" + room);
var rdiv = 'removeclass' + room;
divtest.innerHTML = '<hr>' +
'<h2>Student:</h2>' +
'<select>' +
'<option value="Adam">Adam</option> ' +
'<option value="Bob">Bob</option> ' +
'<option value="Corey">Corey</option>' +
'</select></h2>' +
'<div class="table-wrapper">' +
'<table>' +
'<thead>' +
'<tr>' +
'<th>Motivation/general attitude</th>' +
'<th>Educational initiative & Scholarship</th>' +
'<th>Understanding of course material</th>' +
'<th>Ability to apply course material</th>' +
'<th>Oral English expression skills</th>' +
'<th>Written English expression skills</th>' +
'<th>Ability to analyze/integrate/apply</th>' +
'<th>Ethical standards & integrity</th>' +
'<th>Respect for diversity</th>' +
'</tr>' +
'</thead>' +
'<tbody>' +
'<tr>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
'<td>' +
'<select>' +
' <option value="" selected="selected">Select...</option>' +
' <option value="1">1</option>' +
'<option value="2">2</option>' +
' <option value="3">3</option>' +
' <option value="4">4</option>' +
' <option value="5">5</option>' +
' </select>' +
' </td>' +
' </tr>' +
' </tbody>' +
' <tfoot>' +
' </tfoot>' +
' </table>' +
//If I add the next chunk of code to the function, it breaks the functionality of the JS on the page
/* '<div style='display:none;' id='business'>'+
'<input type='text' class='text' name='business' placeholder="You gave a rating of less than 3 in one or more categories. Please provide a brief explination as to why." />'+
'<br/>'+
'</div>'+*/
'</div>'
objTo.appendChild(divtest)
}
2 answers
solution1
0 2017-10-16 16:42:17
In ES6 you can use the template strings (backtick) for construct and concatenate large and multiline strings:
https://developers.google.com/web/updates/2015/01/ES6-Template-Strings
var name = 'Mike'; var inner = ` <div> \\ <h2> hello ${name} </h2> \\ </div> `; console.log(inner);
solution2
0 2017-10-16 16:46:30
You can make functions that just check each form item using the onChange element and then have independent js functions display hidden text areas if certain options are selected. Here is an example of what I'm talking about.
function typeCheck(that){ if (that.value == "data"){ document.getElementById("ifdata").style.display = "inherit"; document.getElementById("ifvoice").style.display = "none"; } else if (that.value == "voice"){ document.getElementById("ifdata").style.display = "none"; document.getElementById("ifvoice").style.display = "inherit"; } else if (that.value == "full"){ document.getElementById("ifdata").style.display = "inherit"; document.getElementById("ifvoice").style.display = "inherit"; } else { document.getElementById("ifdata").style.display = "none"; document.getElementById("ifvoice").style.display = "none"; } }
<select id="type" name="type" cols="4" onchange="typeCheck(this);"> <option value=""></option> <option value="voice">Voice</option> <option value="data">Data</option> <option value="full">Full</option> </select> <div id="ifdata" style="display: none;"> <label for="CID">Circuit ID(s):</label> <textarea id="CID" name="CID" rows="4"></textarea> </div> <div id="ifvoice" style="display: none;"> <label for="TN">Telephone Number(s):</label> <textarea id="TN" name="TN" rows="4"></textarea> </div>
Disclaimer: this solution is using style.display = 'none'; which does not work on Safari. Safari requires that you position the element at the top of the page.
For my use case Safari compatibility was not needed, so the implementation that works on all other browsers was used.
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.
Related Question
How organize this function to work correctly?
How to better organize consecutive replace methods in JavaScript?
Having issue with the “for” statement or maybe confusion on how to correctly implement the statement.
How to correctly implement a javascript callback
How to organize coffescript in better way
How better organize grid lines?
django and javascript how to organize
How to organize a Javascript UI?
How to correctly implement cyclic arrays in JavaScript
How to implement a sliding animation in javascript correctly?
Related Tags