I am trying to do the following, can someone please help.
I have created a php file that accepts json objects. This web page is meant to be displayed directly to the users.
How can I open this page from another page without using html forms? I need a easy solution that would look something like the following.
Javascript (with JQuery support if needed):
var JsonParamToPass=jsonObj;
var postData=JsonParamToPass;
window.open("www.myAwesomePageThatAcceptsPostData.com",'_blank',method=POST,postData);
//the last two variables are made up and i need to find a way to do that, that can easily be given to other people to use.
I want to avoid using an ajax request and writing the output to a new page, and I want to avoid creating a form if possible.
Thank you,
You could use the javascript window.opener method to access the parent windows variables.
var myVar = window.opener.parentVar;
Any reason you couldn't use a hidden form and submit it using javascript like this:
(this would be in your original window and document.submit would open a new window rather than using the current window)
<form name="myForm" action="http://yourAwesomePage" method="POST">
<input type="hidden" id="myVar" name="myVar" value = "">
</form>
<SCRIPT type="text/javascript">
document.myForm.myVar.value = someValue;
document.myForm.submit();
</SCRIPT>
Related
I am learning using php with mysql and curl .
I need pointers for filling up the form contents automatically on a external website with form data from mysql using curl and php. After a form is submitted successfully it displays a confirmation page.
The external form is at : https://get.uber.com/new-signup/
The form tag in the code is :
<form id="signup-form" action="/signup_submit/" method="POST" autocomplete="on">
Please advise.....
Thanks in advance...
See Javascript - Fill input with iframe-in Value
It is done with javascript on the page the iframe is displayed.
Example from linked post:
<iframe src="2.html" id="mylovelyiframe"></iframe>
<script type="text/javascript">
var iframe = document.getElementById('mylovelyiframe');
var doc = iframe.contentDocument || iframe.contentWindow.document;
var elem = document.getElementById('mylovelytextbox');
elem.value = doc.getElementsByName('thisone')[0].value;
</script>
the general idea is to take a look at the source of the page you wish to automate. find the url where the form submits to, and find all the names of the form fields. also pay attention to hidden fields that you may also need to provide. then you use to curl to simulate submitting the form. some of the curl options you need to provide are CURLOPT_URL and CURLOPT_POSTFIELDS. also, please be aware that the form you provided is protected with a captcha, and you will probably not be able to automate it without a lot of work. using developer tools in your browser of choice is your best tool for reverse engineering the way forms work with your browser.
I have a form which uses the target attribute to target an iframe when the form is posted which posts to a PHP script. This part is working fine but I need to do something based on several results that the php script will put in the iframe.
What I am thinking of doing is when the PHP script has finished posting it echo's out some hidden input fields that contain various elements, such as the state of the post, whether it succeeded and what the final result was if it was successfully posted.
However, if I did this it would put it into the iframe so then the main web page wouldn't be able to access the hidden input fields.
How would the main web page be able to access these hidden input fields so that the main web page can perform some action, I.e. make a div within the web page show a specific error message or whatever.
The other thing is, once I know how I can get the data from the hidden input field, how would I know when I can go and get the values. I was thinking that when the form is posted via a JavaScript document.forms["myform"].submit() code I could then do a while loop and check to see if another hidden input field status is set to complete and once it says complete I can then get the values from the hidden input field.
I'm not sure if the way I suggested is the right way or doing what I want to achieve or if there is a better way of doing it.
UPDATE
I've tried what #lanzz suggested but it doesn't appear to have worked. Below is what I have tried.
$("iframe#image_upload_frame").on('load', function()
{
var iframeBody = this.contentDocument.body;
var data = $(iframeBody).find("#imageDirectory");
alert("data: " + data);
});
Below is how the iframe is defined
<iframe id="image_upload_frame" name="image_upload_frame"></iframe>
and I am echoing out a hidden input field in the php script that's within the iframe.
echo '<input type="hidden" id="imageDirectory" value="'.$imageDirectory.'" />';
The echo is definetly working as when I see view the iframe source I can see the hidden input however, the alert dialog is never shown as if something isn't working. There are no errors being reported either by the google chrome dev console.
If I understand correctly - you need a value from the iframe in the parent window, once the value is loaded into the iframe. I would add javascript to the iframe calling the parent and executing a function.
In the main frame:
function incomingValue(val) {
alert(val)
}
and somewhere in the generated iframe:
<script type="text/javascript">
parent.incomingValue("Hello world");
</script>
This should work assuming both frame sources share the same domain.
You can use postMessage for cross document communication between an iframe and it's parent.
See:
http://viget.com/extend/using-javascript-postmessage-to-talk-to-iframes
http://javascript.info/tutorial/cross-window-messaging-with-postmessage
Since you're running on the same domain, your main page's Javascript will have no trouble to access the contents of the <iframe> (example uses jQuery, you could rewrite into whatever libs you plan to use):
$('iframe#the-id-of-the-iframe').on('load', function() {
var iframeWin = this.contentWindow;
var iframeBody = this.contentDocument.body;
// access global JS vars defined in the iframe:
var someIframeVariable = iframeWin.globalIframeVariable;
// or, directly access elements in the iframe:
var someIframeElement = $(iframeBody).find('#element-id-inside-iframe');
});
A while ago I wrote a piece of code to upload a picture using some javascript and two iframes. The most important thing for me was to preview the pic. Maybe it will help you:
HTML:
<div id='fakebutton' onclick='select_pic()'>Just a button to select a pic</div>
<iframe src='uploadform.php' name'pic_frame'></iframe>
<iframe src='#' name='target_frame'></iframe>
both the iframes are hidden. The targetframe has no source (or an empty page, if you want to).
uploadform.php contains a form:
<form id='upload_form' action='dosomething.php' method='post' enctype='multipart/form-data' target='target_frame' onsubmit=''>
<input id='realfoto' name='realfoto' type='file' onchange='parent.foto_upload(window.frameElement.id)'>
</form>
and then some javascript:
First of all something to trigger the filebrowser when the user clicks the fake
function select_pic(){
b=window.frames['pic_frame'];
b.document.upload_form.realfoto.click();
}
And then a part to actually upload the pic, triggered by the onchange() in the input element:
function foto_upload(o){
var b=o;
o=getElementById(o);
if(o.contentDocument ) {o = o.contentDocument;}
else if(o.contentWindow ){o = o.contentWindow;}
else{return false;}
if(test_pic(o,b)){ //test if it is really a pic
getObj('foto_tmpdir').value=o.getElementById('tmp_dir').value;
o.getElementById('doctype_nr').value=b;
o.fotoform.submit();
}
else{
return false;}
}
In dosomething.php I perform actions on the uploaded pic (rename, resize etc). And it contains a few lines of javascript:
$a = 'upload was succes';
$b = 'my_image_name';
$c = 'whatever you want to put here';
?>
<script type="text/javascript">
window.top.window.smurf(<?php echo "'$a','$b','$c'" ?>);</script>
<?php
if you create in javascripty a function named smurf(a,b,c) you can pass along whatever you want form the php-script. One of the most important things for me was that I now can pass the filename of the uploaded pic to javascript, and use it to change an image.src for a preview.
Hope you can use something of it.
Your iframe source page should has a javascript call function instead of the hidden field. The function will call the opener window (your main page) and then it do any functionality you want. As blue print look at the following:
//in iframe src.php
<?php
if ($something){
?>
<script>
function doSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doSomethingWithOpenerWindow()
</script>
<?php
}
else{
?>
<script>
function doAnotherSomethingWithOpenerWindow(){
opener.document.write('hi);
}
doAnotherSomethingWithOpenerWindow()
</script>
<?php
}
?>
I'm a beginner with PHP and I'd like to do the following but I have not a clue of how to do this :
I have a webpage where I ask a user to submit his postal code. After he/she submits it the page redirects to another PHP page where I search in a datebase the city corresponding to the postal code. Then I write : "You're city is ...".
What I'd like is to have this happen using only one webpage (with no visible redirection for the user). I know we can use header to redirect to the first page but I don't know how to transmit the content (city).
You can pass city name in query parameter like
headers('Location: serachdatabase.php?city='.$cityname);
But that may not be what you are looking for. You can consider using Ajax to do this. Using Ajax the page will not refresh completely but only the portion of page can be refreshed. Ajax, if you dont know about it, is widely used.
It sounds like you're looking for an AJAX post. This might sound like an advanced topic for a beginner, but if you check out a framework like jQuery (http://api.jquery.com/jQuery.post/) you'll see it's quite simple.
Try something like this:
$('#myform').submit(function() {
var url = 'databasequery.php';
var postcode = $('#postcode').val();
$.post( url, { postcode: postcode },
function( data ) {
$( "#result" ).empty().append( data );
}
);
return false;
});
In your HTML you would tag your form as myform and create an empty div with the id "result".
Your 'databasequery.php' file should accept a POST variable called postcode and simply output the response you want to display on your page.
You can redirect using header("Location:...");
or you could simply just post a form
<form method="post" action="yourURL">
Postal code <input type='text' name='postal_code' /> <br/>
<input type="submit" value="submit form" name="submit" />
</form>
and then do in php something like this:
<?php
$postal = $_POST["postal_code"];
// match against databse..
?>
Note that this code isn't "safe" to put it in a mysql query!
If you don't want any page redirect, you'll need to use either an iFrame or some CSS-id'd divs to load your content into using javascript's XMLHttpRequest or jQuery's axaj or similar to load info from another PHP page and insert it inside the current document.
Here is an example use of XmlHttpRequest, and Here is jQuery's API documentation on its ajax method.
The key to your problem's solution are GET and POST parameters. Learn about HTML forms.
I have this form and I would like to read the uploaded file and then fill out the form using this read information without refreshing the page.
For example the first word might be "Bob" and so I would want that to go in my input text "First_name." I've been trying to searching online for a way to do this using JQuery or Ajax but I can't seem to find a solution.
Can this be done using the two methods previously mentioned? If so and if not can someone point me to a link or to where I can learn how to do this? The instances I have found include where one uses JQuery to upload the file and display the size without refresh (which is not exactly what I want).
I have also found how one can use an iFrame but this again is not what I want. I suppose I could always just submit the part of the page containing the textfile related information and show the same form but with the filled out information. But I feel as if this is kind of sloppy and I want to know if there is a better way.
Thanks.
Firefox has a method to do this, the File and FileList API provide a way to get at the files selected by a file input element and have a text retrieval method.
A very basic example:
NB. Not all browsers support this code.
[I think Chrome, Firefox and Opera do at time of writing.]
HTML:
<form>
<input type="file" name="thefile" id="thefile" />
</form>
<div id="text"></div>
JS (using jQuery):
$(document).ready(function() {
$('#thefile').change(function(e) {
if (e.target.files != undefined) {
var reader = new FileReader();
reader.onload = function(e) {
$('#text').text(e.target.result);
};
reader.readAsText(e.target.files.item(0));
}
return false;
});
});
Demo: http://jsfiddle.net/FSc8y/2/
If the selected file was a CSV file, you could then process it directly in javascript.
.split() will be useful in that case to split lines and then fields.
the only way I know would be to submit the form to a hidden iframe. this will upload teh file without refreshing the page. you can then use any returned info using javascript. this is what they use for fake ajax style image uploads that let you preview an image before uploading. the truth is it already has been uploaded via a hidden iframe. unfortunately however iframes are not xhtml 1.0 compliant.
something like this article may help:
http://djpate.com/2009/05/24/form-submit-via-hidden-iframe-aka-fake-ajax/
The question you might ask is :
why should I use this method instead of real ajax ?
Well they’re is numereous answer to that but one good reason it that
is doesnt require any type of ajax libs and you can start using it
even if you never used ajax before.
So here it goes.
<form method=”post” action=”formProcess.php” target=”hiddenIFrame”>
<input type=”text” name=”test” /> </form>
<iframe style=”width:0px;height:0px;border:0px;” name=hiddenIFrame />
This is just a normal form but you’ll notice the target in the form
tag, this tells the form to submit in the iframe instead of the
current page.
It’s works exactly as the target attribut on the A tag.
Also the iframe is hidden from the user using
style=”width:0px;height:0px;border:0px;”
now the file formProcess.php is not different from your normal form
processing file but if you want do something on the main page you have
to use JS like that :
window.parent.whatEverYouWannaDoInParentForm();
You can also upload file with this method !
Please checkout the formphp for full example.
Cheers !
Nb : You will see the status bar acts like the page is reloading but
it’s really not.
I am that kind that spends more time looking for bugs in web projects and correct them, but I still have one question about the use of the GET and POST method
To summarize , I often use the GET method for queries that may be coming from links or simple buttons example :
Click me
and for forms (signup,login, or comment) I use the post method. but the question is:
sometimes (Multi-steps signup for e.g), I may need to pass the info collected from the form in page 1 to a page 2 (where the user can find a captcha for e.g). in order to send them to the database if the captcha test is Okey. But the question is , how to pass those info to a next page via a POST method without using a hidden form?
Do I need to recreate a POST method from scratch with a socket?
thank you
You can use JavaScript (jQuery):
First u need to load jQuery ( using google as host or you download it):
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js"></script>
Then...
<script type="text/javascript">
$(document).ready(function() {
$('#Link').click(function() {
$.post("example.php", { n: "203000"} );
});
});
</script>
<a id="Link" href="#">Click me</a>
Edit:
after that save it in the SESSION in example.php
$ _SESSION['N'] = (int) $_POST['n'];
When this value will be stored on the server side. And tied to the client session, until he closes browser or that it set the time for that session on the server side runs out.
Edit2:
There is also another possibility to post requst, yes ..
But I do not like this method myself ...
And here is the form used, something the OP did not want.
<form name="myform" action="example.php" method="POST">
<input type="hidden" name="n" value="203000">
<a id="Link" onclick="document.myform.submit()" href="#">Click me</a>
</form>
Use sessions to store the data until you submit them:
http://de.php.net/manual/en/intro.session.php.
Using sessions has a big advantage,
once you have verified the data you can store it.
Always keep in mind that users may manipulate POST requests!
If the problem is to pass info between pages like in a multi-step form you should use session (if you are using PHP).
By the way for send a POST request without form you need to use CURL like in this example
The statement is a HTML language statement used by a browser to initiate a POST/GET data relation. The Browser is the execution environment.
You can use other languages (and their execution environment) like Java, Java Script, C#, etc. to initiate HTTP POST/GET data relations.
Sorry if I'm not understanding you correctly, but from what I'm reading, you want to access form data entered on page 1 (using a form with a post method) on page 2? If so, use the $_POST autoglobal array. For example, $nameOnPage2 = $_POST['nameFromPage1']. You don't have to create a form on the second page for this.