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>
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>
index.php
<html>
<head>
<script type="text/javascript">
function submitForms()
{
document.forms["form-1"].submit();
document.forms["form-2"].submit();
}
</script>
</head>
<body>
<form method="POST" action="form.php" id='form-1'>
<input type="text" name="txt1" />
</form>
<form method="POST" action="form.php" id='form-2'>
<input type="text" name="txt2" />
</form>
<input type="button" value="Click Me!" onclick="submitForms();" />
</body>
</html>
form.php
<?php
echo $_POST['txt1'];
echo $_POST['txt2'];
?>
Above is my code and when i submit both forms then both text-fields with their value it does not shoe me both text-field values.It only shoe me second text-field value.Please help me quickly.
I think because you try to get the params after sumbit two forms. You have sent the two forms at once and the second has stepped to the first, so the result is the return of the second form.
I think this will be better:
<html>
<head>
</head>
<body>
<form method="POST" action="form.php">
<input type="text" name="txt1" />
<input type="text" name="txt2" />
<input type="submit" value="Click Me!" />
</form>
</body>
</html>
<?php
echo $_POST['txt1'];
echo $_POST['txt2'];
?>
Sorry for my english
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>
How to submit this form without using submit button. I want to submit it in loading this form,
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value="<?php echo $uname;?>" />
<input type="hidden" name="price" id="price" value="<?php echo $price;?>" />
</form>
You don't need Jquery here!
The simplest solution here is (based on the answer from charles):
<html>
<body onload="document.frm1.submit()">
<form action="http://www.google.com" name="frm1">
<input type="hidden" name="q" value="Hello world" />
</form>
</body>
</html>
You can try also using below script
<html>
<head>
<script>
function load()
{
document.frm1.submit()
}
</script>
</head>
<body onload="load()">
<form action="http://www.google.com" id="frm1" name="frm1">
<input type="text" value="" />
</form>
</body>
</html>
Do this :
$(document).ready(function(){
$("#frm1").submit();
});
You can do it by using simple one line JavaScript code and also be careful that if JavaScript is turned off it will not work. The below code will do it's job if JavaScript is turned off.
Turn off JavaScript and run the code on you own file to know it's full function.(If you turn off JavaScript here, the below Code Snippet will not work)
.noscript-error {
color: red;
}
<body onload="document.getElementById('payment-form').submit();">
<div align="center">
<h1>
Please Waite... You Will be Redirected Shortly<br/>
Don't Refresh or Press Back
</h1>
</div>
<form method='post' action='acction.php' id='payment-form'>
<input type='hidden' name='field-name' value='field-value'>
<input type='hidden' name='field-name2' value='field-value2'>
<noscript>
<div align="center" class="noscript-error">Sorry, your browser does not support JavaScript!.
<br>Kindly submit it manually
<input type='submit' value='Submit Now' />
</div>
</noscript>
</form>
</body>
using javascript
<form id="frm1" action="file.php"></form>
<script>document.getElementById('frm1').submit();</script>
You missed the closing tag for the input fields, and you can choose any one of the events, ex: onload, onclick etc.
(a) Onload event:
<script type="text/javascript">
$(document).ready(function(){
$('#frm1').submit();
});
</script>
(b) Onclick Event:
<form name="frm1" id="frm1" action="../somePage" method="post">
Please Waite...
<input type="hidden" name="uname" id="uname" value=<?php echo $uname;?> />
<input type="hidden" name="price" id="price" value=<?php echo $price;?> />
<input type="text" name="submit" id="submit" value="submit">
</form>
<script type="text/javascript">
$('#submit').click(function(){
$('#frm1').submit();
});
</script>
my code was working and taking my text from textbox to next page + my Input control to next page via js but suddenly there seems to be a blunder whats wrong in following code
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
function AddTextbox(){
container.innerHTML=container.innerHTML+'<input type="text" name="'+ i + '">';
i++;
}
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" onClick="AddTextbox" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<div id="targetTag"></div>
<input type="button" onClick="addElement('INPUT','targetTag',{id:'my_input_tag', name:'my_input_tag', type:'text', size:'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
Note If you bother to check the DOM after executing this in IE, you'll see that the name field is not available to you. IE declares this field to be read-only which is why you don't see it. The field will be properly submitted, however, as shown in this test code:
<?php
if (isset($_POST)) {
print '<pre>'.print_r($_POST,true).'</pre>';
}
?>
<html>
<head>
<script>
function addElement(tag_type, target, parameters) {
//Create element
var newElement = document.createElement(tag_type);
//Add parameters
if (typeof parameters != 'undefined') {
for (parameter_name in parameters) {
newElement.setAttribute(parameter_name, parameters[parameter_name]);
}
}
//Append element to target
document.getElementById(target).appendChild(newElement);
}
</script>
</head>
<body>
<form method="post">
<div id="targetTag"></div>
<input type="submit" value="Check"/>
</form>
<input type="button" onClick="addElement('INPUT','targetTag',{'id':'my_input_tag', 'name':'my_input_tag', 'type':'text', 'size':'5'}); return false;" value="Add Input Tag" />
<input type="button" onClick="addElement('INPUT','targetTag'); return false;" value="Add Input Tag W/O Parameters" />
</body>
</html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript">
var i=2;
$(document).ready(function() {
$('#button').click(function(){
$('#container').append('<input type="text" name="'+ i + '"><br/>')
i++;
});
});
</script>
</head>
<body>
<form action="next.php" method="post">
<input type="text" name="1" />
<input type="button" id="button" name="btn" value="add" />
<input type="submit" name="submit" value="sub" />
<div id="container"></div>
</form>
</body>
</html>
use click function. is this you need?