I want to multiply the three numbers entered in three seprate textbox id is(PaperHeight & PaperWidth & Rate) and then get the product in fourth textbox id is (FinalRate)
I want to get the output when the submit button is clicked
following is my code
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate').value;
FinalRate = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="number" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
get the element and then set the value.
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="number" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
Related
I have created a Rate Calculator for wall hanging
where we have to enter dimensions of 3 entities (Picture,Mount ,Frame) that are
width
height
rate
and 4 column is calculation of 3 dimention
Then I have created total rate where the addition of all 4th column is calculated
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
var MountHeight = document.getElementById('MountHeight').value;
var MountWidth = document.getElementById('MountWidth').value;
var MountRate = document.getElementById('MountRate').value;
var MFinalRate = document.getElementById('MFinalRate');
MFinalRate.value = parseInt(2 * MountHeight) + parseInt(2 * MountWidth) * parseInt(MountRate);
var FrameHeight = document.getElementById('FrameHeight').value;
var FrameWidth = document.getElementById('FrameWidth').value;
var FrameRate = document.getElementById('FrameRate').value;
var FrFinalRate = document.getElementById('FrFinalRate');
FrFinalRate.value = parseInt(2 * FrameHeight) + parseInt(2 * FrameWidth) * parseInt(FrameRate);
var TFinalRate = document.getElementById('TFinalRate');
TFinalRate.value = parseInt(FinalRate) + parseInt(MFinalRate) + parseInt(FrFinalRate);
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
Enter the Mount dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="MountWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="MountHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="MountRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="MFinalRate">
</div>
</div>
</div>
</div>
Enter the Frame dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="FrameWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="FrameHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="FrameRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FrFinalRate">
</div>
</div>
</div>
</div>
Total Rate is<br/>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="TFinalRate">
<div class="col">
</div>
<br>
<div class="col">
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</div>
</div>
</center>
<script src="script.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
but when u click on submit it shows NAN in total Rate
there is only one error is that you haven't take the value of TFinalRate.value = parseInt(FinalRate.value) + parseInt(MFinalRate.value) + parseInt(FrFinalRate.value);
You should use FinalRate.value, FinalRate.value and MFinalRate.value
function btnclick() {
var PictureHeight = document.getElementById('PictureHeight').value;
var PictureWidth = document.getElementById('PictureWidth').value;
var Rate = document.getElementById('Rate').value;
var FinalRate = document.getElementById('FinalRate');
FinalRate.value = parseInt(PictureHeight) * parseInt(PictureWidth) * parseInt(Rate);
var MountHeight = document.getElementById('MountHeight').value;
var MountWidth = document.getElementById('MountWidth').value;
var MountRate = document.getElementById('MountRate').value;
var MFinalRate = document.getElementById('MFinalRate');
MFinalRate.value = parseInt(2 * MountHeight) + parseInt(2 * MountWidth) * parseInt(MountRate);
var FrameHeight = document.getElementById('FrameHeight').value;
var FrameWidth = document.getElementById('FrameWidth').value;
var FrameRate = document.getElementById('FrameRate').value;
var FrFinalRate = document.getElementById('FrFinalRate');
FrFinalRate.value = parseInt(2 * FrameHeight) + parseInt(2 * FrameWidth) * parseInt(FrameRate);
var TFinalRate = document.getElementById('TFinalRate');
TFinalRate.value = parseInt(FinalRate.value) + parseInt(MFinalRate.value) + parseInt(FrFinalRate.value);
}
<!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 href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Calculator</title>
</head>
<body>
<center>
<h1>Rate Calculator</h1>
Enter the Picture dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="PictureWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="PictureHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="Rate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FinalRate">
</div>
</div>
</div>
</div>
Enter the Mount dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="MountWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="MountHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="MountRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="MFinalRate">
</div>
</div>
</div>
</div>
Enter the Frame dimention and Rate<br/>
<div class="container">
<div class="row">
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Width</label>
<input type="number" class="form-control" id="FrameWidth">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Height</label>
<input type="number" class="form-control" id="FrameHeight">
</div>
</div>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">Rate</label>
<input type="number" class="form-control" id="FrameRate">
</div>
</div>
<br>
<div class="col">
<div class="input-group input-group-sm mb-3">
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="FrFinalRate">
</div>
</div>
</div>
</div>
Total Rate is<br/>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col">
</div>
<label class="col-sm-2 col-form-label col-form-label-sm">₹</label>
<input type="text" class="form-control" id="TFinalRate">
<div class="col">
</div>
<br>
<div class="col">
</div>
<button type="button" class="btn btn-primary" onclick="btnclick()">Submit</button>
</div>
</div>
</center>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous">
</script>
</body>
</html>
I have a "save page as PDF" button on my page. This button only saves according to the page's code structure. So, the values which users have provided after the page's loading doesn't count.
Form fields contain input areas: (1) Values brought from previous calculation page with cookies (read-only) (2) Values those users can add / change
When user clicks on the "SAVE (pdf)" button, I want the page to be refreshed with the new structure; value sections of the inputs are changed, according to the new values standing in the input fields, then firing the "SAVE AS PDF" button.
How this can be technically possible. I couldn't figure it out. I appreciate your help very much.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Renal Dose</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="manifest" href="../img/favicons/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<!-- JQuery-->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
<body>
<form class="border border-light p-5 print" name="saveList" action="/en/print" onsubmit="submit();">
<div class="form-row justify-content-lg-center">
<div class="col-12 col-lg-8 mt-3" id="timey">Calculation Time:<br>
<input class="form-control" id="time" type="text" autocomplete="off">
</div>
<div class="col-12 col-lg-8 mt-3" id="namey">Patient Name:<br>
<input class="form-control" id="name" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="wardy">Ward Name:<br>
<input class="form-control" id="ward" type="text" name="ward">
</div>
<div class="col-12 col-lg-8 mt-3" id="docty">Doctor Name:<br>
<input class="form-control" id="doctor" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="crCly">Creatinine Clearance (ml/min):<br>
<input class="form-control" id="crCl" type="number" autocomplete="off" value="" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="diay">State of Hemodialysis:<br>
<input class="form-control" id="dia" type="text" autocomplete="off" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="acty">Active Substance:<br>
<input class="form-control" id="actSubs" type="text" autocomplete="off" required="" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="producty">Brand Name:<br>
<input class="form-control" id="productName" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="suggesty">Suggested Dose:<br>
<input class="form-control" id="suggest" type="text" autocomplete="off" readonly="">
</div>
<div class="col-12 col-lg-8 mt-3" id="operaty">Operator:<br>
<input class="form-control" id="operator" type="text">
</div>
<div class="col-12 col-lg-8 mt-3" id="noty">Notes:<br>
<input class="form-control" id="notes" type="text" autocomplete="off">
</div>
</div>
<div class="row text-justify justify-content-center mt-5">
<div class="col-12 col-lg-8">
<p><strong>Note: </strong>All the information above is advisory for the full authorized health professionals who has enough capability for determination of patient's treatment. And they can never be a substitute for the information and applications
of physicians, pharmacists or other health professionals those will provide optimum benefit for the patient.</p>
</div>
</div>
</form>
<div class="row text-center justify-content-center my-5">
<p class="text-center mt-5">
Save as PDF
</p>
</div>
https://jsfiddle.net/mulgey/t6dmvr4s/8/
I'm trying to make some form validation. If you click the radio button, you can go to the next step, but if you don't click it, you can't proceed. Here's my code:
<!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">
<title>Bootstrap Multi Step Registration Form Template</title>
<link rel="stylesheet" href="<?=base_url()?>assets/bootstrap/css/bootstrap.min.css">
<!-- CSS -->
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:400,100,300,500">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/form-elements.css">
<link rel="stylesheet" href="<?=base_url()?>assets/multiplesteps/css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicon and touch icons -->
<link rel="shortcut icon" href="<?=base_url()?>assets/multiplesteps/ico/favicon.png">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="<?=base_url()?>assets/multiplesteps/ico/apple-touch-icon-57-precomposed.png">
</head>
<body background="<?=base_url()?>assets/multiplesteps/img/backgrounds/green.jpg">
<?php //$this->load->view($view) ?>
<!-- Top content -->
<div class="top-content">
<div class="inner-bg">
<div class="container">
<div class="row">
<div class="col-sm-8 col-sm-offset-2 text">
<h1><strong>KUISIONER RAWAT JALAN</strong></h1>
<div class="description">
<p>
<b>RUMAH SAKIT UMUM DAERAH TEBET</b>
</p>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6 col-sm-offset-3 form-box">
<form role="form" action="" method="post" class="registration-form">
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Langkah 1 / 3</h3>
<p>Keterangan Responden</p>
</div>
<div class="form-top-right">
<img src="<?=base_url()?>assets/multiplesteps/img/logorsudtebet.png">
<!--<i class="fa fa-user"></i>-->
</div>
</div>
<div class="form-bottom">
<div class="form-group col-md-12">
<label class="col-sm-6">Usia Responden</label>
<input class="form-control col-md-6" type="text" placeholder="Isi Usia Anda" name="usia">
</div>
<div class="form-group col-md-12">
<label class="col-md-6">Status Perkawinan</label>
<div class="col-md-12">
<input class="radio" type="radio" name="gender" value="male"> Belum Kawin
<input type="radio" name="gender" value="male"> Kawin
<input type="radio" name="gender" value="male"> Cerai Hidup
<input type="radio" name="gender" value="male"> Cerai Mati
</div>
</div>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 2 / 3</h3>
<p>Set up your account:</p>
</div>
<div class="form-top-right">
<i class="fa fa-key"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-email">Email</label>
<input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
</div>
<div class="form-group">
<label class="sr-only" for="form-password">Password</label>
<input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
</div>
<div class="form-group">
<label class="sr-only" for="form-repeat-password">Repeat password</label>
<input type="password" name="form-repeat-password" placeholder="Repeat password..."
class="form-repeat-password form-control" id="form-repeat-password">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="button" class="btn btn-next">Next</button>
</div>
</fieldset>
<fieldset>
<div class="form-top">
<div class="form-top-left">
<h3>Step 3 / 3</h3>
<p>Social media profiles:</p>
</div>
<div class="form-top-right">
<i class="fa fa-twitter"></i>
</div>
</div>
<div class="form-bottom">
<div class="form-group">
<label class="sr-only" for="form-facebook">Facebook</label>
<input type="text" name="form-facebook" placeholder="Facebook..." class="form-facebook form-control" id="form-facebook">
</div>
<div class="form-group">
<label class="sr-only" for="form-twitter">Twitter</label>
<input type="text" name="form-twitter" placeholder="Twitter..." class="form-twitter form-control" id="form-twitter">
</div>
<div class="form-group">
<label class="sr-only" for="form-google-plus">Google plus</label>
<input type="text" name="form-google-plus" placeholder="Google plus..." class="form-google-plus form-control" id="form-google-plus">
</div>
<button type="button" class="btn btn-previous">Previous</button>
<button type="submit" class="btn">Sign me up!</button>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
<!-- Javascript -->
<script src="<?=base_url()?>assets/multiplesteps/js/jquery-1.11.1.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/bootstrap/js/bootstrap.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/jquery.backstretch.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/retina-1.1.0.min.js"></script>
<script src="<?=base_url()?>assets/multiplesteps/js/scripts.js"></script>
</body>
</html>
Here's my jQuery code:
$('.registration-form fieldset:first-child').fadeIn('slow');
$('.registration-form input[type="text"], .registration-form input[type="password"], .registration-form textarea').on('focus', function() {
$(this).removeClass('input-error');
});
How can I achieve this functionality?
I am trying to send values from HTML form to javascript file but I saw that the values for email subject and message were sent as undefined in alert window or console, while the name was correctly fetched from input and transferred to js,I am quite new to javascript so this question might be very silly but I am unable to figure out the reason why undefined is sent and also I don't understand that when in what order the javascript and HTML code is executed, I Sometimes see the javascript is being executed first before the button is clicked
heres my html form stored in temp.html
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" id="email" placeholder="Email">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" id="subject" placeholder="Subject">
<input type="text" class="form-control mb-3" id="name" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
file.js located in js folder
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
output image that I get
https://ibb.co/dfjBUU
ID in html are unice you can't use id="name" for 3 inputs.
<!doctype html>
<html lang="en">
<head>
<title>Contact Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!-- Material Design Bootstrap -->
<link href="css/mdb.min.css" rel="stylesheet">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
</head>
<body>
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3">
<input type="text" placeholder="Email" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3">
<input type="text" class="form-control mb-3" id="subject" placeholder="Subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message" placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto">
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;">Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</body>
<!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- MDB CORE JAVASCRIPT -->
<script type="text/javascript" src="js/mdb.min.js"></script>
<!-- Plugin JavaScript -->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
</body>
</html>
and js its ok
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" +Email + " subject:"+ subject);
}
Need to give the attribute id to the input element not for the div
function contactuser(){
var Name = document.getElementById("name").value;
var Email = document.getElementById("email").value;
var subject = document.getElementById("subject").value;
var message = document.getElementById("message").value;
alert("Button Clicked" + "Name: " + Name + "Email:" + Email + " subject:"+ subject);
}
<form id="connect-form" method="POST">
<div class="row">
<div class="card-body col-lg-6 col-sm-12 col-md-6">
<div class="md-form mt-3">
<input type="text" id="name" class="form-control" required="required">
<label for="materialContactFormName">Name</label>
</div>
<div class="md-form mb-3" placeholder="Email">
<input type="text" class="form-control mb-3" id="email" required="required">
<label for="email">Email</label>
</div>
<div class="md-form mb-3" placeholder="Subject">
<input type="text" class="form-control mb-3" id="subject" required="required">
<label for="subject">Subject</label>
</div>
</div>
<div class="card-body col-lg-6 mt-2 col-sm-12 col-md-6">
<div class="md-form">
<textarea class="form-control md-textarea" name="message" rows="4" id="message"
placeholder="say Hi, and I will probably get back to you in 24 hrs :)" style="resize: none; width: 100%; box-sizing: border-box; height: 100%;" required="required"></textarea>
<label for="message">Message</label>
</div>
</div>
</div>
<div class="form-action" style="text-align: center;margin: auto" >
<button onclick="contactuser()" class="btn btn-elegant btn-block" type="submit" style="height: 50px;width: 50%;" >Submit</button>
</div>
<script type="text/javascript" src="js/file.js"></script>
</form>
</div>
Im trying to get extension from intlTelInput plugin on submit, but for some reason it returns empty. Here is an example: https://jsfiddle.net/msfk6top/
And the code:
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/bootstrap/dist/css/bootstrap.min.css?7">
<link rel="stylesheet" href="https://intl-tel-input.com/node_modules/intl-tel-input/build/css/intlTelInput.css?37">
<form id="my_form">
<input name="phone" type="tel" id="phone" class="form-control">
<input type="submit">
</form>
<!-- use old jquery so demo works in IE -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://intl-tel-input.com/node_modules/intl-tel-input/build/js/intlTelInput.js?60"></script>
<script>
$("#phone").intlTelInput();
$("#my_form").submit(function () {
alert($("#phone").intlTelInput("getExtension"));
});
</script>
Any idea why its not returning the chosen extension?
You need to specify the utilsScript option when initializing the plugin in order for getExtension to work.
In your plunker, do:
$("#phone").intlTelInput({utilsScript:'https://intl-tel-input.com/node_modules/intl-tel-input/build/js/utils.js'});
utilsScript should be the path to the utils.js script that is included with the intl-tel-input plugin.
Try with this working example:
<!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">
<meta name="description" content="ENVIAR SMS GRATIS CON BACHECUBANO">
<title>ENVIAR SMS GRATIS CON BACHECUBANO</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="css/intlTelInput.min.css">
<style>
body {
background-color: #fafafa;
}
.intl-tel-input {
width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div class="row">
<div class="card" style="margin-top:50px;">
<!-- <img class="card-img-top" src="..." alt="SMS GRATIS de Bachecubano"> -->
<div class="card-body">
<form class="" action="send.php" method="POST" id="form">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<h3 class="card-title text-center">ENVIAR SMS GRATIS CON BACHECUBANO</h3>
<div class="form-group">
<div class="input-group">
<input class="form-control" type="tel" id="phone" name="phone">
<input type="hidden" id="phone2" name="phone2" />
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
<div class="form-group">
<textarea class="form-control input-sm borderRadius" type="textarea" id="message" name="message" placeholder="Su mensaje 👍 SMS GRATIS bit.ly/elBache" maxlength="130" rows="5"></textarea>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6">
<span class="help-block">
<p id="characterLeft" class="help-block"></p>
</span>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-6 text-right">
<button class="btn btn-success disabled" id="btnSubmit" name="btnSubmit" type="submit">Enviar SMS GRATIS</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="js/intlTelInput-jquery.min.js"></script>
<script>
$("#phone").intlTelInput({
utilsScript: 'js/utils.js'
});
$("#form").submit(function() {
//alert($("#phone").intlTelInput("getNumber"));
$("#phone2").val($("#phone").intlTelInput("getNumber"));
});
</script>
<script>
$(document).ready(function() {
$('#characterLeft').text('130 caracteres restantes');
$('#message').keyup(function() {
var max = 130;
var len = $(this).val().length;
if (len >= max) {
$('#characterLeft').text('0 caracteres disponibles');
$('#characterLeft').addClass('red');
$('#btnSubmit').addClass('disabled');
} else {
var ch = max - len;
$('#characterLeft').text(ch + ' caracteres restantes');
$('#btnSubmit').removeClass('disabled');
$('#characterLeft').removeClass('red');
}
});
});
</script>
</body>
</html>