Hi I am currently using GoogleMaps API v3 and I am trying to get the variables for the latitude and longitude and place them in a hidden form as html variables and pass them through a form to a php page. The latitude and longitude are printing out on my page as the span but I cant get them to print in the form.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>
<!-- google maps -->
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"> </script>
<!-- jquery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- jquery UI -->
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<!-- our javascript -->
<script type="text/javascript" src="gmaps.js"></script>
<link rel="stylesheet" type="text/css" href="style4.css" />
</head>
<body>
<input id='gmaps-input-address' type='text'/>
<div id='gmaps-error'></div>
<div id='gmaps-canvas'></div>
<br/>
<br/>
Latitude: <span id='gmaps-output-latitude'></span>
<br/>
Longitude: <span id='gmaps-output-longitude'></span>
<br/>
<script type="text/javascript">
function doSomething()
{
var lat = document.getElementById('#gmaps-output-latitude');
lat_element.value = google_maps_api_variable;
var lon = document.getElementById('#gmaps-output-longitude');
lon_element.value = google_maps_api_variable;
document.getElementById("lat").value=lat;
document.getElementById("lon").value=lon;
}
</script>
<form action="join.php" method="post" onSubmit="doSomething">
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="lon" id="lon"/>
<input type="submit" value="Confirm Address"/>
</form>
</body>
</html>
In the Googlemaps API there is a javascript function which holds the latitude and longitude as follows:
function update_ui( address, latLng ) {
$('#gmaps-input-address').autocomplete("close");
$('#gmaps-input-address').val(address);
$('#gmaps-output-latitude').html(latLng.lat());
$('#gmaps-output-longitude').html(latLng.lng());
}
I am very green with Javascript and would really appreciate any help, I have searched other questions to get as far as I am but I am stuck here.
just add this after the code you already have(to work before the form submits as a click handler of the form submittal buon or something):
$('#lat').val($('#gmaps-output-latitude').html());
$('#lon').val($('#gmaps-output-longitude').html());
gmaps.js is your js which populates span in your html file. This should be happening through a callback function which i probably think is update_ui. This function might be populating the spans afterwards and your script for populating hidden fields might have already executed. So places the code for populating hidden fields after the callback function call or may be in update_ui itself.
so edit your update_ui function and add
$('#lat').val(latLng.lat());
$('#lon').val(latLng.lng());
these lines in the function body in end.
Related
My login.html file:
<!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" lang="lv">
<head>
<?php require_once 'inc/metahead.php'; ?>
<title>Logg inn</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
</script>
<script type="text/Javascript" src="functions.js">
</script>
</head>
<body>
<div id="content">
<center>
<form>
<label for="epost"></label> <input type="text" name="epost" id="epost"
placeholder="Epost/Bruker" /></br> </br> <label
for="passord"></label> <input type="password" name="passord" id="passord"
placeholder="Passord" /></br> </br> <input
type="button" onclick="login()" value="Logg inn">
</form>
<br /> Glemt passord?
</center>
</div>
</body>
</html>
This piece of code is from my header.php file:
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
function loginNow(){
$(document).ready(function() {
$("#content").load("login.html");
});
}
</script>
If i go directly in login.html - It calls the function without problems. BUT, if I go through my index-file and click "Logg inn", so the script above run, the script in login.html never gets called.
I have tried to alert something out instead of calling my script - That works. Any help would be greatly appreciated!
what i think is you have two jquery files with different version loaded there which is creating the conflict
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js">
in login.html
and other is
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
in header.php
so either you use noConflict().. or remove one of them
The function name is different here
onclick="login()" // you are calling login()
function loginNow(){ // but declaring loginNow()
Your HTML code:
...
<input type="password" name="passord" id="passord"
placeholder="Passord" /></br> </br> <input
type="button" **onclick="login()"** value="Logg inn">
...
Your Javascript Code:
function **loginNow()**{
$(document).ready(function() {
$("#content").load("login.html");
});
}
Check the enclosed parts - Different function names ;)
Don't use onlick="". Since you are using jQuery, hook an event to your input element:
$(document).ready(function(){
$('input[type=button]').click(loginNow);
});
Eventually give the button an id or a name and use this as the selector in jQuery.
I have been trying to save tinymce editor textarea content to a .txt file for a while but without success yet.
This is my html file code:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TinyMCE example</title>
<meta name="description" content="HTML5 Basic template">
<meta name="author" content="R Dickinson">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/scripts.js"></script>
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
// General options
mode : "textareas",
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>test tinymce save</h1>
</header>
<nav>
</nav>
<section>
<form method="post" action="test.php">
<p>
<textarea name="content" style="width:50%"></textarea>
<input type="submit" value="Save" />
</p>
</form>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
Now test.php
<?php
/*
* test.php
*/
?>
<!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>
<title>test tiny mce</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Geany 0.21" />
</head>
<body>
<?php
echo(stripslashes($_POST['content']));
?>
<?php
$file = "data.txt";
$fp = fopen($file, 'w');
$data =(stripslashes($_POST['content']));
fwrite($fp, $data);
fclose($fp);
?>
</body>
</html>
I'm grateful for helpful replies to fix this-many thanks :-)
Update
Following the first answer below I have added triggerSave as:
<script language="Javascript">
function submitForm() {
tinyMCE.triggerSave();
document.forms[0].submit();
}
</script>
and
<form method="post" action="test.php">
<p>
<textarea name="content" style="width:50%"></textarea>
<!--<input type="submit" value="Save" />-->
Submit Form
</p>
but still no success...More help gratefully received
UPDATE 2
Here is my jQuery TinyMCE version:
<!Doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sample WebPage</title>
<meta name="description" content="HTML5 Basic template">
<meta name="author" content="R Dickinson-see sitepoint etc">
<link rel="stylesheet" href="css/styles.css?v=1.0">
<script src="js/scripts.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("jquery", "1.3");
</script>
<!-- Load jQuery build -->
<script type="text/javascript" src="jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
<header>
<h1>Enter the main heading, usually the same as the title.</h1>
</header>
<nav>
</nav>
<section>
<!-- OF COURSE YOU NEED TO ADAPT ACTION TO WHAT PAGE YOU WANT TO LOAD WHEN HITTING "SAVE" -->
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</p>
</form>
</section>
<aside>
</aside>
<footer>
</footer>
</body>
</html>
The question itself comes down to :
How to save HTML content of TinyMCE into a file.
Well, first of all, you need:
1) Get content of editor
2) Send this content to PHP script
3) Implement some function that would save that content into a file
Getting content
Make sure you are getting it the way it should work.
For example,
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementById('SubmitBtn');
btn.onclick = function(){
//This MUST alert HTML content of editor.
alert( tinyMCE.activeEditor.getContent() );
}
}
</script>
<input type="button" id="SubmitBtn" value="Get HTML content"/>
Sending content to PHP script
All you need to do is to send value of the method tinyMCE.activeEditor.getContent() to PHP script.
Well, you should use Jquery-AJAX for that.
Assume that you included jquery.js into script tag in the head section, the next step would be sending JavaScript variable to PHP script
It would be similar to this one:
<script type="text/javascript">
$(function(){
var url = "path_to_your_php_script.php";
$("#SomeSubmitButton").click(function(){
//"content" will PHP variable
$.post(url, { "content" : tinyMCE.activeEditor.getContent() }, function(respond){
if ( respond == ){
alert('Content saved to file');
return;
} else {
//Error message assumed
alert(respond);
}
});
});
});
</script>
PHP script
Since we were sending "content" this one will be populated in $_POST superglobal
<?php
if ( isset($_POST['content']) ){
//This is what you want - HTML content from tinyMCE
//just treat this a string
if ( save_html_to_file($_POST['content'], '/some_file.html') ){
//Print 1 and exit script
die(1);
} else {
die('Couldnt write to stream');
}
}
/**
*
* #param string $content HTML content from TinyMCE editor
* #param string $path File you want to write into
* #return boolean TRUE on success
*/
function save_html_to_file($content, $path){
return (bool) file_put_contents($path, $content);
}
So after execution this you should get back alert with message of success.
You should update your TinyMCE instances before submitting your form. Use this javascript:
tinyMCE.triggerSave();
I usually put this in a function and call it on onsubmit event of form.
There is already different questions around this topic in Stackoverflow.
I was following a tutorial to understand how AJAX/PHP works but i'm having an issue.
Let me start with the code.
escalationTest.php:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<form>
<input type="text" id="name" placeholder="Enter Name.." /> <br>
<input type="text" id="age" placeholder="Enter Name.." />
<input type="button" value="Submit" onClick="post();" />
</form>
<div id="result"></div>
<script type="text/javascript">
function post()
{
var name= $('#name').val();
var age= $('#age').val();
$.post('escalation.php',{postname:name,postage:age},
function(data)
{
$('#result').html(data);
});
}
</script>
</body>
</html>
escalation.php:
<?php
echo "working";
?>
I've typed the code exactly how its in the tut. From its output when i click the submit button i should "working" in the result div which is not happening.
What am i doing wrong here..?
Thanks.
<script type="text/javascript" src="jquery.min.js"></script>
Download a version of jQuery and then link to it with this script tag.
While you can link to an online version, it's not ideal for eventual production use and you should definitely get a local copy.
add the folowing line to your head tag
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
This is a pretty simple fix - you're missing jQuery. Add the following:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
in your head element.
I have some third party javascript code
<SCRIPT language="JavaScript" SRC="http://some-videos.com/addbutton.cfm?ID=20415454598212"></SCRIPT>
When this code is added in html file it shows one play button, now i want that if user clicks on any button one function should be called and that function will load this js code. I have tried .load, .getScript, .ajax but nothing is working.
<!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>Untitled Document</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.1.min.js"></script>
<script language="javascript">
function loadVideo()
{
$('#videoButton').load("http://some-videos.com/addbutton.cfm?ID=20415454598212");
}
</script>
</head>
<body>
<div id="videoButton"></div>
<input type="button" value="Load Video Button" onclick="loadVideo();" />
<br /><br />
Below code shows one play button, that is generated through included javascript file.
<SCRIPT language="JavaScript" SRC="http://some-videos.com/addbutton.cfm?ID=20415454598212"></SCRIPT>
<!-- I have added dummy Url -->
</body>
</html>
function myFunction()
{
$('head').append($('<script type="text/javascript" src="http://some-videos.com/addbutton.cfm?ID=20415454598212"></script>'));
}
I suppose using jQuery. This way will be external Javascript loaded on demand.
I've got this piece of script, and I'm trying to hide two divs (#black and #yname) if a certain variable or session is set in PHP, so is there a simple way to do so?
Here's my code:
input.php
<!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=iso-8859-1" />
<style type="text/css">
#import "stil.css";
</style>
<title>Untitled Document</title>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="scripts.js"></script>
<script type="text/javascript" src="postme.js"></script>
</head>
<body>
<div id="wrap">
<div id="chat">
<div id="main">
</div>
<div id="input">
<form name="form"action="test.php" method="post">
<input type="text" name="tekst" id="msg" size="72" />
<input type="submit" name="dugme" value="posalji" id="dugme" />
</form>
</div>
</div>
</div>
<div id="black">
</div>
<div id="yname">
<form name="yname">
<input type="text" name="tekst2" />
<input type="button" name="dugme2" value="Enter" onclick="send()"/>
</div>
</body>
</html>
postme.js
function send(){
$.post('sesion.php',{name:yname.tekst2.value},function(val){
}
});
}
sesion.php
<?php
session_start();
$data=$_POST['name'];
$_SESSION['name']=$data;
$sesion_n=$_SESSION['name'];
echo $sesion_n;
?>
So basically, what I want to do is to check if $sesion_n variable is set, and if it's set, I want my send() function to hide divs #black and #yname.
In addition, is there a way to use val value with jquery somehow for example to alert it or to assign that value to a javascript variable?
function send(){
$.post('sesion.php',{name:yname.tekst2.value},function(val){
if(val) {
$('#black').hide();
$('#yname').hide();
}
}
});
}
well i didnt get your question completely but you can use hide() method to hide any div in jquery...