I have a script to count the words in an attachment which works fine.
function loadDemo() {
WordCount.words("file_attach", function(words) {
document.getElementById("words").innerText = words;
});
var elt = document.getElementById("words");
var words = elt.options[elt.selectedIndex].value;
words = parseInt(words);
var tprice = (words /500) * 12;
document.getElementById("tprice").innerText=tprice;
}
I then wanted to calulate a price which is printed in span box below.
The word count is printed to its span, but price is not. Where have i gone wrong in my calculation?
<div id="result"></div>
<label for="name"><span>Name</span>
<input type="text" name="name" id="name" placeholder="Enter Your Name" />
</label>
<label for="email"><span>Email Address</span>
<input type="email" name="email" id="email" placeholder="Enter Your Email" />
</label>
<label for="file"><span>Attachment</span>
<input type="file" name="file_attach" id="file_attach" onChange="loadDemo()" />
</label>
<label for="words"><span>No. of Words</span>
<span id="words"></span>
</label>
<label for="tprice"><span>Price</span>
<span id="tprice"></span>
</label>
<label for="message"><span>Message</span>
<textarea name="message" id="message" placeholder="Enter Your Name"></textarea>
</label>
<label><span> </span>
<button class="submit_btn" id="submit_btn">Submit</button>
</label>
Above is HTML of form.
Thanks
Your JavaScript for looking up the words is:
var elt = document.getElementById("words");
var words = elt.options[elt.selectedIndex].value;
but the second line is what you'd use for retrieving values from a select dropdown. The element <span id="words"></span> however is not a select element. You need to use:
var elt = document.getElementById("words");
var words = elt.textContent;
Demo
As a side note, it's a bit unusual to use <label> tags for things that aren't form controls. Specifically there's no point in using the label's for attribute to point to a non-input element because they can't receive focus.
Related
I defined a function to validate the input fields based on a pattern string I specified. For the name fields, I made sure to specify only english letters are allowed, but when I type in number into name field and submit my form, it doesn't alert me.
function validate() {
//first, get the input fields to validate!
var first_name = document.getElementById("fname");
var last_name = document.getElementById("lname");
var email = document.getElementById("email");
var date = document.getElementById("date");
//lay out the pattern expected for name, email, and date!
var name_pattern = "/^[a-zA-Z]{2:30}/";
var email_pattern = "/^[a-zA-Z0-9]{3:20}#[a-zA-Z0-9]{3:20}.[a-z]{3:5}/";
var date_pattern = "/^[0-9]{2}/[0-9]{2}/[0-9]{2}/";
if (name_pattern.test(first_name.value)) {
alert("Make sure to type in first name using only letters (max length of 30)!");
}
if (name_pattern.test(last_name.value)) {
alert("Make sure to type in last name using only letters (max length of 30)!");
}
if (email_pattern.test(email.value)) {
alert("Make sure to type in valid email with characters and numbers before and after #! Also, make sure to end with valid domain!");
}
if (date_pattern.test(date.value)) {
alert("Make sure to input date in MM/DD/YYYY format!");
}
}
<h1 id="form_header">
Get in Touch Form
</h1>
<form>
<ul>
<li>
<label for="fname">First Name:</label>
<input id="fname" type="text" name="user_fname" value="Ex. John" maxlength="30" required />
</li>
<li>
<label for="lname">Last Name:</label>
<input id="lname" type="text" name="user_lname" value="Ex. Doe" maxlength="30" required />
</li>
<li>
<label for="email">Email:</label>
<input id="email" type="email" name="user_email" value="Ex. john_doe#gmail.com" required />
</li>
<li>
<label for="date">Today's Date:</label>
<input id="date" type="date" name="user_date" value="Ex. 11/23/2022" required />
</li>
<li>
<label for="employer">Are you an employer?</label>
<input id="employer" type="checkbox" name="user_is_employer" />
</li>
<li>
<label for="message">Message:</label>
<textarea id="message" name="user_message"></textarea>
</li>
<li class="button">
<button type="submit" onsubmit="validate()">
Submit!
</button>
</li>
</ul>
</form>
I don't know what's wrong since I included script tag in my corresponding html file and made sure the function name is correct as well. What should I do?
I am trying to get my userText output to display the userEmail as a hyperlink that will open an email service with the email addressed to the userEmail. What am I doing wrong? The hyperlink shows up if I use variable emailLink (instead of userEmail) but then it doesn't work with the href tag thus the email is addressed to the a href tag. Not sure what else to try....Help please and thanks....
<html>
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required onchange="required();">
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>
<script>
function validateForm() {
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail.link();
var userText = userTown +'\'s a Great Town!' + '<br><br>' + ' If you don\'t believe me, click the link and ask this dude ' + '' ;
document.getElementById('text').innerHTML=userText;
}
</script>
</html>
You were leaving the content between the opening and closing a tags empty so there was nothing for the user to see to click on. In addition, you have a backslash in the opening <a> tag that shouldn't be there.
''
------------------------------------^^ // <-- content between open/close is empty!
So, it should be:
'' + userEmail + ''
Also, don't use .link() as it's unnecessary and outdated.
function validateForm() {
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail;
var userText =
userTown + '\'s a Great Town!<br><br>If you don\'t believe me, click the link and ask this dude ' +
'' + userEmail + '';
document.getElementById('text').innerHTML = userText;
}
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required >
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>
But, for a cleaner and more modern approach. Avoid all the concatenation of strings completely by just having empty elements standing by that need to be populated. Also, don't use inline HTML event handling attributes (onclick, etc.) as they are a 25+ year old ancient technique that just will not die and have many drawbacks. Instead, use modern standards and .addEventListener().
// Set up event handling in JavaScript, not HTML
document.querySelector("input[type=button]").addEventListener("click", validateForm);
function validateForm() {
var userTown = document.getElementById('town');
var userEmail = document.getElementById('email');
var userElement = document.getElementById("user");
var emailLink = document.getElementById("emailLink");
var output = document.getElementById("text");
// Just configure the properties of the pre-existing elements instead
// of creating gobs and gobs of concatenated strings:
user.textContent = userTown.value;
emailLink.href = userEmail.value;
emailLink.textContent = userEmail.value;
output.classList.remove("hidden"); // Unhide the final paragraph
}
.hidden { display:none; }
label {display:inline-block; width:20em;}
<form>
<fieldset>
<div>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required >
</label>
</div>
<div>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
</div>
<input type="button" value="Click Me">
</fieldset>
<!-- Notice the class applied to the paragraph? That hides it by default.
Then we have span elements set up as placeholders for dynamic text that
will be inserted by the JavaScript. The same is true for the empty <a> element. -->
<p id="text" class="hidden"><span id="user"></span><span>'s a Great Town!
<br><br>If you don't believe me, click the link and ask this dude </span><a id="emailLink"></a></p>
</form>
You are missing the inner text inside of the a element:
function validateForm() {
var userTown = document.getElementById('town').value;
var userEmail = document.getElementById('email').value;
var emailLink = userEmail.link();
var userText = userTown +'\'s a Great Town!' + '<br><br>' + ' If you don\'t believe me, click the link and ask this dude ' + 'The link!' ; document.getElementById('text').innerHTML=userText;
}
<html>
<form>
<fieldset>
<label>What's Your Home Town?
<input type="text" id="town" size="40" maxlength="60" required onchange="required();">
</label>
<label>Email Address?
<input type="email" id="email" size="40" maxlength="60" required>
</label>
<label>Click Here
</label>
<input type="button" value="clickMe" onclick="validateForm();">
</fieldset>
<p id = "text"></p>
</form>
I want to get the value from radio button that we have choose then multiple with the number in grossSalary. The result will be display on a textbox called epf. There are an error happening, the form only get 0.09 value even we choose 11% radio button.
Here is my javascript
<script>
function get(percent)
{
var percent = document.getElementById('percent').value;
var grossSalary= document.getElementById('grossSalary').value;
var epf = parseFloat(percent)*parseFloat(grossSalary);
epf = epf.toFixed(2);
document.getElementById('epf').value = epf;
}
</script>
Here is my form coding:
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" id="percent" name="percent" value="0.09" onclick="get(this.value)">9%
<input type="radio" id="percent" name="percent" value="0.11" onclick="get(this.value)">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
</form>
You could use the name instead of the id (because id has to be unique). Also, with jQuery, you could use the change event.
i.e. :
HTML :
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" name="percent" value="0.09">9%
<input type="radio" name="percent" value="0.11">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
JS :
$("input[name=percent]").change(function() {
var percent = $(this).val();
var grossSalary= $("#grossSalary").val();
var epf = parseFloat(percent)*parseFloat(grossSalary);
$("#epf").val(epf.toFixed(2));
});
Here is the working example on JSFiddle.
Hope it helps.
EDIT Don't forget to include jQuery source in your html file :
One file template :
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="form-group">
<label>Gross Salary</label>
<input type="text" class="form-control" id="grossSalary" name="gross_salary">
</div>
<div class="form-group">
<label>EPF</label>
<input type="radio" name="percent" value="0.09">9%
<input type="radio" name="percent" value="0.11">11%
<input type="text" id ="epf" class="form-control" name="epf" >
</div>
<script>
$("input[name=percent]").change(function() {
var percent = $(this).val();
var grossSalary= $("#grossSalary").val();
var epf = parseFloat(percent)*parseFloat(grossSalary);
$("#epf").val(epf.toFixed(2));
});
</script>
When you are using JS or Jquery than always remember one key point that:
id: used for single selection
class: used for multiple selection
In your case you are using same id for different tags, in that case it returns the first matching html value.
So to get rid of this, you have to use class and iterate over them and get the values.
What im trying to do is create a webform that will take the information put into the fields to add to a predefined text. the code I have so far is as follows:
<form action="" method="post">
<input type="reset" value="Clear">
<p>
<input type="text" name="casenumber" value="Case Number" onclick="this.select()" size="25"/>
</p>
<p>
<input type="text" name="name" value="Name" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="dealer code" value="Dealer Code" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="cid" value="CID" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="callback" value="Callback#" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="authentication" value="Dealer Authentication" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="email" value="Email" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="ptn" value="PTN" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="ban" value="BAN" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="banauth" value="Ban Authentication" onclick="this.select()" size="25" />
</p>
<p>
<input type="text" name="type" value="Type of Request" onclick="this.select()" size="25" />
</p>
<p>
Actions Taken:<br/>
<textarea name="actions" rows="5" cols="50"></textarea>
</p>
<p>
<input type="submit" value="Submit" />
</p>
Now I want all of the information entered into these fields to be added to this
SFDC - TSO Case number: input inserted here
Dealer Name: input inserted here
Dealer code: input inserted here
CID: input inserted here
Callback#: input inserted here
Dealer Authentication: input inserted here
Email: input inserted here
PTN#: input inserted here
BAN: input inserted here
BAN Authentication: input inserted here
Type of Request: input inserted here
Actions Taken: input inserted here
Have not been able to find how to do this so any help is appreciated.
Try the following javascript function which is using the placeholder attribute to generate the titles of values for the text generated:
/**
* fId: the form id
* dId: the div id which want to add the text to it
**/
function printToDiv(fId, dId){
f = document.getElementById(fId);
i = f.getElementsByTagName('input');
iTxt = Array();
k = 0;
out = '';
for (j = 0; j < i.length; j++){
if (i[j].type == 'text'){
iTxt[k] = i[j];
k++;
}
}
for (n =0; n < iTxt.length; n++){
out += "<b>"+iTxt[n].placeholder+":</b> "+iTxt[n].value+"<br />\n";
}
div = document.getElementById(dId);
div.innerHTML = out;
}
A generalized DEMO could be found here or here. Ofcourse you can apply any validation for the data by calling any other function inside the regarded function and you can call it by any way you want, for example, from onsubmit event.
I think that you have to use a placeholder.
Look:
http://www.w3schools.com/tags/att_input_placeholder.asp
Exercise:
<form action="" method="POST">
<input type="text" name="X" placeholder="Some text..." />
</form>
If you don't care about language this could be easily done with JavaScript. Just add the class to all your inputs and add a span next to your defined text
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
<body>
<input id='txtCaseNumber' class="copyValue" placeholder="case number"/>
<input id='txtDealer' class="copyValue" placeholder="Dealer Name"/>
Case Number: <span data-inputId="txtCaseNumber"></span>
Dealer Name: <span data-inputId="txtDealer"></span>
<script>
$(document).ready(function(){
$(".copyValue").blur(function(){
var inputId = $(this).attr('id');
var ident = "span[data-inputId='" + inputId + "']";
$(ident).html($(this).val());
});
});
</script>
</body>
</html>
If I am understanding your question correctly. You could do something like this. But this is not the only way, it is just a way.
Sample HTML:
<div class="container">
<input type="text" value="something"/>
<input type="text" value="something"/>
<input type="submit" value="submit" id="submit"/>
</div>
<div id="output"></div>
JS:
var a = [
"SFDC - TSO Case number:",
"Dealer Name:",
"Dealer code:",
"CID:",
"Callback#:",
"Dealer Authentication:",
"Email:",
"PTN#:",
"BAN:",
"BAN Authentication:",
"Type of Request:",
"Actions Taken:"
];
var values = [];
$("#submit").on('click', function()
{
var form = $('.container');
var inputs = form.find('input').not('.exclude'); // add this class to the inputs you don't want to collect the values of, IE clear and submit
var l = inputs.length;
var html = '';
for(var i = 0; i < l; i++)
{
var value = inputs.eq(i).val();
values.push(value);
}
for(var i = 0, ln = a.length; i < ln; i++)
{
html += '<p>' + a[i] + ' ' + values[i] + '</p>';
}
$('#output').append(html);
});
Note: I used jQuery for this example and cleaned up / changed the HTML a bit.
Demo:
http://jsfiddle.net/prb75qvt/4/
If I understand you correctly, you want to take an text fron an input box and paste it somewhere else. Use this code template :
HTML CODE
(The onchange is optional, I just like to use it because it activates a function when the text changes)
<input id="newText" type="text" onchange="myFunction()">
<p>Your text</p><p id="oldText"></p>
JS CODE
("oldText" is used as a placeholder)
function myFunction() {
var inputText = document.getElementById("newText").value;
document.getElementById("oldText").innerHTML = inputText
}
I have the javascript portion working (cut off bottom portion of it to reduce code length) when I manually put in the numbers however, I'm struggling with putting my javascript together with my html. I tried stealing bits of code to get it to work, ultimately I'd like to just have one button that says "Get Pricing" that passes the 4 variables quantity, colors, logoSheet, and margin to the respective javascript variables.
<form>
<br>
<label id="_quantity" >Quantity</label>
<input type="number" id="quantity" maxlength="254" data-hint="" name="quantity" required/>
<br>
<label id="_colors" ># of Colors</label>
<input type="number" id="colors" maxlength="254" data-hint="" name="colors" required/>
<br>
<label id="_logoSheet" ># Logo's per Sheet</label>
<input type="number" id="logoSheet" maxlength="254" data-hint="" name="logoSheet" required/>
<br>
<label id="_margin" >Margin %</label>
<input type="number" id="margin" maxlength="254" data-hint="" name="margin" required/>
<br>
<input type="submit" class="fb-button-special" id="fb-submit-button" value="submit" />
</form>
<button onclick="myFunction()">Get Pricing</button>
<p>Total Shirt Only:</p> <p id="totalShirtOnly"></p>
<p>Total Sheet Cost:</p> <p id="totalSheetCost"></p>
<p>Price Per Sheet:</p> <p id="costOfSheets"></p>
<p>Total Price:</p> <p id="totalPrice"></p>
<p>Net Profit:</p> <p id="netProfit"></p>
</center>
<script>
function myFunction()
{
var quantity = document.getElementById('quantity.value');
var colors = document.getElementById('colors.value');
var logoSheet = document.getElementById('logoSheet.value');
var margin = document.getElementById('margin.value');
var shirtCost = 2.43;
var sheetShipping = 15.0;
var marginPercent = margin/100;
var totalCost = 0.0;
var costOfSheets = 0.0;
</script>
</body>
</html>
I don't know which JavaScript variables you're referring to and if you're using jQuery or not but here's how to get values of HTML elements:
// With jQuery
var colors = $("#colors").val();
// w/o jQuery
var margin = document.getElementById("margin").value
Is this what you were looking for?