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>
Related
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 have a client that has a contact page and he wants to be able to create and edit the contact form fields.
Is there a simple php class for this?
I don't really know where to start with this.
Any tips?
Thanks in advance!
This custom Jquery Code show how you can done your job by using Jquery
$(document).ready(function(){
$("#add").on('click', function() {
$('#extra').css('display', 'block');
});
$('#dy_add').click(function(){
var type = $("#type").val();
var name = $("#name").val();
var inputName = $("#m_nam").val();
var form_field = inputName + '<input type="'+type +'" name="'+name+'" />' +'</br>' ;
$("#dynamic").append(form_field);
});
});
#extra{display:none}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<form action="" method="POST" >
First Name <input type="text" name="fname" /></br>
Last Name <input type="text" name="lname" /></br>
<div id="dynamic"></div>
<input type="submit" name="submit" value="submit">
</form>
<button id="add">Add Fields</button>
<div id="extra">
<p><font color="red">Add extra form field</font></p>
Name<input type="text" id="m_nam" placeholder="input type"></br>
Type<input type="text" id="type" placeholder="input type"></br>
Input Name<input type="text" id="name" placeholder="input name">
<button id="dy_add">Add</button>
</div>
</body>
</html>
I have the below form, and after the form the PHP requests a Curl which can take a while. Because of this they keep pressing the submit button thinking that nothing has happened. This causes multiple entries in the database. Could someone help me and let me know what to put in to stop this.
I tried the Javascript solution in the first answer but it stopped the PHP script that followed. Not what I wanted. Sorry
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css2/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text.css'/>
<!--//webfonts-->
<center><img class="displayed" src="images/logo.jpg" alt="Logo" style="width:128px;height:128px;"></center>
</head>
<body>
<div class="main">
<form action="" method="POST" enctype="multipart/form-data" id="contactform" >
<input type="hidden" name="action" value="submit">
<h1><span>Sign Up</span> <lable> The Brook on Sneydes</lable> </h1>
<div class="inset">
<p>
<center><label ><?php echo $text; ?></label></center>
<label for="first">First Name</label>
<input type="text" name="first" id="first" value="" placeholder="" required/>
</p>
<p>
<label for="last">Surname</label>
<input type="text" name="last" id="last" value="" placeholder="" required/>
</p>
<p>
<label for="mobile">Mobile Number</label>
<input type="text" name="mobile" id="mobile" value="" placeholder="" required/>
</p>
<p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" value="" placeholder="" required/>
</p>
</div>
<p class="p-container">
<input type="submit" name="submit" id="submit" value="Submit">
</p>
</form>
</div>
<!-----start-copyright---->
<div class="copy-right">
<p> © 2016 Spearhead Digital. All rights reserved.</p>
</div>
<!-----//end-copyright---->
</body>
</html>
<?php
if(isset($_POST['submit']) && !empty($_POST) ){
$first = $_POST['first'];
$last = $_POST['last'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];
// Other Code
}
You can disable the submit button when submitting the form.
An example using jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#contactform').submit(function() {
$('input[type=submit]', this).prop("disabled", true);
});
});
</script>
I have this PHP page that grabs the response's from a form (well i hope it does) and then inputs the data into a table. I then echo the response from the table on the same page. Im using ajax on the form page to send over the form values and on success of the ajax call load the data into a div. this is all done without a refresh, however no information is being sent and it just refresh's the page
my php page -
<?php
$comment_name = $_POST["name"];
$comment_body = $_POST["comment"];
$film_no = $_POST["hidden"];
echo $comment_name;
echo $comment_body;
echo $film_no;
// Connects to your Database
mysql_connect("localhost", "****", "****") or die(mysql_error());
mysql_select_db("ignitet1_CheckFilm") or die(mysql_error());
$query1 = "INSERT INTO film_comments (comments_id,film_no,name,comment)
VALUES ('','$film_no', '$comment_name','$comment_body')";
$runquery1 = mysql_query($query1)or die(mysql_error());
$getComments = mysql_query("SELECT * FROM film_comments where film_no = '$film_no'")
or die(mysql_error());
while($info = mysql_fetch_array($getComments))
{
echo "<p>";
echo $info['name'];
echo ":</p>";
echo "<p>";
echo $info['comment'];
echo "</p>";
echo "<p>Comment posted on:";
echo $info['timestamp'];
echo "</p>";
echo "</div>";
?>
my form and javascript code
<form id="ContactForm2" onsubmit="return submitForm()" >
<div> <input type="hidden" name="hidden" id="hidden" value="2">
<label for="name">Your Name</label>
<input type="text" name="name" id="name" />
<label for="body">Comment Body</label>
<textarea name="comment" id="comment" cols="20" rows="5"></textarea>
<input type="submit" id="comment" class="button" value="Submit" />
<div class="form_result"> </div>
</form> </div>
<script>
function submitForm() {
$.ajax({type:'POST', url: 'comment.php', data:$('#ContactForm2').serialize(), success: function(response) {
$('#ContactForm2').find('.form_result').html(response);
}});
}
Everything i try seems to not work. help would be much appreciated! :)
Try this with your php its working fine for me.
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#sub').click(function(){
$.ajax({type:'POST', url: 'comment.php', data:$('#ContactForm2').serialize(), success: function(response) {
$('#ContactForm2').find('.form_result').html(response);
}});
});
})
</script>
<body>
<div>
<form id="ContactForm2"> > <input type="hidden" name="hidden" id="hidden" value="2">
<label for="name">Your Name</label>
<input type="text" name="name" id="name" />
<label for="comment">Comment Body</label>
<textarea name="comment" id="comment" cols="20" rows="5"></textarea>
<input type="button" id="sub" class="button" value="Submit" />
<div class="form_result"> </div>
</form> </div>
</body>
</html>
I have function like this in my header
function bingframe() {
var iframe = document.getElementById('bframe');
iframe.src = 'http://www.bing.com/search?q=' + document.searchForm.search.value.replace(/ /g,'+') + '&go=&form=QBLH&filt=all&qs=n&sk=';
}
So now when i call this function it responds in Google Chrome,Firefox and the modern browsers but not Internet explorer.
Can any of you modify the code accordingly ?
Thanking You.
Works for me - IE8
<html>
<head>
<title></title>
<script>
function bingframe(theForm) {
var iframe = document.getElementById('bframe');
var url = 'http://www.bing.com/search?q=' + escape(theForm.search.value).replace(/ /g,'+') + '&go=&form=QBLH&filt=all&qs=n&sk=';
iframe.src = url;
return false
}
window.onload=function() {
document.forms[0].search.focus();
}
</script>
</head>
<body>
<form name="searchForm" onSubmit="return bingframe(this)">
<input type="text" name="search" value="" />
<input type="submit">
</form>
<iframe id="bframe" src="about:blank" width="100%" height="100%"></iframe>
</body>
</html>
however so does this - no script necessary:
<html>
<head>
<title></title>
<script>
window.onload=function() {
document.forms[0].q.focus();
}
</script>
</head>
<body>
<form name="searchForm" action="http://www.bing.com/search" target="bframe">
<input type="text" name="q" value="" />
<input type="hidden" name="go" value="" />
<input type="hidden" name="form" value="QBLH" />
<input type="hidden" name="filt" value="all" />
<input type="hidden" name="qs" value="n" />
<input type="hidden" name="sk" value="" />
<input type="submit">
</form>
<iframe name="bframe" src="about:blank" width="100%" height="100%"></iframe>
</body>
</html>