So here's the thing, I want to make a price calculator by letting the user fill up the form but it won't work. Also, I wanted to show the result on the input field. Thank you in advance.
<!doctype HTML>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
</head>
<body>
<form role="form" id="price" name="price">
<select class="" id="itemselect" onchange="calculate()">
<option id="itemprice" value="1.500">Adult's T-Shirt</option>
<option id="itemprice" value="1.250">Kid's T-Shirt</option>
<option id="itemprice" value="3.000">Dubai Polo</option>
<option id="itemprice" value="6.000">Aerocool Polo</option>
<option id="itemprice" value="4.000">Aerocool Crewneck</option>
<option id="itemprice" value="5.000">Hoodies</option>
</select>
<p><input type="text" id="qty" onchange="calculate()" value=""></p>
<p><input type="text" id="result" value="" disabled></p>
</form>
<script type="text/javascript">
function calculate(price){
var item = document.getElementByID("itemselect").value;
var qty = document.getElementByID("qty");
item = parseInt(item);
qty = parseInt(qty);
var result = item*qty;
document.getElementByID("result").value=result;
}
</script>
</body>
</html>
mistakes
Please change getElementByID by getElementById.
parseInt only parse value in integer so you multiplication give you only integer value so you have to parse in float. it's give you perfect output.
<!doctype HTML>
<html lang="en">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>
</title>
<head>
</head>
<body>
<form role="form" id="price" name="price">
<select class="" id="itemselect" onchange="calculate()">
<option id="itemprice" value="1.500">Adult's T-Shirt</option>
<option id="itemprice" value="1.250">Kid's T-Shirt</option>
<option id="itemprice" value="3.000">Dubai Polo</option>
<option id="itemprice" value="6.000">Aerocool Polo</option>
<option id="itemprice" value="4.000">Aerocool Crewneck</option>
<option id="itemprice" value="5.000">Hoodies</option>
</select>
<p><input type="text" id="qty" onchange="calculate()" value=""></p>
<p><input type="text" id="result" value="" disabled></p>
</form>
<script type="text/javascript">
function calculate(price){
var item = document.getElementById("itemselect").value || 0;
var qty = document.getElementById("qty").value || 0;
item = parseFloat(item).toFixed(2);
qty = parseFloat(qty).toFixed(2);
var result = parseFloat(item*qty).toFixed(2);
document.getElementById("result").value=result;
}
</script>
</body>
</html>
Related
Hi I need the help regarding the website backend I did frontend of website such as the layouts and pages using the html and CSS but I'm stuck regarding which language shall I choose I'm currently working on VS code and installed PHP and JavaScript (NodeJS) but failed on both or I don't have enough knowledge about it
<html>
<head>
<!-- Basic -->
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="author" content="" />
<script type="text/javascript">
function callvalue(){
var name = document.getElementById("name").value;
var email = document.getElementById("email").value;
var phone = document.getElementById("Phone").value;
var message = document.getElementById("message").value;
document.writeln("Your info: "+" <br> "+" your name: "+ name +"<br>");
document.writeln("Your info: "+" <br> "+" your email: "+ email +"<br>");
document.writeln("Your info: "+" <br> "+" your phone num: "+ phone +"<br>");
document.writeln("Your info: "+" <br> "+" your message: "+ message +"<br>");
}
</script>
<script type="module">
export{name,email,phone,message};
</script>
And
<form onsubmit="callvalue()">
<div class="form-group">
<label for="exampleInputName1">Name</label>
<input type="text" class="form-control" id="name">
</div>
<div class="form-group">
<label for="exampleInputNumber1">Phone Number</label>
<input type="text" class="form-control" id="Phone">
</div>
<div class="form-group">
<label for="exampleInputEmail1">Email</label>
<input type="email" class="form-control" id="email">
</div>
<div class="form-group ">
<label for="inputState">Select medicine</label>
<select id="inputState" class="form-control">
<option selected>Medicine 1</option>
<option selected>Medicine 2</option>
<option selected>Medicine 3</option>
<option selected>Medicine 4</option>
<option selected>Medicine 5</option>
<option selected>Medicine 6</option>
</select>
</div>
<div class="form-group">
<label for="exampleInputMessage">Message</label>
<input type="text" class="form-control" id="message">
</div>
<button type="submit" class="btn btn-success">Send</button>
</form>
I want the variables to store these data from this form in MS Sql server but in JavaScript while using import I faced various error like ERR Module and my contact.html isn't coming in options so is it possible send these variable from python or JavaScript plz let me know
I have this table with some dependent information that uses Javascript and there is an Add and check button to insert elements dynamically in the table and a delete button for each row to delete. When I click the "add and check" button, a set of rows gets added to the table.
Here is what I have:
Javascript and HTML Code...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Game</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="robots" content="index,follow" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div class="contanier">
<div class="row">
<div class="col-sm-6" style="padding:20px; border-right:1px solid #000;">
<div class="form-group">
<label for="email">First Number</label>
<input type="number" name="number1" class="form-control" id="number1" min="1">
</div>
<div class="form-group">
<label for="pwd">Second Number</label>
<input type="number" name="number2" class="form-control" id="number2" min="1" >
</div>
<div class="form-group">
<label for="pwd">Amount</label>
<input type="number" name="amount" class="form-control" id="amount" min="1" >
</div>
<button type="button" id="addbtn" class="btn btn-primary">Add and Check</button>
</div>
<div class="col-sm-6">
<h4 class="text-center">Result</h4>
<div id="main_box">
<div>
<input type="checkbox" name="style" value="classical" onchange="add()">
<label>Remove Doublets</label></div>
<table id="result" class="table table-striped">
<tbody class="tbody">
<tr>
<th>Number</th><th>Amount</th><th>Action</th>
</tr>
</tbody>
</table>
<h3>Total Amount:<span id="totl">0</span></h3>
<form action="" method="post" >
<div id="inputs">
</div>
<input type="hidden" name="user_id" value="22">
<input type="hidden" name="game_id" value="111">
<input type="submit" name="save_data" class=" btn btn-danger" value="SAVE" >
</form>
</div>
</div>
</div>
</div>
<script>
var indx=1;
var total_amount = 0;
$("#addbtn").click(function(){
var number = jQuery('#number1').val();
var number2 = jQuery('#number2').val();;
var amount = parseInt(jQuery('#amount').val());
if(number!="" && number2!="" && amount!="")
{
const arr_num_first = Array.from(String(number));
const arr_num_second = Array.from(String(number2));
for (let numOf_f_array of arr_num_first)
{
for (let numOf_s_array of arr_num_second)
{
total_amount = total_amount+amount;
var new_number = numOf_f_array+""+numOf_s_array;
$('.tbody').append("<tr class='input"+indx+"' ><td>"+new_number+"</td><td>"+amount+"</td><td><button class='dlt' data-am='"+amount+"' data-c='input"+indx+"'>X</button></td><tr>");
$('#inputs').append("<input type='hidden' name='num[]' value='"+new_number+"' class='input"+indx+"' >");
$('#inputs').append("<input type='hidden' name='amount[]' value='"+amount+"' class='input"+indx+"' >");
indx++;
}
}
$('#totl').html(total_amount);
}else{ alert('Fill all fields')}
});
$( "#main_box" ).on( "click",".dlt", function() {
var classname = $(this).attr('data-c');
var dlt_amount = parseInt($(this).attr('data-am'));
var new_total = total_amount-dlt_amount;
total_amount = new_total;
$('#totl').html(new_total);
$('.'+classname).remove();
});
</script>
</body>
</html>
I've been studying Angular.js for my term exams and was working on the following code related to Angular.js forms.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.8.2/angular-csp.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<title>Practical 12</title>
</head>
<body>
<div ng-app="formApp" ng-controller="formCtrl">
<form name="festForm" novalidate ng-submit="sendForm(x)">
<h2>Registration form for tech event</h2>
<table>
<tr>
<td>
<label for="fname">First Name</label>
<input type="text" name="fname" id="fname" ng-model="x.fname" >
<!-- <span ng-show="festForm.fname.$error.required">*enter first name</span> -->
</td>
</tr>
<tr>
<input type="submit" value="SUBMIT">
</tr>
</table>
</form>
<p>{{userdata}}</p>
</div>
<script>
var app=angular.module("formApp",[])
app.controller("formCtrl",function($scope){
$scope.userdata="";
$scope.sendForm=function(fest){
$scope.msg="Form Validated"
$scope.userdata=angular.copy(fest);
console.log(fest)
}
})
</script>
</body>
</html>
Following is the output of the following code
I am not able to understand the flow how my argument fest passed in the sendform function gets converted into javascript object.
I have a multiples select elements, and I submit them with one button. Here is an example :
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="inner">
<form method="POST" action="test">
<label name="first">first</label>
<select style="display:inline-block">
<option value="value1" name ="value1">test 1 </option>
<option value="value2" name= "value2">test 2</option>
</select>
<label name="second">second</label>
<select style="display:inline-block">
<option value="4">1</option>
<option value="5">2</option>
<option value="6">3</option>
<input type="submit" value="Submit" class="button" >
</form>
</div>
</body>
</html>
and I'm trying to handle them using nodejs and express as follows:
const express = require('express');
const app = express()
var path = require('path')
var fs = require('fs')
app.use(express.static('public'))
app.use(express.urlencoded())
console.log(__dirname)
app.get('/',function(req,res){
res.sendFile(path.join(__dirname+'/index.html'))
})
app.post('/test', (req, res) => {
console.log(req.body.value1)
})
app.listen(2000)
apparently it's not correct, so my question is how can I do it?
thanks in advance !
You have done mistakes while writing html I think.
First you have to add name attribute to select boxes, so you can use values on server side.
Secondly you didn't closed second select element.
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv='X-UA-Compatible' content='IE=edge'>
<title>Page Title</title>
<meta name='viewport' content='width=device-width, initial-scale=1'>
</head>
<body>
<div class="inner">
<form method="POST" action="test">
<label name="first">first</label>
<select style="display:inline-block" name='select_box_1'>
<option value="value1" name ="value1">test 1 </option>
<option value="value2" name= "value2">test 2</option>
</select>
<label name="second">second</label>
<select style="display:inline-block" name="select_box_2">
<option value="4">1</option>
<option value="5">2</option>
<option value="6">3</option>
</select>
<input type="submit" value="Submit" class="button" >
</form>
</div>
</body>
</html>
I have a function with input var is name of Form and ID of input. Now I want to get the value of password input. The problem is I have some input with same ID but in different form. So I want a flexible way to get its value when I know its form.
I have tried
var x = Form_Name.ID_Name.value;
but it doesn't work. So please tell me how to get the value of password input by a flexible way. Thanks so much. Below is my code:
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check(Form_Name, ID_Name)
{
alert(document.getElementById(ID_Name).value);
alert(Form_Name);
var x = Form_Name.ID_Name.value;
alert(x);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check('MainForm','ID')"> Click Me </button>
</div>
</body>
</html>
I have created another button for you to get password.
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check(Form_Name, ID_Name)
{
alert(document.getElementById(ID_Name).value);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check('MainForm','ID')"> Click Me for ID </button>
<button value="click Me" onclick="check('MainForm','Pass')"> Click Me for Password</button>
</div>
</body>
</html>
Optimized way:
You can achieve it using the same button as well, by passing an array of ID's.
Let me know, I can help more on this.
Access username and password using it's id.
<html>
<head>
<meta http-equiv="content-type" content="text/html" />
<meta name="author" content="lolkittens" />
<script charset="utf-8" type="text/javascript">
function check()
{
var username = document.getElementById("ID").value;
var password = document.getElementById("Pass").value;
alert("Username: "+username+" Password: "+password);
}
</script>
<title>Untitled 1</title>
</head>
<body>
<div id="main" style="width: 300px; height: 200px;">
<form name="MainForm" id="MainForm">
<input id="ID" name="ID" type="text" size="20"/>
<input id="Pass" name="Pass" type="password" size="20"/>
</form>
<button value="click Me" onclick="check()"> Click Me </button>
</div>
</body>
</html>