Replacing some JS lines with PHP - javascript

I have a form below which uses javascript to perfom a maths equation. But i want the equation hidden, so that means replacing the JS maths equation line (var result), with a new php script. I am thinking the php code should be outside of the JS tags, perhaps using the JS variables. But i dont know much about php. I am not trying to learn php, i am just trying to get a working form, so please no convoluted lessons on how php works. I want to avoid using node js and doing ajax calls etc. If not possible please say so.
<html>
<head>
<script>
function bmi () {
var height = Number(document.getElementById("height").value);
var weight = Number(document.getElementById("weight").value);
var result = weight / (height * height);
document.getElementById("result").innerHTML = "Your score is : " + result;
}
</script>
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form>
<h4>BMI</h4>
<input id="height" type="text" placeholder="height in meters or feet" />
<br />
<br />
<input id="weight" type="text" placeholder="weight in kgs or lbs" />
<br />
<br />
<input class = "submit" type="button" value="Submit" onclick="bmi()" />
<p id="result">Result</p>
</form>
</body>
</html>

<?php
function bmi($height, $weight) {
$height = floatval($height);
$weight = floatval($weight);
return $weight / ($height * $height);
}
?>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
</head>
<body>
<form action="" method="POST">
<h4>BMI</h4>
<input id="height" name="height" type="text" placeholder="height in meters or feet" value="<?php echo isset($_POST['height']) ? $_POST['height'] : ''; ?>" />
<br/>
<br/>
<input id="weight" name="weight" type="text" placeholder="weight in kgs or lbs" value="<?php echo isset($_POST['weight']) ? $_POST['weight'] : ''; ?>" />
<br/>
<br/>
<input class="submit" type="submit" value="Submit"/>
<?php if (!empty($_POST['height']) && !empty($_POST['weight'])) : ?>
<p>Your score is <?php echo bmi($_POST['height'], $_POST['weight']); ?></p>
<?php endif; ?>
</form>
</body>
</html>

Without AJAX call, its not possible i guess if u want to use php.
Another way is, you can use angular to get your problem's solution.

Related

I can't seem to get my code to display my calculation, am I missing an output tag?

I am trying to create an MPG (Miles Per Gallon) calculator in Javascript. I can't seem to display my results after I hit the "Calculate" button.
<html>
<head> <title> Miles per Gallons Calculator</title> </head>
<body bgcolor= "#FFFFFF">
<p><script language="JavaScript"> <!-function calcMPG() { var Miles =
document.form1.txtMiles.value var Gallons =
document.form1.txtGallons.value;
var MPG MPG = Miles/Gallons; document.form1.txtMPG.value = MPG}
// --> </script>
<strong>Miles per Gallons Calculator</strong></p> <p>by </p>
<form name="form1"> <p>Miles <input type="text" size="21" name="txtMiles"></p>
<p>Gallons <input type="text" size="20" name="txtGallons"></p>
<p><input type="button" name="btnCalc" value="Calculate MPG" onclick="calcMPG()"></p>
<p><input type="reset" name="btnClear" value="Clear"></p> <p>Miles Per Gallon
<input type="text" size="20" name="txtMPG"></p>
</form>
</body>
</html>
Hi Please Use this code I hope it's helpful
Thanks
<html>
<head> <title> Miles per Gallons Calculator</title> </head>
<body bgcolor= "#FFFFFF">
<p><strong>Miles per Gallons Calculator</strong></p> <p>by </p>
<form name="form1"> <p>Miles <input type="text" size="21" name="txtMiles"></p>
<p>Gallons <input type="text" size="20" name="txtGallons"></p>
<p><input type="button" name="btnCalc" value="Calculate MPG" onclick="calcMPG()"></p>
<p><input type="reset" name="btnClear" value="Clear"></p> <p>Miles Per Gallon
<input type="text" size="20" name="txtMPG"></p>
</form>
</body>
</html>
<script language="JavaScript">
function calcMPG() {
var Miles = document.form1.txtMiles.value
var Gallons = document.form1.txtGallons.value;
var MPG = parseInt(Miles)/parseInt(Gallons);
document.form1.txtMPG.value = MPG
}
</script>
Try add your script tag bottom of the body tag.

JQuery(JavaScript)+PHP syntax explanation

Going through some exercise which including JQuery + PHP combined together .The part I am not completely understand is in the Jquery code when the if statement starts ,can someone please explain from this point on what's going on?
HTML code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<form action="" method="post">
<label for="name">Name:</label><br>
<input type="text" name="name"><br><br>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email" autocomplete="off"><br><br>
<label for="password">Password:</label><br>
<input type="text" name="password"><br><br>
<input type ="submit" name="submit" value="Sign up">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="script.js" type="text/javascript"></script>
</body>
</html>
PHP code:
<?php
if(! empty($_GET['email'])){
$email=filter_var($_GET['email'],FILTER_VALIDATE_EMAIL);
if($email){
$con="mysql:host=localhost;dbname=eshop;charset=utf8";
$db= new PDO($con,'root','');
$query=$db->prepare("SELECT email FROM users WHERE email = ?");
$query->execute([$email]);
$email=$query->fetch(PDO::FETCH_ASSOC);
if($email){
echo true;
}
}
}
JQuery code:
$('#email').on('keyup', function(){
var userEmail= $(this).val().trim();
$('#result').remove();
var emailRegex= /^[_a-z0-9-]+(.[_a-z0-9-]+)*#[a-z0-9-]+(.[a-z0-9-]+)*(\.[a-z]{2,3})$/i;
if(emailRegex.test(userEmail)){
$.get('check_email.php',{email:userEmail},function(res){
if(res ==1){
$('#email').after('<span id="result">*Email is taken</span>');
}
});
}
});

Posting a javascript variable to PHP.

I have a javascript function to count the number of clicks. I wish to post the variable storing the count to PHP. I'm unsure why when I submit the form, the count is not echoed out. Below is the HTML file.
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.innerHTML="Number of Downloads: ("+cnt +")";//this part has been edited
}
</script>
</head>
<body>
<div id="showCount"></div>
<form action "submitClicks.php"id="form">
<input type="hidden" name="numberOfClicks" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>
Then this is my submit clicks page:
<?php
$number_of_clicks = $_POST["cnt"];
echo $number_of_clicks;
?>
Does this implementation look correct to you as when I click submit clicks, nothing happens. I'm expecting the number of clicks to be echoed.
<form action "submitClicks.php"id="form">
Should be:
<form action="submitClicks.php" id="form" method="post">
And shouldn't you have something like:
In HTML:
<input id="count" type="hidden" name="cnt" value="">
In your Javascript CountFun function:
document.getElementById('count').value = cnt;
Try this code:
<html>
<head>
<title> js php </title>
<script>
var cnt=0;
function CountFun(){
cnt=parseInt(cnt)+parseInt(1);
var divData=document.getElementById("showCount");
divData.value=cnt;//this part has been edited
document.getElementById("JustShow").innerHTML= cnt;
}
</script>
</head>
<body>
<div id="JustShow"></div>
<form action="submitClicks.php" id="form" method="post">
<input type="hidden" id="showCount" name="cnt" value="0" />
<input type="button" id="btnClick" value="Click me" onclick="CountFun()"/>
<input type="submit" value="Submit Clicks" />
</form>
</body>
</html>

Javascript creating a username using inputs

I have a form in which the user inputs various information. The input chosen name allows the user to enter a username of choice but a HIDDEN INPUT needs to be integrated so that a system username is created.
The system username is generated on page submit by a javascript function, and it consists of the first alphabetic characters found in the Family name, street address, Given name; the numerical day of the month; and the numerical seconds field of the time of submission. E.g.: A user registers with name Bernardo O’Higgins, address 213 Liberator St, at 12:31:16 on 25 April 2014. His system username is
OLB2516. Just so i can see if it works, at the moment the ssytem username is not hidden but just a normal text box.
I am totally lost as i do not know how to go about this and hoping somebody can help me? Here is my php file with form integrated.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Registration</title>
</head>
<body>
<?php
$conn = mysql_connect("localhost", "....", ".....");
mysql_select_db("tipping291", $conn)
or die ('Database not found ' . mysql_error() );
mysql_close($conn);
?>
<div id="container">
<div id="header">
<h1>Registration</h1></div>
<div id="menu">
<h2>Homepage</h2><br />
<h2>Registration</h2><br />
<h2>User Login</h2><br />
<h2>Administrator Login</h2><br />
<h2>Tipping</h2><br />
<h2>Terms & Conditions</h2><br />
</div>
<form id="rego" action="<?php echo
htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" onSubmit="return validateForm()">
<label>Given Name:</label> <input type="text" name="gname"><br />
<br />
<label>Middle Name: </label><input type="text" name="mname"><br />
<br />
<label>Family Name:</label> <input type="text" name="surname"><br />
<br />
<label>Chosen Username:</label> <input type="text" name="username"><br />
<br />
<label>Address:</label> <input type="text" name="address"><br />
<br />
<label>Postcode: </label><input type="text" name="postcode"><br />
<br />
<label>State:</label> <input type="text" name="state"><br />
<br />
<label>Tel number: </label><input type="text" name="tel"><br />
<br />
<label>Password:</label> <input type="password" name="password"><br />
<br />
<label>Password confirmation:</label> <input type="password" name="passconfirm"><br />
<br />
<label>System username</label> <input type="text" name="susername" >
<input type="submit" value="submit">
</div>
</form>
</body>
</html>
CAN SOMBODY PEASE HELP ME!!!!! I HAVENT HAD ANY SUCCESSS
I think the code found here is more suitable to generate a random string (you can put 20 characters instead of 10)
You can also just use md5() in the time or user email...
And you don't need to worry to create it in javascript, if this is random generated you can do that in php.
If you really need to do in javascript... there's CaffGeek answer in this post.. who could help you
Add the below code before closing } of function validateForm() { and try
var username = '';
var date = new Date();
$.each(['surname', 'address', 'gname'], function() {
username += $.trim($('input[name="' + this + '"]').val().replace(/\d+/g, '')).substring(0, 1);
});
username += date.getDate() + '' + date.getSeconds();
$('input[name="susername"]').val(username);
jsBin

html How can I get multiple instant results from single calculation

Is it possible to get a dozen results from this single basic calculation? I have two output textboxes in the sample code; how can I get these two fields to work?
<!DOCTYPE html>
<html lang = "en">
<head>
<title> multiple results calculation </title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<link rel="style" href="css/main.css" type"text/css"/>
<!-- I need multiple results from single calculation!
<script type="text/javascript">
function sum()
{
var width = document.multiple results.width.value;
var height = document.multiple results.value;
var sum = parseInt(width) * parseInt(height) /144;
document.getElementById('Calculate').value = sum;
document.getElementById("results1").readOnly=true;
document.getElementById("results2").readOnly=true;
var result1= $1.99;
var result2= $2.99;
document.getElementById('Calculate').value = sum * result1;
document.getElementById('Calculate').value = sum * result2;
}
</script>
-->
</head>
<body>
<div>
<H2> Multiple instant results from single calculation</h2>
<p> the goal eventually is to have about a dozen results from this single calculation
</div>
<form name="multiple results">
<label for="width"> Width: </label>
<input type="number" <id="width" maxlength="4" size="10" value=""/>
<label for="height"> Height: </label>
<input type="number" <id="height" maxlength="4" size="10" value=""/>
<input type="button" name="button" value="Calculate" onClick="sum"/>
<div>
<label for="result1"> Result1: $ </label>
<input type="number" id="result1" name="result1"/>
<label for="result2"> Result2: $ </label>
<input type="number" id="result2" name="result2"/>
</div>
</form>
</body>
</html>
I found a solution by removing the first document.getElementById('Calculate').value = sum;, changed the remaining getElementById's and input type's to result and result2 also added the missing value="" to input, not necessary but renaming Id's helped me

Categories