Display Form Results in Textarea with JavaScript - javascript

I'm new to programming. I've made a form that displays results in a HTML textarea with javascript. I'm trying to make the textarea also display a link to the wikipedia article about the item selected using an if/else statement:
function setFlower(type) {
flowerName = type;
}
//method for displaying the method in the textarea
function displayMessage() {
var fullName = document.flowerOrderForm.fullName.value;
// if/else statements for more information
if (flowerName == document.flowerOrderForm.flowerTypes.roses) {
var moreInfo = "https://en.wikipedia.org/wiki/Rose";
}
else if (flowerName == document.flowerOrderForm.flowerTypes.carnations) {
var moreInfo = "https://en.wikipedia.org/wiki/Dianthus_caryophyllus";
}
else if (flowerName == document.flowerOrderForm.flowerTypes.daisies) {
var moreInfo = "https://en.wikipedia.org/wiki/Asteraceae";
}
document.flowerOrderForm.info.value =
fullName + ", " + "thank you for your inquiry about " + flowerName + "." + NL
+ "Here is a link for more information: " + moreInfo;
}
And the HTML form:
<form name = "flowerOrderForm">
<fieldset name = "form">
<fieldset name = "inputControls">
<p class = "name">
<!--Name textbox and label-->
<label for = "fullName">Full Name</label><br />
<input class = "fullName" type = "text" name = "fullName" value = "" id = "fullName" size = "35" />
</p>
<p class = "flowers">
<!--flower type radio buttons-->
<span>
<input type = "radio" name = "flowerTypes" value = "roses" id = "roses" onclick = "setFlower(this.value)" />
<label for= "roses">Roses</label>
</span>
<span>
<input type = "radio" name = "flowerTypes" value = "carnations" id = "carnation" onclick = "setFlower(this.value)" />
<label for = "carnation">Carnations</label>
</span>
<span>
<input type = "radio" name = "flowerTypes" value = "daisies" id = "daisy" onclick = "setFlower(this.value)" />
<label for = "daisy">Daisies</label>
</span>
</p><!--end flowers-->
</fieldset><!--end inputControls-->
<fieldset name = "submit">
<!--request info submit button-->
<input class = "requestInfo" type = "button" name = "flowerOrder" value = "Request Information" onclick = "displayMessage()" />
</fieldset><!--end submit-->
<fieldset name = "infoBox">
<!--textarea for displaying submitted information-->
<textarea name = "info" readonly = "true" value = "" rows = "7" cols = "50"></textarea>
</fieldset><!--end infoBox-->
</fieldset><!--end form-->
</form>
Right now, moreInfo is undefined in the text area. How can I fix this?

Dont use document.write all it does it print it out to the screen instead store it as link
function setFlower(type) {
flowerName = type;
}
//method for displaying the method in the textarea
function displayMessage() {
var fullName = document.flowerOrderForm.fullName.value;
var moreInfo;
// if/else statements for more information
if (flowerName == document.flowerOrderForm.flowerTypes.roses) {
moreInfo = "https://en.wikipedia.org/wiki/Rose";
}
else if (flowerName == document.flowerOrderForm.flowerTypes.carnations) {
moreInfo = "https://en.wikipedia.org/wiki/Dianthus_caryophyllus";
}
else if (flowerName == document.flowerOrderForm.flowerTypes.daisies) {
moreInfo = "https://en.wikipedia.org/wiki/Asteraceae";
}
document.flowerOrderForm.info.value =
fullName + ", " + "thank you for your inquiry about " + flowerName + "." + NL
+ "Here is a link for more information: " + moreInfo;
// moreInfo would be a link now as a string and so will be displayed in textarea
}

Related

Make Right Answers Green and Wrong Answers Red for JS Quiz

I have a quiz system that is created in JS. I am using input elements to display each quiz option. I am trying to make it so when you click submit, it will loop through each input element and set the styling of the input text to green if it is a correct answer and red if it an incorrect answer. I am having trouble actually getting the text that is next to the input value however.
Below is a picture of the quiz:
https://gyazo.com/1ba5245de2c5c6f96bd728e31aeb0899
HTML:
<!DOCTYPE html>
<html>
<head>
<link href ="style.css" rel ="stylesheet">
<!-- <link href="https://fonts.googleapis.com/css?family=OpenSans" rel="stylesheet"> -->
<script src = "main.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<h1>Chapter 1 Quiz</h1>
<form id = "quiz" name = "quiz">
<p class = "questions">What is the capital of Rhode Island?</p>
<input id = "textbox" type = "text" name = "question1">
<p class = "questions">What is the capital of Connecticut?</p>
<input type = "radio" id = "mc" name = "question2" value = "Hartford"> Hartford<br>
<input type = "radio" id = "mc" name = "question2" value = "Heartford"> Heartford<br>
<p class = "questions">What is the capital of New York?</p>
<input type = "radio" id = "mc" name = "question3" value = "Albany"> Albany<br>
<input type = "radio" id = "mc" name = "question3" value = "All Benny's"> All Benny's<br>
<input id = "button" type = "button" value = "Finish" onclick = "check();">
</form>
<div id = "after_submit">
<p id = "number_correct"></p>
<p id = "message"></p>
</div>
</html>
</body>
JAVASCRIPT:
function check(){
var question1 = document.quiz.question1.value;
var question2 = document.quiz.question2.value;
var question3 = document.quiz.question3.value;
var correct = 0;
var total_questions = 3;
if (question1 == "Providence") {
correct++;
}
if (question2 == "Hartford") {
correct++;
}
if (question3 == "Albany") {
correct++;
}
var score;
if (correct == 0) {
score = 2;
}
if (correct > 0 && correct < total_questions) {
score = 1;
}
if (correct == total_questions) {
score = 0;
}
$( "input" ).each(function( index ) {
console.log( index + ": " + $( this ).val() );
// CHANGE THE STYLING HERE. VAL DOES NOT GET THE TEXT OF INPUT AND NIETHER DOES .text()
});
document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = "Correct Answers:";
document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";
}
I was thinking I could store the correct answers in the array and if the input has the value then change the styling of the text to green otherwise change it to red.
why simple don't use class:
if(ans == correct) { $(this).toggleClass(corect); correct ++; } if(ans != correct) { $(this).toggleClass(wrong); }
// whidth text color you need on css
This code is not good. I decided to rewrite it with the correct answers in one place. Also I added labels to each input element so that I can manipulate the CSS better.
Here is the JS:
function check(){
var correct = 0;
var total_questions = 3;
var correct_answers = ["Providence", "Hartford", "Albany"];
$( "label" ).each(function( index ) {
console.log( index + ": " + $( this ).text() );
if (correct_answers.includes($( this ).text())) {
this.style.color = 'green'
correct++
} else {
this.style.color = 'red'
}
});
document.getElementById("after_submit").style.visibility = "visible";
document.getElementById("message").innerHTML = "Correct Answers:";
document.getElementById("number_correct").innerHTML = "Score: " + correct + " / " + total_questions + " (" + Math.trunc((correct / total_questions)*100) + "%)";
}
hi that is be done by just adding one else condition
style
.mystyle{
border-color: red;
}
if (question2 == "Hartford") {
correct++;
}
else{
var element = document.getElementById("textbox");
element.classList.add("mystyle");
}
check my fiddle here
click

change the background and color of an input field based on the date using moment.js

I need to change the background and color of an input field based on the date using moment.js I have the some code below, but it finds the date value and then doesn't change the color. I wonder why it doesn't. I'll accept any good answer in javascript or jquery.
var cccr_mems = [
{ "Name": "Ahmed, Jamshed", "cccrEXP": "2018.10.10" },
{ "Name": "Attaya, James J", "cccrEXP": "2019.01.12" },
{ "Name": "Badamo, Anthony", "cccrEXP": "2018.09.12" }]
function getExpireDate(ele) {
var i = null;
for (i = 0; cccr_mems.length > i; i++) {
if (cccr_mems[i].Name == ele.value) {
var exDate = moment(cccr_mems[i].cccrEXP, 'YYYY.MM.DD');
// everything works except for this next "if" statement:
// I would rather reference the input date field by ID such as id = "CCCR_X1"
if (moment().isAfter(exDate)) {
$(ele).closest('.universal').find('.CCCRexpDate').css('color', "#A3005B");
} else {
$(ele).closest('.universal').find('.CCCRexpDate').css('color', "#275052");
}
// down to here.
return cccr_mems[i].cccrEXP;
}
}
return '';
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.1/moment.js"></script>
<input type = "text" onblur="getExpireDate();" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X1" />
<input type = "text" onblur="getExpireDate();" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X2" />
<input type = "text" onblur="getExpireDate();" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X3" />
this might help
first pass reference of element in getExpireDate
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X1" />
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X2" />
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X3" />
then update getExpireDate
function getExpireDate(ele) {
var i = null;
for (i = 0; cccr_mems.length > i; i++) {
if (cccr_mems[i].Name == ele.value) {
var exDate = moment(cccr_mems[i].cccrEXP, 'YYYY.MM.DD');
if (moment().isAfter(exDate)) {
//$(ele).css('color', "#A3005B");
$(ele).css('background', "#A3005B");
} else {
$(ele).css('background', "#275052");
//$(ele).css('color', "#275052");
}
return cccr_mems[i].cccrEXP;
}
}
return '';
}
<input type = "text" onblur="getExpireDate(this);" class="CCCRexpDate" name = "cccr_exp" id = "CCCR_X1" />
and the JavaScript section:
document.getElementById(ele.id).style.backgroundColor="#275052"

how to set value element input using function in jquery

I'm newbie in jquery And Data table,
I have problem when to set value for element input from another page using function.
this my 1st page code
{
data: "action_user",
targets: "action_user",
mRender: function (data_app, type_app, row_app) {
if (row_app["id_user"] !== null) {
var va_id_user = row_app["id_user"];
var va_user_name = row_app["user_name"];
var va_gender = row_app["gender"];
var va_address = row_app["address"];
var va_imei = row_app["imei"];
var va_phone = row_app["phone"];
var va_role_name = row_app["role_name"];
var va_email = row_app["email"]; //,supplier_name,supplier_code,address,contact_name,contact_num,status_supp
var va_status_user = row_app["status_user"]; // <a href='#'id='updateDataUser' onclick='javascript:myFunc(" + supplier_id + ")'><i class='fa fa-edit'title='Edit'></i></a>\n\
var data_users = {
id_user: va_id_user,
user_name: va_user_name,
gender: va_gender,
imei: va_imei,
phone:va_phone,
address:va_address,
role_name: va_role_name,
email: va_email,
status_user: va_status_user
};
return"<a id='updateDataUser' href='#' onclick='javascript:editUserFunc(" + JSON.stringify(data_users) + ")'><i class='fa fa-edit activeRecord' rel='13' title='Edit'></i></a>";
// return "<a href='" + data_pict_1 + " 'target='_blank' class='btn btn-info'>" + "<font color='#f2f2f2' size='2em'>" + "Display" + "</font>" + "</a>";
}
}
}
this my html code
<div id="div_add_pic" class="panel panel-default">
<form id="form_add_pic" name="form_add_pic" method="POST" action="">
<div id="form_add_user_response" class="resp"></div>
<div class="box-body">
<div class="form-group">
<label for="username" class="req">User Name :</label>
<input type="text" name="userName" id="userName" placeholder="User Name" class="form-control uppercase" />
</div>
</div>
</form>
</div>
this my function to set input value element .
function editUserFunc(data_users) {
var userName = data_users.user_name;
alert(userName);
$("#userName").val(userName);}
my function I change to
function editUserFunc(data_users) {
var userName = data_users.user_name;
alert(userName);
var oForm = document.getElementById("form_add_pic");
var set_userName = oForm.userName;
window.location.href = "index.jsp?url=user_layout& pages=add_user_form"
}
but I've got error
validation.js:1422 Uncaught TypeError: Cannot read property 'userName' of null
at editUserFunc (validation.js:1422)
at HTMLAnchorElement.onclick (index.jsp?url=user_layout&pages=list_users:1)
my console.log printscreen
how to call the element form on another page
I have tried it many times but I've been unsuccessful. Please help!
I think, you have to move all these functions inside
$(document).ready(function(){
//Replace with your code
})
Because your script may be there in top of html tags and while running these scripts, those html inputs are not loaded.
finally I use this code, to get parameter on url address bar
function getUrlQueryString(param) {
var outObj = {};
var qs = window.location.search;
if (qs != "") {
qs = decodeURIComponent(qs.replace(/\?/, ""));
var paramsArray = qs.split("&");
var length = paramsArray.length;
for (var i=0; i<length; ++i) {
var nameValArray = paramsArray[i].split("=");
nameValArray[0] = nameValArray[0].toLowerCase();
if (outObj[nameValArray[0]]) {
outObj[nameValArray[0]] = outObj[nameValArray[0]] + ";" + nameValArray[1];
}
else {
if (nameValArray.length > 1) {
outObj[nameValArray[0]] = nameValArray[1];
}
else {
outObj[nameValArray[0]] = true;
}
}
}
}
var retVal = param ? outObj[param.toLowerCase()] : qs;
return retVal ? retVal : ""
}

Javascript to check if fields are entered for login

I'm trying to create a login page. I need to validate username and password but my js does not seem to work. I made it simpler now just for the sake to make it work. This is my html:
<script type="text/javascript" src = "js/checklogin.js"></script>
<h3>Already have an account?</h3>
<span id = "feedback"></span>
<form id = "login" action = "login.html" method = "post">
<label for = "name">User name:</label><br>
<input type = "text" name = "username " id = "username"><br>
<label for = "password">Password:</label><br>
<input type = "password" name = "password" id = "password"><br>
<input type="submit" value="Login">
</form>
And this is my js:
var elUsername = document.getElementById('username');
var elPassword = document.getElementById('password')
var elMsg = document.getElementById('feedback');
function checkFilled(length) {
if (length == "") {
elMsg.innerHTML = 'Please fill out this field';
} else {
document.getElementById("login").submit();
}
}
elUsername.addEventListener('blur', checkFilled(elUsername.value),false);
elPassword.addEventListener('blur', checkFilled(elPassword.value),false);
I still cannot make it to work. Also, how can i make it to appear as a pop up right on the textbox? Something that looks like this:
Error image
There's several issues with the code you had, so here's a complete example of the way I would do it (use the same HTML you already have). This works for me as tested in JSFiddle and below in the snippet.
var elUsername = document.getElementById('username');
var elPassword = document.getElementById('password')
var elMsg = document.getElementById('feedback');
var elForm = document.getElementById('login');
function checkFilled() {
if (elUsername.value == "" || elPassword.value == "") {
elMsg.innerHTML = 'Please fill out this field';
event.preventDefault();
} else {
elMsg.innerHTML = '';
}
}
if (elForm.addEventListener) {
elForm.addEventListener('submit', function() {
checkFilled();
}, false);
} else {
elForm.attachEvent('onsubmit', function() {
checkFilled();
});
}
if (elUsername.addEventListener) {
elUsername.addEventListener('blur', function() {
checkFilled();
}, false);
} else {
elUsername.attachEvent('onblur', function() {
checkFilled();
});
}
if (elPassword.addEventListener) {
elPassword.addEventListener('blur', function() {
checkFilled();
}, false);
} else {
elPassword.attachEvent('onblur', function() {
checkFilled();
});
}
<!--<script type="text/javascript" src = "js/checklogin.js"></script>-->
<h3>Already have an account?</h3>
<span id = "feedback"></span>
<form id = "login" action = "login.html" method = "post">
<label for = "name">User name:</label><br>
<input type = "text" name = "username " id = "username"><br>
<label for = "password">Password:</label><br>
<input type = "password" name = "password" id = "password"><br>
<input type="submit" value="Login">
</form>

trying to show and hide parts of an html document

Here is the HTML for my page :
<!DOCTYPE html>
<html>
<body>
<link href = "sites.css" type = "text/css" rel = "stylesheet"/>
<image src = "beach_houses.jpg" id = "sites">
<form id = "details">
Please enter your name: <input type = "text" id = "name"><br/><br/>
Please provide a valid e-mail: <input type = "text" id = "e-mail"><br/><br/>
I am on a tour<input type = "checkbox" id = "status">
<div id = "further"><br/>
Indicate your gender
M<input type = "radio" name = "gender"value = "male" id = "M">
F<input type = "radio" name = "gender" value = "female" id = "F">
</div><br/></br>
<input type = "submit" value = "submit!">
</form>
<br/><br/><div id = "error" ></div>
</body>
<script src = "function.js" type = "text/javascript"></script>
</html>
And here's the javascript :
Images.onclick = function() {
clearInterval(iHandle);
}
function prepare() {
document.getElementById("status").onclick = function() {
if (document.getElementById("status").checked)
document.getElementById("further").style.display = "block";
else
document.getElementById("further").style.display = "none";
document.getElementById("further").style.display = "none";
};
document.getElementById("details").onsubmit = function() {
if(document.getElementById("name").value == "") {
document.getElementById("error").innerHTML = "Please provide a name!";
document.getElementById("error").style.color = "red";
return false;
}
else if (document.getElementById("e-mail").value == "") {
document.getElementById("error").innerHTML = "Please provide a valid e-mail address!";
document.getElementById("error").style.color = "red";
return false;
}
};
}
window.onload = function() {
prepare();
};
The idea is that when the I am on a tour checkbox is checked, the Indicate your gender question pops up. However, the opposite happens; that question seems to be visible by default and becomes invisible when I click on the checkbox. Why is this?
Thanking You in advance
saad
Change <div id = "further"> to <div id = "further" style="display:none">
and
document.getElementById("status").onclick = function() {
if (document.getElementById("status").checked) {
document.getElementById("further").style.display = "block";
}
else {
document.getElementById("further").style.display = "none";
}
};

Categories