I am using bracket editor when I save the bill.js editor show some
error at every document the desired output is not coming.
HTML code is
<!DOCTYPE html>
<html lang="en">
<head>
<title>split Bill</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="splitbill.css">
</head>
<body>
<div id="container">
<h1>Bill calculator</h1>
<div id="calculator">
<form>
<label>
How Much your Bill ? <br>
Rupees <input type="text" id="billAmount">
</label>
<label>
How was your Service sir?<br>
<select id="serviceFeedback">
<option disabled selected value="0">
--Choose an option--
</option>
<option value="0.4">
40% -Very Good
</option>
<option value="0.3">
30% - Good
</option>
<option value="0.2">
20% - it was Ok
</option>
<option value="0.1">
10% - Bad
</option>
<option value="0.05">
5% - poor
</option>
</select>
</label>
<label>
How many people sharing the bill?<br>
<input type="text" id="totalpeople">
people
</label>
<button type="button" id="calculate">calculate!</button>
</form>
</div>
<div id="totalTip">
<sup>Rupees</sup><span id="tip">0.00 </span>
<small id="each">each</small>
</div>
</div>
<script type="text/javascript" src="bill.js"></script>
</body>
</html>
javascript is here I didn't get desired output at every document function there is error sign please tell me what I do I am using bracket editor.
why I got this I am using
at the end of HTML code
//create function
function calculateTip() {
var billAmount = document.getElementById("billAmount").value;
var serviceFeedback = document.getElementById("serviceFeedback").value;
var numpeople =document.getElementById("totalpeople").value;
//validation
if (billAmount =="" ||serviceFeedback == 0) {
window.alert("please enter some value Boss!");
return;
}
//if input is empty
if (numpeople =="" ||numpeople <= 1) {
numpeople =1;
document.getElementById("each").style.display ="none";
} else {
document.getElementById("each").style.display ="block";
}
var total = (billAmount * serviceFeedback) / numpeople;
total = Math.round(total * 100) / 100;
total = total.toFixed(2);
//display the tip
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
// hide tip amount
document.getElementById("totalTip").style.display ="none";
document.getElementById("each").style.display ="none";
//clicking the button calls our custom function
document.getElementById("calculate").onclick=function()
{
calculateTip();
}
In the function "calculateTip" I found the line:
if (billAmount =="" || ServiceFeedback == 0) {
Here ServiceFeedback starts with a capital letter instead of a lower case letter.
The selected option of a select-Field you get like that:
let selectElement = document.getElementById("serviceFeedback");
let serviceFeedback = selectElement.option[selectElement.selectedIndex].value;
In the html file I found an other problem:
<input type="text" id="totalpeople ">
There is a blank at the end of the id! Better would be:
<input type="text" id="totalpeople">
In the javascript file there is an other blank:
document.getElementById("each").style.display = " none";
Better would be:
document.getElementById("each").style.display = "none";
I hope that helps.
To ReferenceError: document is not defined I found that:
ReferenceError: document is not defined (in plain JavaScript)
=> My questions are:
What does bill.js contain?
Where is calculateTip() called?
I mean: Is anywhere a call like that document.getElementsBy... before the document is created?
Related
Im sorry if this is a bit of a novice quest. I've only recently started learning. I'm trying to use jQuery to append a series of input text boxes onto my website but nothing I've tried has worked so far.
HTML doc
<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="testjavascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<head>
<titleTest Web App</title>
<h1>Test Number 1</h1>
</head>
<button onclick="meth_hide_show()">Hide/Show</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
<option value="Pipe_crack">Pipe Crack</option>
</select>
<br>
<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
<option value="N/S">Nature Strip</option>
<option value="Road">Road</option>
<option value="n/s_rd">Nature Strip & Road</option>
</select>
<form>
<label for="meters">Number of Meters:</label>
<input type="number" id="ren_meter" name="ren_meter">
</form>
</div>
<button id="save_meth" onclick="appendmethd()">Add Methodology</button>
<div class="meth_append">
</div>
</div>
</html>
Javascript doc:
function meth_hide_show() {
var x = document.getElementById("methodology");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function appendmethd() {
var meth=document.getElementById("methodology")
$("meth_append").append(meth)
}
Try this
function meth_hide_show() {
//retrieve the jquery object
var x = $("#methodology");
if (x.is(':visible')) {
//if its visible, hide it
x.hide();
} else {
//else show it
x.show();
}
}
function appendmethd() {
var meth=$("#methodology");
$(".meth_append").append(meth);
}
I'm trying to create a master card check website where the credit card number, exp date, and CVV will be checked (using JavaScript). If the details are correct, the user will be redirected to another page and the credit card details will be stored in an MYSQL database (using PHP).
I have managed to create the two webpages and the javaScript function is working fine, but the problem is that when a user inputs any incorrect details an alert dialogue will show telling the user to enter the correct (card number, date, ....) WHICH IS WHAT I WANT, but when I click OK it automatically redirects me to the other page and store the details inside the database.
I would like your help in solving this problem so that when a user clicks OK it doesn't redirect to the other webpage, and allows the user to correct the details.
I tried putting onsubmit = "return false" inside the , which worked and allowed the user to re-edit the details, but when it redirects the user to another webpage the PHP/MySQL says "UNDEFINED INDEX" for the fields. I tried removing onsubmit = "return false" and the "UNDEFINED INDEX" error disappeared but the alert dialogue problem reappeared.
Please help with regards to the problem mentioned above.
I tried adding return false after each alert and alert box problem was solved, but the "Undefined Index" mysql error showed for the second page.
HTML CODE FOR FIRST WEBPAGE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payment Page</title>
<link rel="stylesheet" href='form-style.css' type='text/css' />
</head>
<body>
<div class="mail">
<h2 style="margin-left:0px;">Payment Options</h2>
<hr>
<div id="CardImage/Text">
<br>
<img src="mastercard.png" alt="MasterCard" width="100px" height="50px" align="right">
<h3 style="margin-left:90px;"> Debit / Credit Card</h3>
<br>
</div>
<form name="form1" action="secondpage.php" method="post" onsubmit="return false;" >
<div id= "payment" style="margin-left:50px; background: #F0F0F0;">
<div id= "cardNumber">
<label for="cardno">Card Number</label>
<input type="text" name="creditCard" id="creditCard" style="width:300px;">
</div>
<br>
<div id="date">
<label for="Expiration">Expiration Date</label>
<select id= "month" name="month">
<option selected value="month">Month</option>
<option value="January">January</option>
<option value="February">February</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="August">August</option>
<option value="september">September</option>
<option value="october">October</option>
<option value="november">November</option>
<option value="december">December</option>
</select>
<select id= "year" name="year">
<option selected value="year">Year</option>
<option value="2020">2020</option>
<option value="2021">2021</option>
<option value="2022">2022</option>
<option value="2023">2023</option>
<option value="2024">2024</option>
<option value="2025">2025</option>
<option value="2026">2026</option>
</select>
</div>
<br>
<div id= "securityCode">
<label for="cvv">Security Code</label>
<input type="text" name="cvv" id="cvv" style="width:100px;">
<p>(3-4 digit code normally on the back of your card)</p>
</div>
<br>
<button type="submit" id="submit-button" onclick="cardCheck(document.form1.payment)">Continue</button>
</form>
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
HTML/PHP CODE FOR SECOND WEBPAGE
<?php
$servername = "localhost";
$database = "creditCard";
$username = "root";
$password = "";
// Create connection
$conn = mysqli_connect($servername, $username, $password, $database);
// Check connection
if (!$conn) {
die("Connection failed: " . mysqli_connect_error());
}
echo "Connected successfully";
$sql = "INSERT INTO card (ccnum, expmonth, expyear, seccode)
VALUES ('$_POST[creditCard]','$_POST[month]','$_POST[year]','$_POST[cvv]')";
if (mysqli_query($conn, $sql)) {
echo "New record created successfully";
} else {
echo "Error: " . $sql . "<br>" . mysqli_error($conn);
}
mysqli_close($conn);
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Payment Successful</title>
<link rel="stylesheet" href='form-style.css' type='text/css' />
</head>
<body>
<div class="mail">
<h2 style="margin-left:0px;">You have successfully entered your credit card details</h2>
<hr>
<div id="CardImage/Text">
<br>
<img src="mastercard.png" alt="MasterCard" width="100px" height="50px" align="right">
<h3 style="margin-left:90px;"> Debit / Credit Card</h3>
<br>
</div>
<div id= "successPaymentConsole" style="margin-left:50px; padding-bottom:200px">
</div>
<script src="credit-card-master-validation.js"></script>
</body>
</html>
JavaScript Code
function cardCheck()
{
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
window.location.href = "secondpage.php";
} else {
alert("Please input a correct CVV");
}
} else {
alert("Please select a year");
}
} else {
alert("Please select a month");
}
} else {
alert("Not a valid Mastercard number!");
}
}
When you use return false then you switch off the default submit behavior. Then you do a simple redirection by changing href - so the form does not pass the data to the second page (all the $_POST data is empty) - that's why you have the error. So - what you can do:
Add id param to the form, eg:
<form id="creditCardForm" name="form1" action="secondpage.php" method="post" >
and then use preventDefault in your cardCheck function. It will prevent the form submission so you have to submit the form manually if the data is fine:
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
document.getElementById("creditCardForm").submit(); //here's the form submittion
} else {
alert("Please input a correct CVV");
}
} else {
alert("Please select a year");
}
} else {
alert("Please select a month");
}
} else {
alert("Not a valid Mastercard number!");
}
}
Didn't try it, but hopefully it will help you to solve the problem.
Remove the onsubmit attribute from your <form> element in the HTML. Try to use addEventListener in JavaScript to listen for events.
If we use the cardCheck function as the callback to the submit event, we can control inside the function what will happen with the event. Using event.preventDefault will prevent the form from submitting. When you use event.preventDefault in, for example a click event, it will prevent the default click behavior. So now the form won't submit and you can give it the behavior you want.
I've modified your nested if statements to a structure which does not require nesting. In my opinion, this is much more readable. The return keyword is essential in this. Whenever an if statement is true, the function will stop. Only if all the if statements result in false, (which means all input is correct) the user will be routed to the next page.
var form = document.querySelector('form[name="form1"]');
form.addEventListener('submit', cardCheck);
function cardCheck(event)
{
// Don't execute the default submit behavior.
event.preventDefault();
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if (!enteredCardNo.match(cardNo)) {
alert("Not a valid Mastercard number!");
return;
}
if (monthSelectedValue === "month") {
alert("Please select a month");
return;
}
if (yearSelectedValue === "year") {
alert("Please select a year");
return;
}
if (!(enteredCVV.length > 2 && enteredCVV.length < 5)) {
alert("Please input a correct CVV");
return;
}
window.location.href = "secondpage.php";
}
One way to resolve this problem is by using only onsubmit.
Remove onclick from the Continue(submit) button
<button type="submit" id="submit-button">Continue</button>
Change the form element so that it calls cardCheck on submit like below
<form name="form1" action="secondpage.php" method="post" onsubmit="return cardCheck(document.form1.payment)">
Inside you cardCheck if everything is alright return true else return false. Also remove the submit() call. Here is the updated code
function cardCheck()
{
event.preventDefault(); //here you prevent it from being submitted every time
var enteredCardNo = document.getElementById("creditCard").value;
var cardNo = /^(?:5[1-5][0-9]{14})$/;
var mon = document.getElementById("month");
var monthSelectedValue = mon.options[mon.selectedIndex].value;
var year = document.getElementById("year");
var yearSelectedValue = year.options[year.selectedIndex].value;
var enteredCVV = document.getElementById("cvv").value;
if(enteredCardNo.match(cardNo)) {
if(monthSelectedValue != "month") {
if(yearSelectedValue !="year") {
if(enteredCVV.length > 2 && enteredCVV.length < 5) {
return true;
} else {
alert("Please input a correct CVV");
return false;
}
} else {
alert("Please select a year");
return false;
}
} else {
alert("Please select a month");
return false;
}
} else {
alert("Not a valid Mastercard number!");
}
}
This question already has answers here:
How do I get the value of text input field using JavaScript?
(16 answers)
Closed 3 years ago.
Below is my code. I'm assuming the problem is coming from my function maybe involving a string where a number value should be or something of that nature. Pretty new at this so I can't quite pinpoint what exactly is causing the NaN response after hitting calculate. Thank you for your help.
console.log("Connected")
function calculateTip() {
var billAmt = document.getElementById("price")
var service = document.getElementById("service")
var tip = document.getElementById("tip")
var numOfPpl = document.getElementById("numOfPpl")
// validate input
if (billAmt === "" || service === 0) {
alert("please enter values");
return;
}
//check to see if this input is empty or less than or equal to 1
if (numOfPpl === "" || numOfPpl <= 1) {
numOfPpl = 1;
document.getElementById("each").style.display = "none";
} else {
document.getElementById("each").style.display = "block";
}
// calculate tip
var total = (billAmt * service) / numOfPpl;
total = Math.round(total * 100) / 100;
//next line allows us to always have two digits after a decimal point
total = total.toFixed(2);
//Display the tipdocument.getElementById("")
document.getElementById("totalTip").style.display = "block"
tip.innerHTML = total;
}
//hide tip amoiunt on load
document.getElementById("totalTip").style.display = "none"
document.getElementById("each").style.display = "none"
// click to call funciton
document.getElementById("calculate").onclick = function() {
calculateTip();
};
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tip calculator</title>
</head>
<body>
<div class="container">
<h1>Tip calculator</h1>
<form>
<p id="quesiton">How much was your bill?</p>
$ <input type="text" id="price" placeholder="Bill Amount">
<p id="question">How was your service?</p>
<select id="service">
<option disabled selected value="0">Choose an Option</option>
<option value="0.3">30% - Outstanding</option>
<option value="0.2">20% - Good </option>
<option value="0.15">15% - OK</option>
<option value=".05">5% - Poor</option>
</select>
</form>
<p>How many people are sharing the bill</p>
<input id="numOfPpl" type="text" placeholder="Number of People" /> people
<button type="button" id="calculate">Calculate!</button>
</div>
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>
</div>
</body>
</html>
As per other responses, you need to fetch the value instead of elements by putting a .value at the end.
I've fixed this here https://jsfiddle.net/vfcsh6qb/
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>tip calculator</title>
</head>
<body>
<div class="container">
<h1>Tip calculator</h1>
<form>
<p id="quesiton">How much was your bill?</p>
$ <input type="text" id="price" placeholder="Bill Amount">
<p id="question">How was your service?</p>
<select id="service">
<option disabled selected value="0">Choose an Option</option>
<option value="0.3">30% - Outstanding</option>
<option value="0.2">20% - Good </option>
<option value="0.15">15% - OK</option>
<option value=".05">5% - Poor</option>
</select>
</form>
<p>How many people are sharing the bill</p>
<input id="numOfPpl" type="text" placeholder="Number of People"> people
<button type="button" id="calculate">Calculate!</button>
</div>
<div id="totalTip">
<sup>$</sup><span id="tip">0.00</span>
<small id="each">each</small>
</div>
<script type="text/javascript" src="tip.js"></script>
</body>
</html>
JS
console.log("Connected")
function calculateTip(){
var billAmt = document.getElementById("price").value;
var service = document.getElementById("service").value;
var tip = document.getElementById("tip").innerText;
var numOfPpl = document.getElementById("numOfPpl").value;
// validate input
if(billAmt === "" || service === 0){
alert("please enter values");
return;
}
//check to see if this input is empty or less than or equal to 1
if (numOfPpl === "" || numOfPpl <= 1){
numOfPpl = 1;
document.getElementById("each").style.display = "none";
} else {
document.getElementById("each").style.display = "block";
}
// calculate tip
var total = (billAmt*service) / numOfPpl;
alert(total)
total = Math.round(total * 100) / 100;
//next line allows us to always have two digits after a decimal point
total = total.toFixed(2);
//Display the tipdocument.getElementById("")
document.getElementById("totalTip").style.display = "block"
tip.innerHTML = total;
}
//hide tip amoiunt on load
document.getElementById("totalTip").style.display = "none"
document.getElementById("each").style.display = "none"
// click to call funciton
document.getElementById("calculate").onclick = function(){
calculateTip();
};
The problem is that you are not declaring the variables correctly.
You must add .valueto document.getElementById("id") in order to receive the value of the input or the select
I am reading a value from HTML adding 1 to that that number and then updating the number within the HTML. When I do this, it returns the number back into the HTML as NaN.
I've tried using parseInt() and Number() but I still get the same output.
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" type="text/css" rel="stylesheet">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<div class="inputForm">
<form id="frm1" onsubmit="return formSubmit()">
<h3>Update League Table!</h3>
<section class="playerOne">
<label for="playerOne">Player One Name:</label>
<select name="playerOne" id="playerOne">
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
</section>
<br>
<section class="playerTwo">
<label class="playerTwoText" for="playerTwo">Player Two Name:</label>
<select name="playerTwo" id="playerTwo">
<option value="name1">name1</option>
<option value="name2">name2</option>
<option value="name3">name3</option>
<option value="name4">name4</option>
</select>
<br>
</section>
<br>
<section class="winner">
<span>Please select winner:</span>
<br>
<input id="userOne" type="radio" name="winnerWinner" value="userOne">
<label for="userOne">Player One</label>
<input id="userTwo" type="radio" name="winnerWinner" value="userTwo">
<label for="userTwo">Player Two</label>
</section>
<br>
<section class="submission">
<input type="submit" value="Submit">
</section>
<p id="submitComplete">testing</p>
<p id="name1GP">0</p><p id="name1Wins">0</p>
</form>
</div>
</body>
</html>
JAVASCRIPT
function formSubmit() {
var p1 = document.getElementById("playerOne").value;
var p2 = document.getElementById("playerTwo").value;
var radiobox = document.querySelector('input[name="winnerWinner"]:checked').value;
if (p1 === "name1" && radiobox === "userOne") {
var name1GP = document.getElementById("name1GP").value;
name1GP += 1
document.getElementById("name1GP").innerHTML = name1GP
}
return false;
}
The value I am reading is id="name1GP" I want to add 1 to this value and then return it to the HTML, however instead of returning 1 it returns NaN.
A paragraph element doesn't have a .value. You need to get the innerHTML as an int.
if (p1 === "name1" && radiobox === "userOne") {
var name1GP = parseInt(document.getElementById("name1GP").innerHTML);
name1GP += 1
document.getElementById("name1GP").innerHTML = name1GP
}
A p tag is not supposed to have any value property, you should probably have used var name1GP = parseInt(document.getElementById("name1GP").innerHTML, 10);
var val = document.getElementById('test').value;
console.log(val);
var val2 = document.getElementById('test').innerHTML;
console.log(val2, typeof val2);
var val3 = parseInt(document.getElementById('test').innerHTML, 10);
console.log(val3, typeof val3);
<p id="test">0</p>
try this one.
var name1GP = document.getElementById("name1GP").innerHtml;
name1GP = parseInt(name1GP) + 1
document.getElementById("name1GP").innerHTML = name1GP
Values in HTML are rendered as strings.
A string + a number will result with NaN.
change your code to parse your string into a number:
name1GP = parseInt(document.getElementById("name1GP").value)
and that should do the trick.
I sincerely apologise if this question has been asked already but I'm fairly new to this and couldn't find the answer online...
I am learning about using javascript with html and I am trying to change the html output depending on what the user inputs. Somthing like this:
<!DOCTYPE html>
<html>
<script>
function showCost() {
var registrationJS = document.forms["myForm"]["registration"].value;
var adsJS = document.forms["myForm"]["ads"].value;
var cost = 0;
if (registrationJS == "premium") {
cost += 50;
}
if (ads == "yes") {
cost += 2;
}
cost = '$'+cost;
document.write(cost);
}
</script>
<head>
</head>
<body>
<form name="myForm" method="post">
Registration:<select id="registration">
<option value="premium">Premium</option>
<option value="free">Free</option>
</select>
Pay to get rid of ads?<br>
<input type="radio" id="ads" value="yes">Yes<br>
<input type="radio" id="ads" value="no">No<br>
Cost: <-- display cost -->
<script>showCost(); <-- ???? --> </script>
</form>
</body>
</html>
Basically, how can I make display the cost, and how can I make it so it updates every time I change one of the outputs it will display the new cost?
Btw I am aware that if I make it premium and then free it wont go back down I'm just trying to get the basics of the html part and the syntax... Thank you! :)
make a div:
Cost: <div id = "cost"></div>
and in the function instead of document.write(cost), do
document.getElementById('cost').innerHTML = cost;
to update with user input use suitable event handler: Events
Here is one way you can do, using event listener.
(function(sel,inp) {
function showCost() {
var cost = 0;
if (sel.value == "premium") {
cost += 50;
}
if (inp[0].checked) {
cost += 2;
}
cost = '$'+cost;
document.getElementById('cost').textContent = cost;
}
showCost();
sel.addEventListener('change', function(e) {
showCost(e);
})
for (var i = 0; i < inp.length; i++) {
inp[i].addEventListener('click', function(e) {
showCost(e);
})
}
})(document.querySelector('.registration'),document.querySelectorAll('input'));
<form name="myForm" method="post">
Registration:<select class="registration">
<option value="premium">Premium</option>
<option selected value="free">Free</option>
</select>
<br>
Pay to get rid of ads?<br>
<input type="radio" name="ads" value="yes">Yes<br>
<input type="radio" name="ads" checked value="no">No<br>
Cost:<span id="cost"></span>
</form>