I want to make a url search input for an iframe with HTML (and maybe JS).
I searched in alot of site and I didn't found.
Does anyone know how?
I think I'll need to use something like
<form action="http://" method="get" target="myiframe">
<input id="search" type="text">
</form>
?
You can use jQuery:
// Send search form data
$("#searchFormId").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get search form input field value
var s = $('#inpuFieldId').val();
// update iframe url
$('#iframeid').attr('src', 'http://example.com?formvalue='+s);
}
);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Update iframe</title>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
</head>
<body id='body'>
<div><form action="" method="get" id="myform"> <input id="search" type="text" /><input type="submit" value="go" /> </form></div>
<div align="center"><iframe name="MyIframe" id="myiframe" src="" width="980" height="500" scrolling="yes" frameborder="0"></iframe><div>
<script>
// Send search form data
$("#myform").submit(function(event) {
// stop form from submitting normally
event.preventDefault();
// get search form input field value
var s = $('#search').val();
// update iframe url
$('#myiframe').attr('src', 'http://jquery.com/?s='+s);
}
);
</script>
</body>
</html>
Related
I have an HTML file that has a form with two fields. These fields' value should be posted to a PHP and this PHP should be fetched from the HTML using JQuery. This is what I implemented.
My HTML file:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#first").load("result_jquery.php");
});
});
</script>
</head>
<body>
<div id="first"></div>
<div>
<form method="POST" id="myForm">
Name: <input type="text" name="name"/><br/>
Number: <input type="text" name="number"/><br/>
<button>submit</button>
</form>
</div>
</body>
This is my result_jquery.php
<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
When I click the submit button, the hello is getting printed. But the name is not getting printed. Can you please help me with this. I don't know where I am going wrong.
I think that the use of the button element is the worry and the code that i will put now it is working properly as you need so try this and tell me the result :)
<!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>
</head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-1.9.1.min.js"></script>
<script>
$(document).ready(function(){
$("#button").click(function(){
var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$("#first").load("result_jquery.php",{'namee':n,'number':nb},function(data){});
});
});
</script>
</head>
<body>
<div id="first"></div>
<div>
<form method="POST" id="myForm">
Name: <input type="text" name="namee"/><br/>
Number: <input type="text" name="number"/><br/>
<input type="button" value="Submit" id="button" />
</form>
</div>
</body>
</html>
copy this code:
<script type="text/javascript">
$(document).ready(function() {
$("#send").click(function() {
$.ajax({
type: "POST",
data : "name="+$( '#name' ).val(),
url: "result_jquery.php",
success: function(msg) {
$('#first').html(msg);
}
});
});
});
</script>
change this in form
<form method="POST" id="myForm">
Name: <input type="text" id="name" name="name"/><br/>
Number: <input type="text" id="number" name="number"/><br/>
<input type="button" id="send" value="Submit">
</form>
just try that and tell me the result :)
var n = $('[name="name"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'name':n,'number':nb},function(data){});
Note try to change the element name for the name field from "name" to "namee" and apply changes as needed look like this :
var n = $('[name="namee"]').val();
var nb = $('[name="number"]').val();
$('#error').load("result_jquery.php", {'namee':n,'number':nb},function(data){});
and the result_jquery.php file :
<?php
$n = $_POST["name"];
echo "hello ".$n;
?>
From the jQuery documentation on load:
This method is the simplest way to fetch data from the server. It is
roughly equivalent to $.get(url, data, success) except that it is a
method rather than global function and it has an implicit callback
function. When a successful response is detected (i.e. when textStatus
is "success" or "notmodified"), .load() sets the HTML contents of the
matched element to the returned data. This means that most uses of the
method can be quite simple:
You are performing a HTTP GET with that method, and not a POST.
My suggestion would be if you want to send an AJAX request to your server with information in it, get used to using the long form jQuery AJAX:
$.ajax({
data: 'url=encoded&query=string&of=data&or=object',
url: 'path/to/server/script.php',
success: function( output ) {
// Handle response here
}
});
For more info, see jQuery documentation: http://api.jquery.com/jQuery.ajax/
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 want my form to load webpages. I want to turn html textbox into address bar. Just like whenever I write URL into that, It loads webpages in the same window.
My current HTML code is:
<html>
<body>
<title>BlogSoc Browser</title>
<h1 style="font-family:verdana;font-size:50px;color:#000000;text-align:center;">Address Bar</h1>
<center><form method="GET" action="/load.php"><input type="text" name="url" value="http://" /><input type="submit" value="Go" name="submit" /></form></center>
</body>
</html>
It looks like this: (couldn't post image)
or you can just open http://blogsoc.org/load
Please tell me the appropriate load.php code. Thanks in advance.
<?php
header("Location: " . $_GET['url']);
?>
should be what you need.
Using client side scripting:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#myform').submit(function(){ //when form is submitted..
window.location = $('#url').val(); //..get url from the textbox and load that url
return false; // prevent the form from being submitted
});
});
</script>
</head>
<body>
<form id="myform">
<input type="text" id="url" value="http://" />
<input type="submit" id="submit" value="Submit" />
</form>
</body>
</html>
I used jQuery. For reference: https://developer.mozilla.org/en-US/docs/DOM/window.location
I am posting a form in an expressionengine (1.6.8) template. I'm doing it using jquery but have tried an HTML form too - same result. The PHP superglobal $_POST is empty after posting the form, even though I have PHP enabled on my templates (on input for the template containing the form and output on the processing template) and can see the POST variables in firebug.
Can anyone suggest what might cause this?
<html>
<head>
<script type="text/javascript" src="/_scripts/jquery-1.6.1.min.js"></script>
</head>
<body>
<form action="/select-locale/processing" method="POST">
<input type="text" name="test"/>
<input type="submit" name="submit" value="submit">
</form>
<a id="test" href="">link</a>
<script type="text/javascript">
$(function(){
$('#test').bind('click', function(e){
e.preventDefault();
var path = "/select-locale/processing"
var form = $('<form/>');
form.attr("method", "post");
form.attr("action", path);
var field = $('<input></input>');
field.attr("type", "hidden");
field.attr("name", 'locale');
field.attr("value", 'NZ');
form.append(field);
$('body').append(form);
form.submit();
});
});
</script>
</body>
</html>
server-side code (inherited, not my own) :
<?php
var_dump($_POST);
var_dump($_GET);exit;
if ( ! isset($_POST['locale']))
{
$locale = FALSE;
$returnPage = "/";
}
else
{
$locale = $_POST['locale'];
$returnPage = $_POST['returnPage'];
}
if (isset($_GET['locale'])) {
$locale = $_GET['locale'];
$returnPage = "/";
?>
{exp:cookie_plus:set name="cklocale" value="<?php echo $locale;?>" seconds="2678400"}
{exp:session_variables:set name="userLocale" value="<?php echo $locale;?>"} <?php
}
?>
{exp:cookie_plus:set name="cklocale" value="<?php echo $locale;?>" seconds="2678400"}
{exp:session_variables:set name="userLocale" value="<?php echo $locale;?>"}
{exp:session_variables:get name="testSession"}
{if '{exp:session_variables:get name="testSession"}'=='yes' }
{redirect="<?php echo $returnPage;?>"}
{if:else}
{redirect="/nocookies/"}
{/if}
check the network tab if the parameters you want are really sent out
check the url if it's correct
if you use any sort of routing mechanism or url rewrite, you might wanna review it also
check your validation and XSS rules (if any) as it may reject the whole array once hints of XSS is found.
happened to me a while ago (CI) and i was sending it to the wrong url
You might want to re-check the action attribute, are u sure you're sending the data to the right url? I doubt that anything could be filtered.
it seems like form is getting submitted twice because of either action attribute of form tag or oath value in jquery function
It may be useful
<html>
<head>
<script type="text/javascript" src="js/jquery.js"></script>
</head>
<body name="test">
<form action="/select-locale/processing" method="POST">
<input type="text" name="test"/>
<input type="submit" name="submit" value="submit">
</form>
<a id="test" href="">link</a>
</body>
</html>
<script type="text/javascript">
$(function(){
$('#test').bind('click', function(){
var form ='<form action="/select-locale/processing" name="newform" method="POST"><input type="hidden1" name="locale" value="NZ"></form>';
$('body').append(form);
alert('added');
document.newform.submit();
});
});
</script>`
test.html
<html>
<!--
Please see the full php-ajax tutorial at http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html
If you found this tutorial useful, i would apprciate a link back to this tutorial.
Visit http://www.php-learn-it.com for more php and ajax tutrials
-->
<title>php-learn-it.com - php ajax form submit</title>
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
function sendRequest() {
new Ajax.Request("test.php",
{
method: 'post',
postBody: 'name='+ $F('name'),
onComplete: showResponse
});
}
function showResponse(req){
$('show').innerHTML= req.responseText;
}
</script>
</head>
<body>
<form id="test" onSubmit="return false;">
<input type="hidden" name="name" id="name" value="value">
<input type="hidden" name="somethingElse" value="test" value="submit" onClick="sendRequest()">
</form>
Post!
<div id="show"></div>
<br/><br/>
</body>
</html>
<?php
/*
* Please see the full php-ajax tutorial at http://www.php-learn-it.com/tutorials/starting_with_php_and_ajax.html
* If you found this tutorial useful, i would apprciate a link back to this tutorial.
* Visit http://www.php-learn-it.com for more php and ajax tutrials
*/
if($_POST["name"] == "")
echo "name is empty";
else
echo "you typed ".$_POST["name"];
?>
Where is the wrong in form thanks.
A few things are wrong here:
You have an onclick on a hidden form element
The Post! anchor onclick isn't submitting anything
Suggested changes:
<head>
<script type="text/javascript" src="prototype.js"></script>
<script>
function showResponse(req){
$('show').innerHTML = req.responseText;
}
</script>
</head>
<body>
<form id="test" name="test" action="test.php">
<input type="hidden" name="name" id="name" value="cats" />
<input type="hidden" name="somethingElse" value="test" />
</form>
Post!
<div id="show"></div>
</body>
form id="test" and no name
and yet :
a href="#" onclick="myForm.submit()"
just for starters.