We Keep Coding

How to avoid HTML javascript string spacing come with (+) sign?

I have create a html form with javascript that must run at IE to trigger outlook by using mailto action, but for the string I pass to outlook, all the spacing auto replace by (+) sign. Below is my code:
<script>
var i= 'Product name:';
var idproduct=i.split('+').join(' ')
function beforeSubmit() {
var Product = document.getElementById("Product_Name");
var Email = document.getElementById("Email_Address");
var body = document.getElementById("body");
body.value = idproduct+ Product.value +"\n";
}
</script>
<input name="Subject" size="78" id="Subject" type="hidden" value=" Car Notification" /><br/>
But the output I get is :
Subject the email:
Car+Notification
Body of the email:
Product+name:Honda
My expected output is without all the plus sign for the spacing.Anyone have ideas in this issue?

We could write the mailto link like this to avoid the "+" symbol: mailto:somebody?subject=etc&body=etc. We send the subject and body as query parameters. You could check the example below, it works in IE:
function beforeSubmit() {
var Product = document.getElementById("Product_Name").value;
var Email = document.getElementById("Email_Address").value;
var eTo = encodeURI(Email);
var eSubj = encodeURI("Car Notification");
var eBody = encodeURI(Product + "\n" + "anotherline");
var email = "mailto:" + eTo + "?subject=" + eSubj + "&body=" + eBody;
document.getElementById("myform").href = email;
}
<form>
<input id="Email_Address" type="text" value="somebody#example.com" />
<input id="Product_Name" type="text" value="enter your message here" />
<input type="button" value="submit" />
</form>

JavaScript Form Values - Replace Value with Variable & Calculate Sum of Variables

I've been searching for a solution on this but haven't been able to find anything I can understand.
I'm working on the piece of code below - I have simplified the output for ease of reading.
function CreateMsg() {
var MsgDOM = document.getElementById("MSG");
MsgDOM.innerHTML = '<p>calculation.value</p><li>How you view God or a Higher Power: ' + document.forms[0].godview.value + '<\/li><li>How you view your life in general: ' + document.forms[0].lifeview.value + '<\/li><li>How you approach life: ' + document.forms[0].level.value + '<\/li><li>What your inner voice and internal thoughts are busy with: ' + document.forms[0].emotion.value + '<\/li><li>How you are most likely to tackle challenges: ' + document.forms[0].process.value + '<\/li><li>The lessons (mirrors) you are currently working with: ' + document.forms[0].lessons.value + '<\/li>';
}
I have everything working fine so far, but I need to do a calculation that reads the 6 values that the output display is picking up.
The value has to be read, and then replaced from an array - the same array applies to all six variables.
So the output value for each of the elements in the output is one of a number of fixed text values, usually a number. So if the value is 1, for example, I want it to replace that value with a 2. If it's 2, then replace it with 4, etc. There's a string of about 20 values, but they are common to all six numbers I need to calculate.
Then I want it to take those six values and add them together, and print them to the output display where it says calculation.value.

That should be reasonably easy to do, something like this should be what you're looking for!
function CreateMsg() {
var MsgDOM = document.getElementById("MSG");
let fieldsToRead = ["godview", "lifeview", "level", "emotion", "process", "lessons"];
let inputArray = fieldsToRead.map((fieldName) => {
return Number(document.forms[0][fieldName].value);
});
console.log(inputArray);
// This determines how we map input fields to output fields.
// We can add more elements as needed.
let inputOutputMap = {
0:0,1:2,2:4,3:6,4:8,5:10,6:12
};
// You can perform your calculations here!!
let result = inputArray.reduce((total, input) => {
total += (inputOutputMap[input] || 0);
return total;
}, 0);
MsgDOM.innerHTML = '<p>Calculation.value</p><li>How you view God or a Higher Power: ' + document.forms[0].godview.value + '<\/li><li>How you view your life in general: ' + document.forms[0].lifeview.value + '<\/li><li>How you approach life: ' + document.forms[0].level.value + '<\/li><li>What your inner voice and internal thoughts are busy with: ' + document.forms[0].emotion.value + '<\/li><li>How you are most likely to tackle challenges: ' + document.forms[0].process.value + '<\/li><li>The lessons (mirrors) you are currently working with: ' + document.forms[0].lessons.value + '<\/li><br><h3>Calculation total: ' + result + '</h3>';
}
CreateMsg();
<html>
<body>
<form>
Godview:<br>
<input type="text" name="godview" value="1"><br>
Lifeview:<br>
<input type="text" name="lifeview" value="2"><br>
Level:<br>
<input type="text" name="level" value="3"><br>
Emotion:<br>
<input type="text" name="emotion" value="4"><br>
Process:<br>
<input type="text" name="process" value="5"><br>
Lessons:<br>
<input type="text" name="lessons" value="6"><br>
</form>
<div>
<br>
<br>
<div id="MSG">
</div>
</body>
</html>

hi
I go through code acording the requirement bellow is the solved code
can sum the values from the array
<!DOCTYPE HTML>
<html>
<head>
</head>
<body onload="">
<form>
<input type="text" id="godview" value="" />
<input type="text" id="lifeview" value="" />
<input type="text" id="level" value="" />
<input type="text" id="emotion" value="" />
<input type="text" id="process" value="" />
<input type="text" id="lessons" value="" />
</form>
<div>
<input type="button" id="btnsend" value="save" onclick="return CreateMsg();" />
</div>
<div id="MSG">
</div>
<script>
function CreateMsg() {
var arr = [];
var godv = document.forms[0].godview.value;
var lifv = document.forms[0].lifeview.value;
var levelv = document.forms[0].level.value;
var emotionv = document.forms[0].emotion.value;
var processv = document.forms[0].process.value;
var lessonsv = document.forms[0].lessons.value;
arr.push(godv);
arr.push(lifv);
arr.push(levelv);
arr.push(emotionv);
arr.push(processv);
arr.push(lessonsv);
alert(arr);
var MsgDOM = document.getElementById("MSG");
MsgDOM.innerHTML = '<p>calculation.value</p><li>How you view God or a Higher Power: ' + document.forms[0].godview.value + '<\/li><li>How you view your life in general: ' + document.forms[0].lifeview.value + '<\/li><li>How you approach life: ' + document.forms[0].level.value + '<\/li><li>What your inner voice and internal thoughts are busy with: ' + document.forms[0].emotion.value + '<\/li><li>How you are most likely to tackle challenges: ' + document.forms[0].process.value + '<\/li><li>The lessons (mirrors) you are currently working with: ' + document.forms[0].lessons.value + '<\/li>';
}
</script>
</body>
</html>

How do I target specific inputs on a form fields to change output to Title Case?

On my form I am trying to have specific output fields and their strings output as Title Case. May be worth noting, this form outputs to results on the same page. Here's a Fiddle demo of my form.
As you can see from it I have 3 input categories Name, City and Words, for this example I am trying to implement the Title Case script to just the 'Name" and City" output strings without it effecting the "Words" category. As I don't want to convert an ongoing sentence to Title Case.
I found a lot of discussion here on how to convert to title case. However I am having difficulty implementing this in to my form as I am still new to JavaScript. All the examples show the script, but not how to implement it in a form.
I was playing around with Greg Dean's top answer to try and target the specific inputs like so...
toTitleCase = function(str)
{
var name = document.getElementById('name');
var city = document.getElementById('city');
return str.replace(/\w\S*/g, function(txt){return
txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
}
However this does not seem to be working.
Here's the HTMl:
<form>
<input type="text" class="text" id="name" placeholder="Name">
<br>
<input type="text" class="text" id="city" placeholder="City">
<br>
<textarea type="textarea" id="words" placeholder="Words" cols="70" rows="6">
</textarea>
<br>
<input type="button" value="Combine" onclick="convert()">
<br>
<div class="wrap"><span id="CharCountLabel1" class="counter"></span>
<textarea type="textarea" name="output" id="output" cols="70" rows="10"
maxlength='' placeholder="Output"></textarea>
</div>
<br>
<button type="reset" onclick="ResetForm();" value="Reset
form">Reset form</button>
</form>
And the rest of the script:
function convert() {
var name = document.getElementById("name").value;
var city = document.getElementById("city").value;
var words = document.getElementById("words").value;
//input = wordwrap(input, 70, true);
var output = "";
if(!document.getElementById("name").disabled){
output += "Name: " + name + "\n";
}
if(!document.getElementById("city").disabled){
output += "City: " + city + "\n";
}
if(!document.getElementById("words").disabled){
output += "The words are... " + words + "\n";
}
document.getElementById("output").value = output;
}
CharacterCount = function(output,FieldToCount){
var myField = document.getElementById(output);
var myLabel = document.getElementById(FieldToCount);
var Chars = myField.length;
if(!Chars){Chars = "" ; };
var remainingChars = Chars + myField.value.length
myLabel.innerHTML = remainingChars+""+Chars
}
setInterval(function(){CharacterCount('output','CharCountLabel1')},55);
How do I target the script to just the specified input fields? Please no jQuery, just JavaScript solutions.

While you have a fully-function toTitleCase() function, you're never actually calling it. All you need to do is run your name and city variables through your toTitleCase function when you go to output them to the page:
if (!document.getElementById("name").disabled) {
output += "Name: " + toTitleCase(name) + "\n";
}
if (!document.getElementById("city").disabled) {
output += "City: " + toTitleCase(city) + "\n";
}
To prevent the words from also being transformed, simply don't pass that variable to the function:
if (!document.getElementById("words").disabled) {
output += "The words are... " + words + "\n";
}
A working demo of this can be seen here.
Hope this helps! :)

Converting HTML form input into Javascript variables and comparing values

I am trying to compare the birth dates of two people. Person 1 and Person 2 input their names and dates of birth in an HTML form, and I want to use Javascript to compare the two dates and print out which person is older on the HTML page. However, I'm not sure how to submit the form and compare the dates. Here is what I have so far for the HTML:
<form id="form1">
Full name of first person: <input type="text" name="name1"><br>
Birthday: <input type="date" date="date1"><br>
<br>
Full name of second person: <input type="text" name="name2"><br>
Birthday: <input type="date" date="date2"><br>
</form>
And the Javascript:
var name1 = document.getElementsByName("name1");
var name2 = document.getElementsByName("name2");
var date1 = document.getElementsByName("date1");
var date2 = document.getElementsByName("date2");
How do I submit the variables in HTML and then have Javascript compare the two dates?

You forgot two things:
A submit button.
A submit handler.
I guess this solves your question.
window.onload = function () {
document.getElementById("form1").onsubmit = function () {
var name1 = document.getElementById("name1");
var name2 = document.getElementById("name2");
var date1 = document.getElementById("date1");
var date2 = document.getElementById("date2");
if ((new Date(date1.value)).getTime() < (new Date(date2.value)).getTime()){
console.log(name1.value + " is greater than " + name2.value)}
else if ((new Date(date1.value)).getTime() > (new Date(date2.value)).getTime()){
console.log(name2.value + " is greater than " + name1.value)}
else{
console.log(name2.value + " and " + name1.value + " are of same age.")};
};
};
<form id="form1">
Full name of first person: <input type="text" id="name1"><br>
Birthday: <input type="date" id="date1"><br>
<br>
Full name of second person: <input type="text" id="name2"><br>
Birthday: <input type="date" id="date2"><br>
<input type="submit" value="Check" />
</form>

You need to add an action to the form and a submit button. Then you can add an onsubmit call from your button to invoke a simple string comparison function to see which number is greater

Basic form data access demo
var compare = function () {
var form = document.getElementById("form1");
var output = document.getElementById("demo");
output.innerHTML = "";
for(var i = 0; i< form.length; i++){
output.innerHTML = output.innerHTML +" "+ form.elements[i].value;
};
};
<form id="form1">
Full name of first person: <input type="text" id="name1"><br>
Birthday: <input type="date" id="date1"><br>
<br>
Full name of second person: <input type="text" id="name2"><br>
Birthday: <input type="date" id="date2"><br>
</form>
<input type="button" name="submit" value="Compare " onclick="compare()" />
<p id="demo"></p>

Well, let's go step by step on this
1. How to submit a form
In HTML you have 2 ways of submitting a form:
Through an <input> tag with the type="submit" attribute (resulting in <input type="submit" />
Trough a <button> tag with the type="submit" attribute (resulting in <button type="submit">...content...</button>
Now when these buttons get clicked, they will trigger the <form>'s submit event.
2. How to subscribe to a form's submit event
As when submitting a form, there're (without any external libraries) 2 ways of subscribing to a form's submit event:
Directly setting a property on the form: formvar.onsubmit = function() { /* ... do stuff ... */ } (not really recommended as other plugins/scripts might overwrite this)
Adding an event listener: formvar.addEventListener("submit", function() { /* ... do stuff ... */ } (better than directly setting a property as this won't be removed when another script subscribes to the same event)
3. Comparing dates
Well, first you'd have to transform the dates from the string value you got from the textbox to a proper Date type:
date1 = Date.parse(date1.value);
date2 = Date.parse(date2.value);
And then with a simple arithmetic operator you can find out which one of them is the oldest:
var difference = date2 - date1;
if(difference > 0)
{
// Second person is the oldest
}
else if (difference < 0)
{
// First person is the oldest
}
else
{
// They are the same age
}

You don't need to submit the form to check the difference. A simple onclick function or click event listener will do.
You need to check if they are older, younger, or the same age. Try it below. You code wasn't working because you didn't have a name property for your dates. I switched them to use ids.
document.getElementById("theButton").addEventListener('click', checkOldest);
function checkOldest() {
var name1Value = document.getElementById("name1").value,
name2Value = document.getElementById("name2").value,
date1Value = document.getElementById("date1").value,
date2Value = document.getElementById("date2").value,
result = document.getElementById("result");
// make sure you have input for both birthdates and names
if (name1Value && name2Value && date1Value && date2Value) {
var dateOneComparedToTwo = new Date(date1Value) - new Date(date2Value);
if (dateOneComparedToTwo < 0) {
result.innerText = name1Value + ' is older than ' + name2Value + '!';
} else if (dateOneComparedToTwo > 0) {
result.innerText = name1Value + ' is younger than ' + name2Value + '!';
} else {
result.innerText = name1Value + ' and ' + name2Value + ' are the same age!';
}
} else {
result.innerText = "You need to fill out the form completely!";
}
}
<form id="form1">
Full name of first person: <input type="text" id="name1" name="name1"><br>
Birthday: <input type="date" id="date1" name="date1"><br>
<br>
Full name of second person: <input type="text" id="name2" name="name2"><br>
Birthday: <input type="date" id="date2" name="date2"><br>
<button id="theButton">Who's oldest?</button>
</form>
<p id="result">
Fill out the form please!
</p>

Data replaced by [object NodeList] when I try to print out into textarea field

I'm trying to make a form with some input fields and then take those input fields and place them into a textarea field.
Here is my JS script:
function sayDetails() {
var name = document.getElementsByName("userName"),
address = document.getElementsByName("userAddress"),
city = document.getElementsByName("userCity"),
email = document.getElementsByName("userEmail"),
final_txt = "Name: " + name + "Address: " + address + "City: " + city + "Email: " + email;
document.getElementById("outputArea").innerHTML = final_txt;
return false;
}
And here is my html:
<div class="form">
<form name="userDetails">
Name: <input type="text" name="userName" id="uName" required><br>
Address: <input type="text" name="userAddress" id="uAddress"><br>
City: <input type="text" name="userCity" id="uCity"><br>
Email: <input type="text" name="userEmail" id="uEmail" required><br>
</form>
<br>
<input type="submit" form="userDetails" value="Submit form" onclick="sayDetails();">
<input type="button" form="userDetails" id="resetBtn" value="Reset" />
<br>
<textarea style="width:600px;height:100px;" id="outputArea" disabled></textarea>
</div>
After running it however, in the textarea field it shows this:
Name: [object NodeList]<br/>Address: [object NodeList]<br/>City: [object NodeList]<br/>Email: [object NodeList]
And what I would want it to display is:
Name: name here
Address: address here
City: city here
Email: email here
Where did I go wrong, and how can I make my code more efficient? Also, a little help to show me how to make the form input field lined up would be much appreciated!
EDIT: After a few correction here and there, and thanks to you guys I was able to do it correctly.
Here is the new and revised JS script that correctly displays the details the way I want it.
function sayDetails() {
var name = document.getElementById("uName").value;
var address = document.getElementById("uAddress").value;
var city = document.getElementById("uCity").value;
var email = document.getElementById("uEmail").value;
var final_txt = "Name: " + name + "\n" + "Adress:" + address + "\n" + "City: " + city + "\n" + "email:" + email;
document.getElementById("outputArea").innerHTML = final_txt;
}

document.getElementsByName returns NodeList (collections of nodes)
For getting first item you should use like this:
var name = document.getElementsByName("userName")[0],
address = document.getElementsByName("userAddress")[0],
city = document.getElementsByName("userCity")[0],
email = document.getElementsByName("userEmail")[0]
And then for each Node you can get the value, for example:
name.value

Well if you print node list objects as a string then its primitive value will be printed. No wonder in that. Try to write your code like below,
final_txt = "Name: " + name[0].value + "Address: " + address[0].value + "City: " + city[0].value + "Email: " + email[0].value;
And I saw there are ids assigned with input elements, better use that instead of name for selecting the elements like,
var name = document.getElementById("uName").value;

Use document.getElementById remember is unique
function sayDetails() {
var name = document.getElementById("uName").value,
address = document.getElementById("uAddress").value,
city = document.getElementById("uCity").value,
email = document.getElementById("uEmail").value,
final_txt = "Name: " + name + "Address: " + address + "City: " + city + "Email: " + email;
document.getElementById("outputArea").innerHTML = final_txt;
return false;
}