We Keep Coding

Concatenate user input in Html form and assigning an ID to it, in order to submit in JavaScript

everyone I am newbie to JavaScript and Html and i am trying to concatenate the user input in html form and giving an ID and submit, in order to give command to my controller to act accordingly.
This is basically setting up schedule for port 1 and command goes like [NORMAL 122(STARTTIMESTOPTIME DAYSESSION)I haven't included session yet.
function Port1_sch_On_off(){
if(connected_flag==1){
client.subscribe("lazy/test");
message = new Paho.MQTT.Message("NORMAL 122 + document.getElementById('port1_timeday'.value)");
message.destinationName = "lazy/test";
client.send(message);
}
else {
console.log("not connected")
}
return false;
}
<tr height=40>
<td><style="text-align:middle">PORT1_SCH_ON_OFF</td>
<td width=40></td>
<td><form id="port1_timeday" oninput="port1_timeday.value = start_time.valueAsNumber start_day.valueAsNumber stop_time.valueAsNumber stop_day ">
<input name="start_time" id="start_time" type="time" min="00:00" max="24:00" required/>
<span class="hours"></span>
<label for="start_day">Day:</label>
<select name="start_day" id="start_day">
<option value="1">MON</option>
<option value="2">TUES</option>
<option value="3">WED</option>
<option value="4">THRUS</option>
<option value="5">FRI</option>
<option value="6">SAT</option>
<option value="0">SUN</option>
</select>
</label>
<input name="stop_time" id="stop_time" type="time" min="00:00" max="24:00" required/>
<label for="stop_day">Day:</label>
<select name="stop_day" id="stop_day">
<option value="1">MON</option>
<option value="2">TUES</option>
<option value="3">WED</option>
<option value="4">THRUS</option>
<option value="5">FRI</option>
<option value="6">SAT</option>
<option value="0">SUN</option>
</select>
</label>
<output name="port1_timeday" for="start_time start_day stop_time stop_day"></output></td>
<input type="button" onclick="Port1_sch_On_off()" value="Port1_timeday">
</form>
</tr>
</table>
And also I have to add eventlistener for the same with which i haven't started yet.

Here are two main ways to concatenate in javascript :
using the + operator :
message = new Paho.MQTT.Message("NORMAL 122 " + document.getElementById('port1_timeday'.value));
or
using string interpolation :
message = new Paho.MQTT.Message(`NORMAL 122 + ${document.getElementById('port1_timeday'.value)}`);
I hope this answers your question :D
edit 1 :
This function will return your user input cancatenated as such "STARTDAYSTARTTIMESTOPTIMESTOPDAY", you can modify it to return the values in any order :
function cancat_day_time() {
start_time = document.getElementById("start_time").value;
start_day = document.getElementById("start_day").value;
stop_time = document.getElementById("stop_time").value;
stop_day = document.getElementById("stop_day").value;
return `${start_day}${start_time}${stop_day}${stop_time}`;
}
You can then use it in your function Port1_sch_On_off() like this :
function Port1_sch_On_off() {
if (connected_flag == 1) {
client.subscribe("lazy/test");
message = new Paho.MQTT.Message("NORMAL 122 " + cancat_day_time());
message.destinationName = "lazy/test";
client.send(message);
} else {
console.log("not connected")
}
return false;
}
edit 2 :
This is the HTML code that works for me :
<tr height=40>
<td></td>
<td width=40></td>
<td>
<form id="port1_timeday" oninput="">
<input name="start_time" id="start_time" type="time" min="00:00" max="24:00" required/>
<span class="hours"></span>
<label for="start_day">Day:</label>
<select name="start_day" id="start_day">
<option value="1">MON</option>
<option value="2">TUES</option>
<option value="3">WED</option>
<option value="4">THRUS</option>
<option value="5">FRI</option>
<option value="6">SAT</option>
<option value="0">SUN</option>
</select>
</label>
<input name="stop_time" id="stop_time" type="time" min="00:00" max="24:00" required/>
<label for="stop_day">Day:</label>
<select name="stop_day" id="stop_day">
<option value="1">MON</option>
<option value="2">TUES</option>
<option value="3">WED</option>
<option value="4">THRUS</option>
<option value="5">FRI</option>
<option value="6">SAT</option>
<option value="0">SUN</option>
</select>
</label>
</td>
<input type="button" onclick="Port1_sch_On_off()" value="Port1_timeday">
</form>
</tr>

dropdown menu that requires selection

I am trying to figure this one out, but I need some help. a drop down menu with add to cart button that doesn't submit without selecting any options, what I would love to have is a pop up that prompts to select one from each drop down options (required). this is what i'm trying to do http://ccaples.com/index.php/basic-scripts/examples-i/dropdown-menus-that-require-selection , the question is how to implement this to my code thank you very much.
<SCRIPT TYPE="text/javascript">
function MM_goToURL() { //v3.0
var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
for (i=0; i<(args.length-1); i+=2) eval(args[i]+".location='"+args[i+1]+"'");
}
function Dollar (val) { // force to valid dollar amount
var str,pos,rnd=0;
if (val < .995) rnd = 1; // for old Netscape browsers
str = escape (val*1.0 + 0.005001 + rnd); // float, round, escape
pos = str.indexOf (".");
if (pos > 0) str = str.substring (rnd, pos + 3);
return str;
}
function ReadForm (obj1) { // process un-named selects
var i,j,amt,des,obj,pos,tok,val;
var ary = new Array ();
amt = obj1.baseamt.value*1.0; // base amount
des = obj1.basedes.value; // base description
for (i=0; i<obj1.length; i++) { // run entire form
obj = obj1.elements[i]; // a form element
if (obj.type == "select-one" && // just get selects
obj.name == "") { // must be un-named
pos = obj.selectedIndex; // which option selected
val = obj.options[pos].value; // selected value
ary = val.split (" "); // break apart
for (j=0; j<ary.length; j++) { // look at all items
// first we do single character tokens...
if (ary[j].length < 2) continue;
tok = ary[j].substring (0,1); // first character
val = ary[j].substring (1); // get data
if (tok == "#") amt = val * 1.0;
if (tok == "+") amt = amt + val*1.0;
if (tok == "%") amt = amt + (amt * val/100.0);
if (tok == "#") { // record item number
if (obj1.item_number) obj1.item_number.value = val;
ary[j] = ""; // zap this array element
}
// Now we do 3-character tokens...
if (ary[j].length < 4) continue;
tok = ary[j].substring (0,3); // first 3 chars
val = ary[j].substring (3); // get data
if (tok == "s1=") { // value for shipping
if (obj1.shipping) obj1.shipping.value = val;
ary[j] = ""; // clear it out
}
if (tok == "s2=") { // value for shipping2
if (obj1.shipping2) obj1.shipping2.value = val;
ary[j] = ""; // clear it out
}
}
val = ary.join (" "); // rebuild val with what's left
if (des.length == 0) des = val; // 1st storage?
else des = des + ", " + val; // nope, accumulate value
}
}
obj1.item_name.value = des;
obj1.amount.value = Dollar (amt);
if (obj1.tot) obj1.tot.value = "$" + Dollar (amt);
}
</SCRIPT>
<FORM id=viewcart name=viewcart action=https://www.paypal.com/cgi-bin/webscr
method=post>
</FORM>
<FORM onSubmit="this.target = 'paypal';
ReadForm (this.form);"
action=https://www.paypal.com/cgi-bin/webscr method=post>
<P>
<INPUT type=hidden value=_cart name=cmd>
<INPUT type=hidden value=1 name=add>
<INPUT type=hidden value=my#email.com name=business>
<INPUT type=hidden name=item_name>
<INPUT type=hidden name=item_number>
<INPUT type=hidden name=amount>
<INPUT type=hidden value=USD name=currency_code>
<INPUT type=hidden value=USD name=lc>
<INPUT type=hidden value=00 name=shipping>
<INPUT type=hidden value=00.00 name=baseamt>
<INPUT type=hidden VALUE="itemname" name=basedes>
<INPUT TYPE="hidden" NAME="on0" VALUE="Details">
<INPUT TYPE="hidden" NAME="os0" VALUE="moredetails" MAXLENGTH="800">
<BR>
<BR>
</P>
<TABLE WIDTH="400px" BORDER="0" CELLPADDING="0" CELLSPACING="0" align="right">
<TR>
<TD ALIGN="left">
<p class="heading"> </p>
<p class="main"> dropdown1</p>
<p class="heading"> </p>
</TD>
<TD>
<SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION selected>Please select </OPTION>
<OPTION VALUE="option1 +125.00">option1</OPTION>
<OPTION VALUE="option2 +90.00">option2</OPTION>
<OPTION VALUE="option3 +40.00">option3</OPTION>
</SELECT>
</TD>
</TR>
<TR>
<TD ALIGN="left">
<p class="heading"> </p>
<p class="main"> dropdown2</p>
<p class="heading"> </p>
</TD>
<TD>
<SELECT STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION selected>Please select </OPTION>
<OPTION VALUE="option1 +55.00">option1</OPTION>
<OPTION VALUE="option2 +99.00">option2</OPTION>
<OPTION VALUE="option3 +44.00">option3</OPTION>
</SELECT>
</TD>
</TR>
<tr>
<TR>
<TD ALIGN="left">
<p class="main"> </p>
<p class="main"> Price</p>
<p class="main"> </p>
</TD>
<TD ALIGN="left">
<INPUT class=nbor size=8 value=00.00 name=tot>
</TD>
</TR>
<TD align="left">
<label for="submit"></label>
<TD align="left">
<input type="image" src="/addtocart2.png" name="submit" id="submit" value="submit" >
</div>
</div></td>
</tr>
</table>
</table>
</form>
</TABLE>
</FORM>
</div>

You just have to add a form validation function and give the elements some IDs so your validation function knows what to validate.
First, add this function under your <script> tag.
function validate_first() {
var msg1 = "Please select from first dropdown\n";
var msg2 = "Please select from second dropdown";
var first = document.getElementById('select1').value;
var second = document.getElementById('select2').value;
if(first=="" || second=="") {
alert(((first == "") ? msg1 : "") + ((second == "") ? msg2 : ""));
return false;
}
return true;
}
Then change onsubmit value from the form definition as follows:
<FORM onSubmit="this.target = 'paypal';
return validate_first();" action=https://www.paypal.com/cgi-bin/webscr method=post>
Finally, give the dropdowns some IDs, and add real values to the "Please Select" options.
For first dropdown:
<SELECT id="select1" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION value="" selected>Please select </OPTION>
<OPTION VALUE="option1 +125.00">option1</OPTION>
<OPTION VALUE="option2 +90.00">option2</OPTION>
<OPTION VALUE="option3 +40.00">option3</OPTION>
</SELECT>
Second one:
<SELECT id="select2" STYLE="WIDTH: 240px" onChange="ReadForm (this.form);">
<OPTION value="" selected>Please select </OPTION>
<OPTION VALUE="option1 +55.00">option1</OPTION>
<OPTION VALUE="option2 +99.00">option2</OPTION>
<OPTION VALUE="option3 +44.00">option3</OPTION>
</SELECT>
That's it.

Here is an example with a few different ideas that may be helpful:
jsFiddle Demo
HTML:
<div id="msg">Please select from each of the following:</div>
Model:
<select id="car">
<option value="">Select One</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
Color:
<select id="color">
<option value="">Select One</option>
<option value="white">White</option>
<option value="black">Black</option>
</select>
Transmission:
<select id="tran">
<option value="">Select One</option>
<option value="manual">Manual</option>
<option value="auto">Automatic</option>
</select>
<br />
<input type="button" id="mybutt" value="Submit" />
jQuery/javascript:
var chkFld, arrAll = {'Vehicle Model':'car','Vehicle Color':'color','Transmission':'tran'};
$('select').change(function(){
$('#msg').slideUp();
});
$('#mybutt').click(function() {
var errMsg='', badFlds='', firstBad='';
for(var key in arrAll){
chkFld = '#'+arrAll[key];
$(chkFld).removeClass('error');
if ($(chkFld).val() ==''){
$(chkFld).addClass('error');
//alert('Please complete field ' + arrAll[key] );
errMsg += '* ' + key + '\n';
if (firstBad=='') firstBad=chkFld;
}
}
if (errMsg != '') {
$('#msg').slideDown();
alert('Please complete: '+"\n"+errMsg);
$(firstBad).focus();
}
}); //END mybutt.click
CSS:
#msg{background:wheat;padding:10px;text-align:center;color:darkcyan;margin-bottom:10px;}
.error{border:1px solid red;background:yellow;}
#mybutt{margin-top:10px;}

Check values before submit with document.form.action

On my web application I have a form with two <select>.
One represents the month and another the year.
<form id="reportform" target="_blank">
<table cellpadding="3" cellspacing="14">
<thead>
<th class="report" colspan="2"><spring:message code="label.month"/></th>
<th class="report" colspan="2"><spring:message code="label.year" /></th>
<th colspan="2"></th>
</thead>
<tbody>
<tr>
<td>
<input name="centerId" value="${center.centerId}" type="hidden">
</td>
<td class="date">
<select class="select-input-month-report" id="select-input-month" name="month">
<option selected="selected" value="0"><spring:message code="label.select" /></option>
<option value="1"><spring:message code="label.january" /></option>
<option value="2"><spring:message code="label.february" /></option>
<option value="3"><spring:message code="label.march" /></option>
<option value="4"><spring:message code="label.april" /></option>
<option value="5"><spring:message code="label.may" /></option>
<option value="6"><spring:message code="label.june" /></option>
<option value="7"><spring:message code="label.july" /></option>
<option value="8"><spring:message code="label.august" /></option>
<option value="9"><spring:message code="label.september" /></option>
<option value="10"><spring:message code="label.october" /></option>
<option value="11"><spring:message code="label.november" /></option>
<option value="12"><spring:message code="label.december" /></option>
</select>
</td>
<td></td>
<td class="date">
<select class="select-input-year-report" id="select-input-year" name="year">
<option value="0" selected="selected"><spring:message code="label.select" /></option>
<option value="2013">2013</option>
<option value="2014">2014</option>
</select>
</td>
<td align="right">
<input id="go" class="go" type="submit" value="Report">
</td>
</tr>
</tbody>
</table>
</form>
On server side PDF is generated (using iTextPdf) according to month and year selected on UI.
When month and year are correct PDF is generated properly but when user doesn't selects a correct month and year (one of them is zero) then I get an error in my back end.
I would like to check that month or year are different than 0 with javascript code and minimize changes in my #Controller. But I am not able to check values of month and year and call the back-end service using document.reportform.action.
#Controller
public class ReportController {
#RequestMapping(value="/report.pdf", method=RequestMethod.POST)
public ModelAndView getPdfReport(#ModelAttribute ReportRequest request) throws DAOException {
...
return mav;
}
}
I call to service like this:
$(function(){
$('form').submit(function(){
var zeros = checkDate();
if(zeros == '0'){
document.reportform.action = "/report.pdf";
}
});
});
function checkDate(){
var zeros = 0;
if(document.getElementById("select-input-month").value == 0){
zeros++;
}
if(document.getElementById("select-input-year").value == 0){
zeros++;
}
return zeros;
}
Help will be appreciated.
Update:
I get Javascript error: document.reportform.action = "/report.pdf" not defined.

<form id="reportform" target="_blank" method="post">
$(function(){
$('form').submit(function(e){
var zeros = checkDate();
if(zeros == '0'){
$(this).attr("action","/report.pdf");
}
else{
e.preventDefault();
alert('Select month and year');
}
});
});
Fiddle: http://jsfiddle.net/URfkN/1/
#Controller
public class ReportController {
#RequestMapping(value="/report.pdf", method=RequestMethod.POST)
public ModelAndView getPdfReport(#ModelAttribute ReportRequest request, HttpServletRequest httpRequest) throws DAOException {
String month = httpRequest.getParameter("month");
String year= httpRequest.getParameter("year");
....
return mav;
}
}

Using JQuery it is pretty simple:
$(function(){
$('form').submit(function(e){
e.preventDefault();
if($("#select-input-month").val()=='0' || $("#select-input-year").val()=='0')
{
document.reportform.action = "/report.pdf";
}
});
});

div inside form not being 'seen'

I have a div inside my form which is filled with a field based on the value of the select box above it. This field always comes back as 'null' when submitted, I put a div around other parts of the form to test if it was in fact the div itself and each field with a div around it kept coming back as 'null'.
<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>
<!--This div below is called every time I want to add a new 'instance' of this form
this div works fine, its when i add a div inside that one I get 'null'-->
<div id="readnode" style="display: none">
<select name="rank">
<option disabled="disabled" selected="selected">Rating</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
<select name="time">
<option disabled="disabled" selected="selected">Time</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
<input type="button" value="X"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
So the code above works fine its when i add a div inside i get 'null' like below;
<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>
<!--This div below is called every time I want to add a new 'instance' of this form
this div works fine, its when i add a div inside that one I get 'null'-->
<div id="readnode" style="display: none">
<select name="rank">
<option disabled="disabled" selected="selected">Rating</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
<div id='testdiv'>
<select name="time">
<option disabled="disabled" selected="selected">Time</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
<option value="0">0</option>
</select>
</div>
<input type="button" value="X"
onclick="this.parentNode.parentNode.removeChild(this.parentNode);" />
</div>
Whats my best way around this? and how would I go about doing it?
EDIT: The Div 'readnode' is called and placed inside the form when needed, replacing the div 'writenode' which is seen inside the form above. This div works perfectly fine. When i add another div (testdiv) inside the 'readnode' any fields placed inside the new div (testdiv) always come back as null when using $_get.
EDIT2:
Function that puts the readnode in place of the writenode,
<script type="text/javascript">
/* Set the counter that will increase every time
the user adds a new language*/
var counter = 0;
function addlanguage()
{
// Ask the user for input
var language = prompt("Language Name","");
if (language == "" || language == null)
{
alert("Please enter a language.");
}
else
{
counter++;
// Find the element to be copied
var newNode = document.getElementById('readnode').cloneNode(true);
newNode.id = '';
newNode.style.display = 'block';
var newField = newNode.childNodes;
// Give all fields a unique value
for (var i=0;i<newField.length;i++)
{
var theName = newField[i].name;
var theId = newField[i].id;
if (theName)
{
newField[i].name = theName + counter;
}
if (theId == "languagename")
{
// Change the field to the user input
newField[i].innerHTML = language;
}
if (theName == "lang")
{
// Replace the hidden field with the correct language
newField[i].value = language;
}
}
// Insert the elements
var insertHere = document.getElementById('writenode');
insertHere.parentNode.insertBefore(newNode,insertHere);
}
}
</script>
and this is the php;
<?php
if ($_GET["time1"] == null)
{ ?>
<form>
<span id="writenode"></span>
<input type="button" value="Add language" onClick="addlanguage()" >
<input type="submit" value="Submit" >
</form>
<?php
}
else
{
$final = 0;
$i = 1;
while($final == 0)
{
$gettime = "time" . $i;
$getRank = "rank" . $i;
$time = $_GET[$gettime];
$rank = $_GET[$getRank];
if ($language == "")
{
$final = 1;
}
if ($final == 0)
{
// Show the user the input
echo("<p>Your <strong>$time</strong> is <strong>$rank</strong>.</p>");
}
$i++;
}
} ?>

When you put it inside a div, it's no longer part of newNode.childNodes, so you never get to set the name properly. You'll have to check childs of childs or use jQuery to simplify things.
for (var i=0;i<newField.length;i++)
{
var subField = newField.childNodes;
for (var i=0;i<subField.length;i++) {
var theName = subField[i].name;
var theId = subField[i].id;
// ...
}
}

The display of my dropdown menus are quite not working

I have javascript function where if values "abc", "abcd" or "abcde" has been chosen from the dropdown menu "optionDrop", then display the other dropdown menu "numberDrop", else output "N/A". The problem is that the "numberDrop" down menu is not appearing at all. What have I done wrong?
Below is javascript function:
function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var noOfAnswers = document.getElementById("noOfAnswers");
var numberDrop = document.getElementsByName("numberDrop");
if (optionDrop.value = "abc" || optionDrop.value = "abcd" || optionDrop.value = "abcde"){
numberDrop.style.display = "block";
}else{
noOfAnswers.innerHTML = "N/A";
}
}
Below is html dropdown menus is form:
<form id="enter" action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post" onsubmit="return validateForm(this);" >
<table id="middleDetails" border="1">
<tr>
<td>Option Type:</td>
<td>
<select name="optionDrop" onClick="getDropDown()">
<option value="">Please Select</option>
<option value="abc">ABC</option>
<option value="abcd">ABCD</option>
<option value="abcde">ABCDE</option>
<option value="trueorfalse">True or False</option>
<option value="yesorno">Yes or No</option>
</select>
</td>
<tr>
<td colspan="2"></td>
<td>Number of Answers:</td>
<td id="noOfAnswers">
<select name="numberDrop" id="numberDropId">
<option value=""></option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td>
</tr>
</table>
</form>
CSS code:
/*css for QandATable.php*/
#numberDropId{
display:none;
}

Try:
if (optionDrop.value === "abc")
=== is exact match of same type. So it would have to match abc. = is for assignment.

Change your javascript function as bellow.
function getDropDown() {
var optionDrop = document.getElementsByName("optionDrop");
var noOfAnswers = document.getElementsByName("noOfAnswers");
var numberDrop = document.getElementsByName("numberDrop");
if (optionDrop[0].value == "abc" || optionDrop[0].value == "abcd" || optionDrop[0].value == "abcde"){
numberDrop[0].style.display = "block";
}else{
noOfAnswers.innerHTML = "N/A";
}
}
Good luck.
Prasad