I have this small bit of HTML and JS and I cannot for the life of me get the function to work with the button. I have tried many things and changed different styles of creating buttons and text boxes but I cannot figure out how to fix it.
Here is the Code:
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
if (isInt(form1.blueBags.value) == true && isInt(form1.redBags.value) == true && isInt(form1.yellowBags.value) == true && isInt(form1.greenBags.value) == true) {
if (total > 100) {
var cost = (total * 0.03);
//if (confirm("CONFIRM ORDER: /n blue bags: " + form1.blueBags.value + "/n red bags: " + form1.redBags.value + "/n yellow bags: " + form1.yellowBags.value + "/n green bags: " + form1.greenBags.value + "/n Desired Text: " + text)) {
alert("Order Confirmed");
} else {
alert("Order Cancelled");
}
} else {
alert("Minimum order is 100 bags.");
}
} else {
alert("One or more of the forms doesn't contain a quantity for order.");
}
}
</script>
Here you miss handled with '{}' and your form name is "orderingForm" not "form1"
try this:
<html>
<body>
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
</body>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
console.log("hai")
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
if (isInt(orderingForm.blueBags.value) == true && isInt(orderingForm.redBags.value) == true && isInt(orderingForm.yellowBags.value) == true && isInt(orderingForm.greenBags.value) == true) {
if (total > 100) {
var cost = (total * 0.03);
alert("Order Confirmed");
} else {
alert("Minimum order is 100 bags.");
}
} else {
alert("One or more of the forms doesn't contain a quantity for order.");
}
}
</script>
</html>
hope it will help for you.
You used .. and missed }. Try this
<div id="orderForm">
<form name="orderingForm" action="form_action.asp">
<p>Complete this form to order Bags
<br>
<br> How many of each bag do you want (3p/ea)</p>
<p>Number of Blue bags:
<input type="text" name="blueBags" value=0>
</p>
<p>Number of Red bags:
<input type="text" name="redBags" value=0>
</p>
<p>Number of Yellow bags:
<input type="text" name="yellowBags" value=0>
</p>
<p>Number of Green bags:
<input type="text" name="greenBags" value=0>
</p>
<p>Enter Desired Text:
<input type="text" name="textBags" value="Enter Your text here">
<p>Minimum order 100 bags</p>
<input type="button" value="Click to Order" onClick="Order()">
</form>
</div>
<!--Script for the ordering system-->
<script>
<!-- extra functions to check if input is an integer -->
function isInt(n) {
return n % 1 === 0;
}
function Order() {
var amountB = document.orderingForm.blueBags.value;
var amountR = document.orderingForm.redBags.value;
var amountY = document.orderingForm.yellowBags.value;
var amountG = document.orderingForm.greenBags.value;
var text = document.orderingForm.textBags.value;
var total = amountB + amountR + amountY + amountG;
//if (isInt(form1.blueBags.value) == true && isInt(form1.redBags.value) == true && isInt(form1.yellowBags.value) == true && isInt(form1.greenBags.value) == true) {
if (total > 100) {
// var cost = (total * 0.03);
//if (confirm("CONFIRM ORDER: /n blue bags: " + form1.blueBags.value + "/n red bags: " + form1.redBags.value + "/n yellow bags: " + form1.yellowBags.value + "/n green bags: " + form1.greenBags.value + "/n Desired Text: " + text)) {
alert("Order Confirmed");
// } else {
// alert("Order Cancelled");
// }
} else {
alert("Minimum order is 100 bags.");
}
//}else {
// alert("One or more of the forms doesn't contain a quantity for order.");
// }
}
</script>
First-off, don't use HTML Comments between your <script> tags, as you have:
<!-- extra functions to check if input is an integer -->
And you have a syntax error at .. should be . "single dot", as you have:
var text = document.orderingForm..textBags.value;
This should be something like this:
var text = document.orderingForm.textBags.value;
And finally, you didn't close your Order() function ending bracket.
Checkout this fiddle: http://jsfiddle.net/c5496q92/
Updated for Understanding Comments in HTML and JavaScript:
When you wants to add some Comments in HTML, you can use:
<!-- Your Comments -->
And if you are working in .js file or between <script></script> tags you should use:
/* For multi-line comments */
// For singular line comment
You can read about this more at:
http://www.inmotionhosting.com/support/edu/website-design/website-design-basics/comment-php-javascript-html-css-code
Replace the line as follows:
var text = document.orderingForm.textBags.value;
and to add two values use parseInt(value) or parseFloat(value) as:
var r = parseInt(amountB) + parseInt(amountR);
Remove . from this line
var text = document.orderingForm..textBags.value;
write
var text = document.orderingForm.textBags.value;
and close the } end of your code
Related
can anyone tell me what is wrong with my coding and why it is not displaying the output and keeps showing me the prompt only? there is something wrong in my if statements and I can't figure out what it is I tried many things but it still now working any suggestions? it supposes to be the same as the picture the final output and the prompt must show only when I write zero days like the picture prompt
<!DOCTYPE html>
<html>
<head>
<style>
body{
background-color:orange;
margin:20px;
}
</style>
<title> Assignment2</title>
</head>
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20" >
<input type="text" id="lname" size="20" >
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label ><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value=30>King $30</option>
<option value=20>Double $20</option>
<option value=10>Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;" > CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;" > BOOK </button>
</form>
<p style="background-color:blue;" id="result"> </p>
<script>
var Fname= document.getElementById("fname").value;
var Lname= document.getElementById("lname").value;
var date= document.getElementById("date").value;
var days= document.getElementById("days").value;
var request= document.getElementById("request").value;
var total="";
function myFunction(){
var n = Number(document.getElementById("days").value);
var val= Number( document.getElementById("room").value);
var total="";
if (n<=0){
n=prompt(" minimum reservation period is 1 day try again");
}
else if (val == "King $30") {
total = n * 30;
}
else if (val == "Double $20") {
total = n * 20;
}
else if (val == "Single $10") {
total = n * 10;
} else {
}
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us."+
"<br>"+" Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" +"Amount:=$ " + total +
"<br>" + " Any Special Request: " + request ;
};
</script>
</body>
</html>
Do not use form with no action
Check this out:
function myFunction() {
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var val = Number(document.getElementById("room").value);
var n = Number(document.getElementById("days").value);
var total = "";
if (n < 3) {
console.log(n);
n = alert("Minimum reservation period is 2 daye try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double 20") {
total = n * 20;
} else if (val == "Single 10") {
total = n * 10;
} else {
}
document.getElementById("result").innerHTML = " Dear " + Fname + ' ' + Lname + " , thank you for booking with us.";
document.getElementById("result1").innerHTML = " Expected Arrival Date: " + date;
document.getElementById("result2").innerHTML = " Booked: " + val + " for " + days + "days ";
document.getElementById("result3").innerHTML = " Amount:=$ " + total;
document.getElementById("result4").innerHTML = " Any Special Request: " + request;
window.location.hash = '#result';
};
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<input list="room">
<datalist id="room">
<option value="King $30">
<option value="Double $20">
<option value="Single $10">
</datalist>
<br><br>
<label><b> Number of Days:</b></label>
<input type="number" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
<p style="background-color:blue;" id="result"> </p>
<p style="background-color:blue;" id="result1"> </p>
<p style="background-color:blue;" id="result2"> </p>
<p style="background-color:blue;" id="result3"> </p>
<p style="background-color:blue;" id="result4"> </p>
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: orange;
margin: 20px;
}
</style>
<title> Assignment2</title>
</head>
<body>
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value=30>King $30</option>
<option value=20>Double $20</option>
<option value=10>Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="text" size="12" id="days">
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
<p style="background-color:blue;" id="result"> </p>
<script>
function myFunction() {
var n = Number(document.getElementById("days").value);
var val = Number(document.getElementById("room").value);
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var total = "";
if (n <= 0) {
n = prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else if (val == "Single $10") {
total = n * 10;
} else {}
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" + "Amount:=$ " + total +
"<br>" + " Any Special Request: " + request;
window.location.hash = '#result';
};
</script>
</body>
</html>
var Fname = document.getElementById("fname").value;
var Lname = document.getElementById("lname").value;
var date = document.getElementById("date").value;
var days = document.getElementById("days").value;
var request = document.getElementById("request").value;
var total = "";
function myFunction() {
var val = Number(document.getElementById("room").value);
var n = Number(document.getElementById("days").value);
if (n <= 0) {
console.log(n);
prompt(" minimum reservation period is 1 day try again");
} else if (val == "King $30") {
total = n * 30;
} else if (val == "Double $20") {
total = n * 20;
} else if (val == "Single $10") {
total = n * 10;
} else {}
document.getElementById("result").innerHTML = " Dear " + Fname + Lname + " , thank you for booking with us." +
"<br>" + " Expected Arrival Date: " + date +
"<br>" + " Booked: " + val + " for " + n + "days " +
"<br>" + "Amount:=$ " + total +
"<br>" + " Any Special Request: " + request;
};
<h3> Hotel Registration Form </h3>
<p style="color:green">BOOK YOUR STAY WITH US...!</p>
<form>
<label><b> GUEST:</b> </label>
<input type="text" id="fname" size="20">
<input type="text" id="lname" size="20">
<br>
<label style="margin-left:65px"> First Name </label>
<label style="margin-left:105px"> Last Name </label>
<br><br>
<label><b>Arrival Date:</b></label>
<input type="date" id="date">
<br><br>
<label><b>Room Type:</b></label>
<select id="room">
<option value=30>King $30</option>
<option value=20>Double $20</option>
<option value=10>Single $10</option>
</select>
<br><br>
<label><b> Number of Days:</b></label>
<input type="number" id="days"><span id="demo"></span>
<br><br>
<label><b> Any Special Request:</b></label>
<br>
<textarea rows="5" cols="50" id="request"></textarea>
<br>
<button type="reset" STYLE="background-color:red;border:offset;"> CLEAR </button>
<button type="submit" onClick="myFunction()" STYLE="background-color:red;border:offset;"> BOOK </button>
</form>
<p style="background-color:blue;" id="result"> </p>
Try this it will work:
your function was unable to access the variables
I'm trying to have it so when the user enters a number below 1 and higher than 20, they will get an error code and it will be highlighted yellow. When the user clicks the greet button, the text from before should disappear.
Right now with the highlight code I have it works but it messes up my disappearing of the text. For example, when I say 2, and then 22, the text from 2 doesn't disappear. When I do 22, then 2, the text disappears. I'm not sure if I have the layout wrong, or I need to use a different way. Lost on what is causing my issues.
function greetMe() {
$('#errors').css("background-color", "white");
var name = document.getElementById('txtName').value;
var nr = document.getElementById('txtNmr').value;
if (nr > 0 && nr < 21) {
$('#errors').text('');
$('#greetings').text('');
for (var counter = 0; counter < nr; counter = counter + 1) {
$('#greetings').append("Hello, " + name + "<br />");
}
} else {
$('#errors').append("Please Enter A Number Between 1 and 20");
$('#errors').css("background-color", "yellow");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
You need to set the text of #errors and #greetings to an empty string before the if/else statement. Otherwise, the text will only be removed if the input is valid and not otherwise since you are only setting the text of those elements inside the if statement and not the else part.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js" ></script>
<body>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
<script type="text/javascript">
function greetMe(){
$('#errors').css("background-color", "white");
var name = document.getElementById('txtName').value;
var nr = document.getElementById('txtNmr').value;
$('#errors').text('');
$('#greetings').text('');
if (nr > 0 && nr < 21){
for (var counter = 0; counter < nr; counter = counter + 1) {
$('#greetings').append("Hello, " + name + "<br />");
}
}
else{
$('#errors').append("Please Enter A Number Between 1 and 20");
$('#errors').css("background-color", "yellow");
}
}
</script>
</body>
JSFiddle: http://jsfiddle.net/tsgh3o6u/
Just write the below piece of code:
$('#errors').text('');
$('#greetings').text('');
outside of the if/else statement, it solves your problem.
There is another way to empty a div element using the following piece of code:
$('#errors').html('');
$('#greetings').html('');
It also solves your problem, I have attached working example of it:
function greetMe(){
$('#errors').css("background-color", "white");
var name = document.getElementById('txtName').value;
var nr = document.getElementById('txtNmr').value;
$('#errors').html('');
$('#greetings').html('');
if (nr > 0 && nr < 21) {
for (var counter = 0; counter < nr; counter = counter + 1) { $('#greetings').append("Hello, " + name + "<br />");
}
}
else{
$('#errors').append("Please Enter A Number Between 1 and 20");
$('#errors').css("background-color", "yellow");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
Hope, it solves your problem.
You can use .empty() function of jquery to clear the content of the div and you have to clear the div content before checking the conditions.
function greetMe() {
$("#errors").css("background-color", "white");
var name = document.getElementById("txtName").value;
var nr = document.getElementById("txtNmr").value;
$("#errors").empty();
$("#greetings").empty();
if (nr > 0 && nr < 21) {
for (var counter = 0; counter < nr; counter = counter + 1) {
$("#greetings").append("Hello, " + name + "<br />");
}
} else {
$("#errors").append("Please Enter A Number Between 1 and 20");
$("#errors").css("background-color", "yellow");
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Type in your name</p>
<input type="text" id="txtName">
<p>Enter a number 1-20.</p>
<input type="text" id="txtNmr">
<input type="button" value="Greet Me!" onclick="greetMe()">
<hr>
<div id="greetings">
<!-- Section to output the greeting -->
</div>
<div id="errors">
<!-- Section to output the greeting -->
</div>
How would i add a cost for the check boxes. When i add a onClick it said myFunction was not defined. I Don't know what i am doing. I was trying to make a check with the second function so if it was checked it would add the costs together and make a subtotal but i cant get it to work or find a way to get the costs to be a value in the check boxes
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep" > Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="ch" >Cheese + 4$<br>
<br>
<input type="button" onClick="myFunction()" value="Send order"><br>
<input type="button" onClick="cost()" value="Get cost" > <br>
<input type="text" id="order" size="50">
</form>
<script type="text/javascript">
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) { // this shows the you ordered the pizza with blank topping
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var x = document.getElementById(pep).checked; // this is the failed check and i dont know how to fix it and get it to add a cost
document.getElementById("demo").innerhtml = x;
}
</script>
<p id="demo"></p>
</body>
</html>
answer that https://stackoverflow.com/users/7488236/manish-poduval got
<html>
<body>
<p>A pizza is 13 dollars with no toppings.</p>
<form action="form_action.asp">
<input type="checkbox" name="pizza" value="Pepperoni" id="pep">Pepperoni + 5$<br>
<input type="checkbox" name="pizza" value="Cheese" id="che">Cheese + 4$<br>
<br>
<input type="button" onclick="myFunction()" value="Send order">
<input type="button" onclick="cost()" value="Get cost">
<br><br>
<input type="text" id="order" size="50">
</form>
<script>
function myFunction() {
var pizza = document.forms[0];
var txt = "";
var i;
for (i = 0; i < pizza.length; i++) {
if (pizza[i].checked) {
txt = txt + pizza[i].value + " ";
}
}
document.getElementById("order").value = "You ordered a pizza with: " + txt;
}
function cost() {
var pep = 5;
var che = 4;
var pizza = 13;
var total = 0;
if (document.getElementById("pep").checked === true) {
total += pep;
}
if (document.getElementById("che").checked === true) {
total += che;
}
document.getElementById("order").value = "The cost is : " + total;
}
</script>
</body>
</html>
document.getElementById("pep").checked;
You have not written this line properly. after this check the value of x if it is true then add the value 5$ to 13$ and sum it up the cost and display it on a text field.
Let me know if it works or not.
<script>
var monster = 40
var damage = Math.floor(Math.random()*10)
</script>
<p>Type 'Spark' or 'Fire' to Attack.</p>
<form action="javascript:alert( 'Enemy has' + (monster- damage) + 'Health!' );"
>
<div>
<input type="text">
<input type="submit">
</div>
</form>
<span></span>
</body>
So this is my code so far I type anything in it gives me a text box saying the Enemy has whatever health, I would like to have it where only if you type spark or fire into the input field you get that text box and if you type something random like skdfslkfha nothing happens (unlike now :/)
JS Fiddle
html
<form action="javascript:ale()">
<div>
<input type="text" id="find">
<input type="submit">
</div>
</form>
javascript
function ale() {
a = document.getElementById("find").value
if (a == 'Spark' || a == 'Fire') {
var monster = 40
var damage = Math.floor(Math.random() * 10)
alert('Enemy has ' + (monster - damage) + ' Health!');
}
else{
alert('worng keyword');
}
}
I'm new to Stack and this is my first question, but I did search and wasn't able to find anything that was specifically what I am trying to accomplish. I'm all for learning, so any reference material that would help me better understand how to approach this would be appreciated, but if someone wants to provide some example code I wouldn't mind that either :p
OK, so the scenario is this. I am writing a "Note Creator" that will generate automatic client notes based on some fields I enter into a form. I've already scripting getting the values from text fields, but I have one field that I want to be a combination of a radio option OR text field, and the java needs to grab whichever one was used and the proper value. Any help is appreciated, below is my code:
<script type="text/javascript">
function getNotes() {
//Grab Variables
spokeTo = document.thisForm.spokeWith.value;
problemItem = document.thisForm.problemWith.value;
resolvedBy = document.thisForm.resolvedWith.value;
thisTech = document.thisForm.techName.value;
fSpace = "... "
//Read in the location information and prep the output container
outputValue = "";
{
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else if (problemItem == "") { alert('Please Select the Problem.'); }
else if (resolvedBy == "") { alert('Please Type Your Resolution.'); }
else {
//The loop that puts the output together
outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemItem + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
}
</script>
<form name="thisForm">
<p>
1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith">
</p>
<p>
2. Called About:
Hardware <input type="radio" id="problemWith" class="input" name="problemWith" value="Hardware">
Software <input type="radio" id="problemWith" class="input" name="problemWith" value="Software">
<input type="text" id="problemWith" class="input" name="problemWith"><br>
</p>
<p>
3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>
4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
I am referring specifically to The Step 2 section of the form where it has radio options and a text field with the same IDs and names. I know IDs are only supposed to be used once per page so this would probably change but I'm open to any suggestion/assistance. I'm moderate with Javascript, still in the learning phases.
Thanks again!
---------------
ROUND 2
---------------
Here is my revised code after taking the suggestion of the provided answer. I added a bunch of alerts to kind of let me know along the way which parts of the script I'm managing to hit, and I can't get anything past the first alert to trigger, and can't get any output at all anymore. What am I missing?
<script type="text/javascript">
function getNotes() {
alert('You\'ve hit the function. Congratulations - you didn\'t break the whole damn thing.');
//Grab Variables
var spokeTo = document.thisForm.spokeWith.value;
var resolvedBy = document.thisForm.resolvedWith.value;
var thisTech = document.thisForm.techName.value;
var fSpace = "… ";
//Grab if radio else text
var inputVal1 = document.getElementByClass('problemRadio').value;
var inputVal2 = document.getElementByClass('problemWith').value;
alert('You made it! Almost there.');
// If Input Value 1 is not Null, Show Radio Value. Else, show Text Value
var problemOutput;
if (inputVal1.length > 0) {
problemOutput = inputVal1;
alert('I found value 1!');
}
else {
problemOutput = inputVal2;
alert('I found value 2!');
}
//Read in the location information and prep the output container
outputValue = "";
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else {
alert('We Made it to Else to parse outputValue');
//The loop that puts the output together
outputValue += "Spoke With: " + spokeTo + "\n\n" + "Called About: " + problemOutput + "\n\n" + "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
</script>
<form name="thisForm">
<p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"></p>
<p>2. Called About:
Hardware <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Hardware">
Software <input type="radio" id="problemRadio" class="problemRadio" name="problemRadio" value="Software">
<input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
</p>
<p>3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
sorry about that, I don't know the best way to get code in here yet. Always ends up messy looking ( till I figure it out )
Few things I spotted in your update;
1) getElementbyId is best ( it wasn't getting past your first lines)
2) duplicate IDs on the radio buttons
3) We Needed to 'check' which of the radio buttons was checked
4) always handy to alert the variables ( I've added some in to show )
I gave this code below a rough test and it looks to be along the lines ..
see comments added in your code below ..
<script type="text/javascript">
function getNotes() {
//Grab Variables
var spokeTo = document.getElementById('spokeWith').value;
var resolvedBy = document.getElementById('resolvedWith').value;
var thisTech = document.getElementById('techName').value;
var fSpace = "… ";
alert("spokeTo:" + spokeTo
+" , resolvedBy: " +resolvedBy+", thisTech: "+thisTech);
//Grab if radio else text
var problemWith = document.getElementById('problemWith').value;
alert("problemWith: "+problemWith);
/* set a default value */
var problemOutput="other";
/* if they added no notes */
if((problemWith=="") || ( problemWith==null)) {
/* check which radio is selected if any */
if(document.getElementById('problemHardware').checked) {
problemOutput = document.getElementById('problemHardware').value;
}
if(document.getElementById('problemSoftware').checked) {
problemOutput = document.getElementById('problemSoftware').value;
}
} else {
problemOutput=problemWith;
}
alert("problem output is: "+problemOutput);
alert('You made it! Almost there.');
//Read in the location information and prep the output container
outputValue = "";
//Test if things are blank
if (spokeTo == "") { alert('Please Enter the Name of the Person.'); }
else {
alert('We Made it to Else to parse outputValue');
/* The loop that puts the output together */
outputValue += "Spoke With: "
+ spokeTo + "\n\n"
+ "Called About: "
+ problemOutput + "\n\n"
+ "Resolution: " + resolvedBy +fSpace + thisTech;
}
//output to the user
document.thisForm.outputArea.value = outputValue;
}
</script>
<form name="thisForm">
<p>1. Spoke With: <input type="text" id="spokeWith" class="input" name="spokeWith"> </p>
<p>2. Called About:
Hardware <input type="radio" id="problemHardware" class="problemRadio" name="problemRadio" value="Hardware">
Software <input type="radio" id="problemSoftware" class="problemRadio" name="problemRadio" value="Software">
<input type="text" id="problemWith" class="problemWith" name="problemWith"><br>
</p>
<p>3. Resolved By:<br /><br />
<textarea name="resolvedWith" id="resolvedWith"></textarea>
</p>
<p>4. Your Name:<br>
<input type="text" id="techName" class="input" name="techName" /><br>
</p>
<p>
<input type="button" class="button" value="Make My Notes!" onClick="javascript:getNotes();" />
<input type="reset" class="button" value="Start Over" />
</p>
<br><br>
<textarea name="outputArea" id="outputArea"></textarea>
<p class="finishMessage" id="finishMessage" name="finishMessage"></p>
</form>
one approach would be to check on the value and if else
var input1val = document.getElementById('input1Id').value;
var input2val = document.getElementById('input2Id').value;
var valfromeitherbox = (input1val.length > 0) ? input1val : input2val;
/* UPDATE : ^ is the same as -
var valfromeitherbox;
if(input1val.length > 0) { valfromeitherbox=input1val;
} else { valfromeitherbox=input2val; }
*/
document.getElementById('input3Id').value = valfromeitherbox;
/* if val is empty in input1 use val from text box 2 */
Sorry if a little scrappy , but hope you get the gist and I haven't missed the point