We Keep Coding

Multiple inputs update multiple textarea's

exactly what the title describes.
i'm wanting 1 set of 6/7 input fields to be able to update 4/5 different textareas for different templates to copy paste from with the input elements.
ive tried using getelementsbyclassname but it doesnt seem to work with multiple textareas.
a simple example for multiple inputs updating multiple textarea's would be enough to play with.
This is what i have so far, and its not complete.
1 name: <input type="text" name="1stTarget" onblur="tst1(this);" /><br />
2 name: <input type="text" name="2ndTarget" onblur="tst1(this);" /><br />
Email address: <input type="text" name="3rdTarget" onblur="tst1(this);" /><br />
Phone #: <input type="text" name="4thTarget" onblur="tst1(this);" /><br />
Schedule: <input type="text" name="5thTarget" onblur="tst1(this);" /><br />
<textarea name="result" id="result1" onClick="this.select();" class="disable">Hello 1stTarget, 2ndTarget i would like to confirm your email address 3rdTarget and phone # 4thTarget and the time you will be at work 5thTarget</textarea>
<br />
<textarea name="result2" id="result2" onClick="this.select();" class="disable">1stTarget and 2ndTarget updated their 5thTarget and their 4thTarget including their 3rdTarget</textarea><input type="reset" value="Reset!" />
using
<script type="text/javascript">
function tst1(elm){
var trgt=document.getElementById('result1');
trgt.value=trgt.value.replace(elm.getAttribute('name'), elm.value);
}
</script>

If I were you, I would not try to replace the text in the textarea but instead simply build the string you need from your inputs and set the text when that's done. Something like the below would work for that:
Note THe main function you need is jQuery's eq()
$('#fill').click(function(elm) {
var hasErrors=false;
var $updateElms=$('.update');
$updateElms.removeClass('hasError');
$updateElms.each( function(i,e){
if($(e).val()==''){
hasErrors=true;
$(e).addClass('hasError');
}
});
if(hasErrors) return;
var name1 = $updateElms.eq(0).val();
var name2 = $updateElms.eq(1).val();
var email = $updateElms.eq(2).val();
var phone = $updateElms.eq(3).val();
var schedule = $updateElms.eq(4).val();
var text0 = 'Hello '+name1+', '+name2+' I would like to confirm your email address '+email+' and phone # '+phone+' and the time you will be at work '+schedule;
var text1 = 'Hi '+name1+', '+name2+' we have recieved your confirmation that your email address is '+email+' and phone # is '+phone+' and that you will be at work '+schedule;
var text2 = 'Hello '+name1+', '+name2+' we have attempted to reach you via your email address '+email+' and phone # '+phone+' to advise that you missed your shift at '+schedule;
$('.result:eq(0)').val(text0);
$('.result:eq(1)').val(text1);
$('.result:eq(2)').val(text2);
});
.hasError{
color:red;
background-color:#F9B9B9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
1 name:
<input type="text" class="update"/>
<br />
2 name:
<input type="text" class="update"/>
<br />
Email address:
<input type="text" class="update"/>
<br />
Phone #:
<input type="text" class="update"/>
<br />
Schedule:
<input type="text" class="update"/>
<br />
<input type="button" id="fill" value="Fill Textareas"/>
<br />
<textarea name="result" class="disable result"></textarea>
<br />
<br />
<textarea name="result" class="disable result"></textarea>
<br />
<br />
<textarea name="result" class="disable result"></textarea>
<br />
<input type="reset" value="Reset!" />using

JS - how to remove setTimeOut for my code

I am trying to use vertical scroll to display an object A.
The idea is that if my scroll height is greater than scrollHeight (15), then after 1.2 second, A will show up.
Then when I scroll back to top, A will hide.
The problem right now is that if I dont use clearTimeout, the setTimeout will ignore the condition: if ( scroll >= scrollHeight )
When I use clearTimeout, it seems it only works when I scroll very quickly or it just doesnt work.
Here is my code.
var scrollHeight = 15;
$(window).scroll(function() {
var scroll = getCurrentScroll();
var delayThis;
if ( scroll >= scrollHeight ) {
delayThis = setTimeout(function(){
//Display **A**...
}, 1200);
}
else{
// Hide **A** ...
clearTimeout(delayThis);
}
}
Thank you very much for helping!!

You have to tell the script if the message is already showing or not, that way you avoid the multiple delays. Below is a working version of what I'm talking about. I hope that helps.
var scrollHeight = 15;
var message = $( ".message" );
var messagestatus = false;
var scrollposition;
$(window).scroll(function() {
scrollposition = $(document).scrollTop();
if ( scrollposition >= scrollHeight ) {
if ( messagestatus == false ) {
setTimeout(function(){
message.show();
messagestatus = true;
}, 1200);
}
} else{
message.hide();
messagestatus = false;
}
});
.message {
display: none;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>top</p>
<div class="message">
Show!
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> <br /><br /><br /><br /><br />
<p>bottom</p>

You need to put delayThis outside of the event, up with scrollHeight. Because otherwise it no longer exists. Right now you have it where it is only local to that one scroll event... not the proceeding ones.
Also... you would be setting the timeout over and over as you scroll. So before setting it you probably want to be make sure that delayThis is not already set.

Why won't my button run my javascript [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
Hi im having trouble figuring out why my button will not work below is my code any help is appreciated. basically once i hit button it should either print story with typed in words or if a spot is left blank story doesnt show and box thats missing characters is surrounded with red border
thanks.
HTML code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="script.js"></script>
<title>assignment2</title>
</head>
<body>
<div id= "list">
<form id="form1" method="get">
<h3> Fill in the blanks and then press the submit button. </h3>
<label> Adjective
<input type="text" name="adjective"id ="adjective"/>
</label>
<br />
<br />
<label> Adjective
<input type="text" name="adjective2"id ="adjective2"/>
</label>
<br />
<br />
<label> Plural Noun
<input type="text" name="pluralnoun"id ="pluralnoun"/>
</label>
<br />
<br />
<label> Verb (ending in "ing")
<input type="text" name="verb"id ="verb"/>
</label>
<br />
<br />
<label> Edible object
<input type="text" name="edibleobject"id ="edibleobject"/>
</label>
<br />
<br />
<label> Monster
<input type="text" name="monster"id ="monster"/>
</label>
<br />
<br />
<label> Adjective
<input type="text" name="adjective3"id ="adjective3"/>
</label>
<br />
<br />
<label> Monster (again)
<input type="text" name="monster2"id ="monster2"/>
</label>
<br />
<br />
<label> Verb (ending in "ing")
<input type="text" name="verb2"id ="verb2"/>
</label>
<br />
<br />
<button type="submit" id="btn" name="btn"/>View Story</button>
</form>
</div>
<div id="story">
<p> Rain was still lashing the windows, which were now <span class ="adjective"> </span>, but inside all looked bright and cheerful. The firelight glowed over the countless <span class ="adjective2"></span><span class ="pluralnoun"></span> where people sat <span class ="verb"></span>, talking, doing homework or, in the case of Fred and George Weasley, trying to find out what would happen if you fed a <span class ="edibleobject"></span> to a <span class ="monster"></span>. Fred had "rescued" the <span class ="adjective3"></span>, fire-dwelling <span class ="monster2"></span> from a Care of Magical Creatures class and it was now <span class ="verb2"></span> gently on a table surrounded by a knot of curious people.
</p>
</div>
</body>
</html>
Javascript code:
$(document).ready( function() {
$('#story p').hide();
$('#form1').on('submit', function(event)
{
for(var i=0 ;i<$('#form1 input').length; i++) //tyler suggested this to make it easier fo my error borders.
{
$('#form1 input').eq(i).removeclass("errorborder");
}
if (!formFilled()){
event.preventDefault();
}
else
{
$('span.adjective').html($('#form1 input#adjective').val());
$('span.adjective2').html($('#form1 input#adjective2').val());
$('span.pluralnoun').html($('#form1 input#pluralnoun').val());
$('span.verb').html($('#form1 input#verb').val());
$('span.edibleobject').html($('#form1 input#edibleobject').val());
$('span.monster').html($('#form1 input#monster').val());
$('span.adjective3').html($('#form1 input#adjective3').val());
$('span.monster2').html($('#form1 input#monster2').val());
$('span.verb2').html($('#form1 input#verb2').val());
$('#story p').show();
event.preventDefault(); //Tyler informed me this would stop the page from refreshing and deleting the inputted words.
}
});
function formFilled(){
var filled=true;
for(var i=0;i<$('#form1 input').length; i++)
{
if ($('#form1 input').eq(i).val() === "")
{
$('#form1 input').eq(i).addClass("errorborder");
filled=false;
}
}
return filled;
}
});
CSS code:
.errorborder{
border:red, 3px,solid;
}
span {
color: blue;
text-decoration: bold;
font-style: italic;
}

I've used some of the suggestions in comments above, and changed around a few things myself and cleaned up the code. I've made it work...
The primary changes were
change the form method to post
change your <button> to <input type="submit">
please see this jsFiddle to see a working example of your code.
Hope you're able to see your mistakes by comparing with your own code!

HTML/Javascript: Trigger 2 different action from 1 button

How can we trigger 2 action from 1 button? How do we make a button/or links which can go/scroll to element "#result" and trigger the function "calculateThis" (proceed data from a form)
How do I mix the these into 1 button/link?
Submit
and
<button class="button" onclick="calculateThis(this.form); return false;">Submit</button>
// UPDATED
Here is the complete code
<script type="text/javascript">
function calculateThis(form) {
var userweight=parseInt(form.weight.value, 10);
var caffeineamount=parseInt(form.caffein.value, 10);
var caffeinetimes=parseInt(form.caffeintimes.value, 10);
var totalcaffeine=caffeineamount*caffeinetimes;
console.log(totalcaffeine)
// Calculate max caffeine per person
var maxcaffeine=userweight*10;
// Calculate remaining after 24 hours
// Half life = 6 hours
var totalcaffeineafter=totalcaffeine*(1/16);
// Calculating how many hours until the caffeine completely digested
var totaldigest=totalcaffeine;
var digesttime=0;
while (totaldigest>0.05) {
totaldigest=totaldigest*(1/2);
digesttime++;
}
digesttime=digesttime*6;
// Calculating when the user will probably die of overdose
var countcaffeine=0;
var overdosetime=1;
while (countcaffeine<maxcaffeine){
countcaffeine=countcaffeine+totalcaffeine;
overdosetime++;
}
// Show total amount of caffeine
document.getElementById("showtotalkafein").innerHTML=totalcaffeine;
// Show amount of caffeine after 1 day
document.getElementById("showtotalkafeinsetelah").innerHTML=totalcaffeineafter;
// Show digest time
document.getElementById("showwaktudigest").innerHTML=digesttime;
// Show overdose
document.getElementById("showberapakali").innerHTML=overdosetime;
return false;
}
</script>
<form class="form">
Weight<br />
<input type="text" name="weight" class="required" value="" /><p />
Amount of caffein in coffee<br />
<input type="text" name="caffein" class="required" value="" /><p />
How many times drinking coffeein a day<br />
<input type="text" name="caffeintimes" class="required" value="" /><p />
Submit
</form>
<br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br /> <br />
<h1 id="result">Result</h1>
<p id="showtotalkafein">Show Caffein Total Here</p>
<p id="showtotalkafeinsetelah">Show Caffeine Amount After 24 hours</p>
<p id="showwaktudigest">Show Digest Time Here</p>
<p id="showberapakali">Show Overdose Time Here</p>

You should be able to do the same as in the button, i.e
Submit
Doesn't this work?

JaggenSWE's answer is almost there, but don't return false since this suppresses default behaviour, which is to follow the link.
Submit
I wouldn't advise using inline event handlers though.
Edit
This works. http://jsbin.com/uwatab/3/
Its always preferable to attach an onsubmit handler to a form, rather than button onclick. This way, pressing enter in your form still executes your javascript.

How to use a cookie to detect if the user has already submitted the form?

I'm not looking for someone to do my work for me... I need help/advice.
I need to:
Modify the form page so that when the JavaScript function has verified that all of the required fields have been filled, a cookie is added to the user's computer. If the same user attempts to fill out the form a second time, the user will be directed to a separate HTML page advising them that they have already submitted the form.
What am I doing wrong?
This is my form:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Request Form</title>
<meta name="Description" content="This webpage is for Customer Demographics" />
<meta name="Keywords" content="Rhonda , email, " />
<meta name="author" content="Rhonda " />
<meta name="copyright" content="Copyright 2010 Rhonda , All Rights Reserved" />
<meta name="robots" content="all" />
<meta name="revisit-after" content="15 days" />
<meta name="rating" content="safe for kids" />
<script>
<!-- page to go to if cookie -->
go_to = "Submit.html";
num_days = -1;
function ged(noDays){
var today = new Date();
var expr = new Date(today.getTime() + noDays*24*60*60*1000);
return expr.toGMTString();
}
function readCookie(cookieName){
var start = document.cookie.indexOf(cookieName);
if (start == -1){
document.cookie = "seenit=yes; expires=" + ged(num_days);
} else {
window.location = go_to;
}
}
readCookie("seenit");
</script>
<script type="text/javascript" >
function verify() {
var themessage = "You are required to complete the following fields: ";
if (document.form.first.value=="") {
themessage = themessage + " - First Name";
}
if (document.form.middle.value=="") {
themessage = themessage + " - Middle Initial";
}
if (document.form.last.value=="") {
themessage = themessage + " - Last Name";
}
if (document.form.street.value=="") {
themessage = themessage + " - Street";
}
if (document.form.city.value=="") {
themessage = themessage + " - City";
}
if (document.form.state.value=="") {
themessage = themessage + " - State";
}
if (document.form.zip.value=="") {
themessage = themessage + " - Zip Code";
}
if (document.form.email.value=="") {
themessage = themessage + " - E-mail";
}
if (document.form.areacode.value=="") {
themessage = themessage + " - Area Code";
}
if (document.form.telephone.value=="") {
themessage = themessage + " - Telephone";
}
if (themessage == "You are required to complete the following fields: ") {
document.form.submit();
}
else {
alert(themessage);
return false;
}
}
</script>
</head>
<body>
<body style="background-color:lightsteelblue">
<h1>
Welcome customer.
<br />
<br />
<br />
Please enter the following details in order
to be added to our preferred customer mailing list:
<br />
<br />
<br />
</h1>
<!--This code builds the form -->
<form name=form method="post" action="">
<!--Personal information: -->
<form action="">
<fieldset>
<legend>Personal Information:</legend>
<br /><br />
First Name:<input type=text name="first" size="20"> <br /><br /><br />
Middle Initial:<input type=text name="middle" size="3"><br /><br /><br />
Last Name:<input type=text name="last" size="20"> <br /><br />
<br />
</fieldset>
<br /><br />
<form action="">
<fieldset>
<legend>Address:</legend>
<!--Address: -->
Street: <input type=text name="street" size="30"><br /><br />
City: <input type=text name="city" size="30"><br/><br />
State:<input type=text name="state" size="2"><br/><br />
Zip Code: <input type=text name="zip" size="7"><br /><br />
<br />
</fieldset>
<br /><br />
<!--Contact Information: -->
<form action="">
<fieldset>
<legend>Contact Information:</legend>
Email Address:<input type=text name="email" size="25" />
<br /><br />
Area Code:<input type=text name="areacode" size="3" /><br /><br />
Telephone Number:<input type=text name="telephone" size="7" />
<br />
<br />
</fieldset>
<br /><br /><br />
<!--NOTES
This part was not mandantory. I was just trying some of the extra ways of adding input that the book discussed-->
<form action="">
<fieldset>
<legend>Extra Credit:</legend>
<p>
Gender:
<br />
<input type="radio" name="sex" value="male" /> Male<br />
<input type="radio" name="sex" value="female" /> Female
</p>
<p>
How did you hear about us?
<br />
<input type="checkbox" name="Friend" value="Friend" /> From a friend
<br />
<input type="checkbox" name="Advertisement" value="Advertisement" /> Store Advertisement
<br />
<input type="checkbox" name="Online" value="Online" /> From Online
<br />
<input type="checkbox" name="Other" value="Other" /> Other
<br />
</p>
<p>
How do you wish to be contacted?
<br />
<form action="">
<select name="contact">
<option value="telephone">Telephone</option>
<option value="E-mail">E-mail</option>
<option value="Snail-mail">Snail-mail</option>
</select>
<br />
<br />
</fieldset>
</p>
</form>
<form action="" onSubmit="return verify()" method="post">
<input type="submit" name="submit" value="Submit">
<input type=reset value="Clear Form"><br>
</form>
<!--Back to top -->
<p>Back to Top</p>
</body>
</html>

The first thing to note is that nested <form> tags are not legal HTML. You only need one form tag to wrap everything that you want to submit from before the first <input> to after the submit button. Add your onSubmit handler to that form tag.
Additionally, your first script tag:
A) Does not have a type="text/javascript" attribute (which is, I believe required if your are using XHTML.)
B) Is using an HTML comment <!-- --> rather than a JavaScript comment // or /* */, which is probably throwing an error and killing everything that happens below it.
Fix those two things, and if it's still not working, come back and edit the question, adding more information about the errors you're seeing and what you've tried so far to fix them. :-)