I'm working with js and html, all client side. I have the following situation... I have an html form (in index.html) that contains some inputs and a submit button. Apart from that, the form contains an iframe tag which refers to another page (other.html) containing other html form. The thing is in this other page called other.html I have a text input (name="info") inside a form tag that saves some info.
Now what I want to do is submit this info's input value with the form of index.html.
Example index.html:
<html>
<body>
<form method="post" action="aphpfile.php">
<input type="text" name="a"/>
<input type="text" name="b"/>
<input type="text" name="c"/>
<iframe id="other1" width="408" height="200" frameborder="0"
scrolling="no" marginheight="0"
marginwidth="0" src="other.html"></iframe>
<input type="submit" value="submit"/>
</form>
</body>
</html>
Example other.html:
<html>
<script type="text/javascript">
function setInfo() {
document.getElementById("info").value = "this is the info";
}
</script>
<body>
<form>
<input type="text" id="info" name="info"/>
</form>
<input type="button" onclick="setInfo();" value="setInfo"/>
</body>
</html>
So from aphpfile.php I want to do this:
$a = $_POST['a'];
$b = $_POST['b'];
$c = $_POST['c'];
$info = $_POST['info'];
echo $a . "," . $b . "," . $c . "," . $info;
Thank you for your help.
SOLVED for many iframes. The following code is written inside a function that is called when the form to aphpfile.php is submitted. I hope someone finds this useful :)
var iframe = document.getElementById('other1');
var innerDoc;
var data;
var name;
var htmlData="";
var i=1;
while(iframe != null)
{
innerDoc = iframe.contentDocument || iframe.contentWindow.document;
data=innerDoc.getElementById("info").value;
name="info"+i;
htmlData+="<input type='hidden' name='"+name+"' value='"+data+"'/>";
i++;
iframe = document.getElementById('other'+i);
}
document.getElementById("hiddens").innerHTML=htmlData;
And ofc there is a
<div id="hiddens"></div>
inside the form in index.html
Related
In an html page I have a button that loads a generated pdf:
<button onclick='getpdf()'>GET PDF</button>
<script>
function getpdf(){
data={
var1: 'var1',
var2: 'var2'
};
window.open('genpdf.php?var1='+data['var1']+'&var2='+data['var2'], '_new');
}
</script>
genpdf.php is something like this:
<?php
require('fpdf/fpdf.php');
$var1 = $_GET['var1'];
$var2 = $_GET['var2'];
$pdf = new PDF();
/* ......... */
$pdf->Output('D','generated.pdf');
?>
My question is:
How can I change my code to pass parameters with POST method?
SOLUTION
ADyson suggested me this solution:
<form id="pdf" action="genpdf.php" methon="POST" target="_new">
<input type="hidden" name="var1" />
<input type="hidden" name="var2" />
<button onclick='getpdf()'>GET PDF</button>
</form>
<script>
function getpdf(){
$("#pdf input[name=var1]").val('var1');
$("#pdf input[name=var2]").val('var2');
$("#pdf").submit();
}
</script>
and
<?php
require('fpdf/fpdf.php');
$var1 = $_POST['var1'];
$var2 = $_POST['var2'];
$pdf = new PDF();
/* ......... */
$pdf->Output('D','generated.pdf');
?>
and it works fine!
BUT
If I wanted to do that without the use of a form, how could I do?
If you want to implement without coding HTML then use following Javascript
var myform = document.createElement('form');
myform.style.display = "none";
myform.name='PdfGenOrSomethingElse';
myform.method='POST';
myform.action='genpdf.php';
myform.target='_blank';
var var1=document.createElement('input');
var1.type='text';
var1.name='var1';
var1.value='Put/update your value';
var var2=document.createElement('input');
var2.type='text';
var2.name='var2';
var2.value='Put/update your value';
myform.appendChild(var1);
myform.appendChild(var2);
document.body.appendChild(myform);
myform.submit();
Notice the form will not be displayed on the page. "display" property is set to "none".
You don't need any javascript function for this. Just use FORM element with action post:
<form action="genpdf.php" method="post" target="_blank">
<input type="text" name="var1" value="" />
<input type="text" name="var2" value="" />
<button type="submit ">GET PDF</button>
</form>
The don't forget to use $_POST instead of $_GET in your PHP script.
I have a dilemma (which I am yet to find a way around). For some reason, PHP doesn't want to check if $_POST["login"] at the bottom of the <body> tag within my document.
It will work if it is put at the very top of the document, or even the top of the <body> tag. However, if I put it at the top of the document / <body> tag, the output JavaScript will not execute!
For example, this is the document (where the PHP will not execute):
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
If I am to do something like this, however (the PHP will execute):
<?php
if(isset($_POST["login"])){
echo "
<script>
document.getElementById('example-element').style.display = 'block';
</script>"
}
?>
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
But due to how JavaScript compiles, it will throw an error saying how it cannot set a style on a null element.
I have no idea how to get around this dilemma, so all help is appreciated!
Cheers.
<form>
<span id="example-element">Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
<?php
if(isset($_GET["login"])){
echo "<script>
document.addEventListener('DOMContentLoaded', function(){
document.getElementById('example-element').style.display = 'block';
}, false);
</script>";
}
?>
Check if this works..... I've added the display code inside the DOMContentLoaded event and change the $_POST variable to $_GET. Works fine in my local system.
You can do it as follows
<style>
.someClass {
display: block;
}
</style>
<?php
if(isset($_POST["login"])){
$hasClass = true;
}
?>
<form method="post">
<span id="example-element" class=<?php if(isset($hasClass)==true) echo "someClass"; ?> >Displaying.</span>
<input type="text" name="example">
<button type="submit" name="login">Login</button>
</form>
The other problem with your code is that you are not setting method of your form and by default it is GET where as in php you were looking for POST request.
You could solve it either by using $_REQUEST in php when you are not sure about the method.
Actally php executes before javascript.
Change like this
<script>
var isSubmit = "<?php isset($_POST['login'])?true:false; ?>";
if(isSubmit){
document.getElementById('example-element').style.display = 'block';
}
</script>"
I've looked around trying to find a solution to clear a textarea from an outside php file.
Basically this is my form:
<iframe name="post_target" style="display:none;"></iframe>
<form action="post_status.php" method="post" target="post_target">
<div class="status_update">
<div id="update_type"></div>
<?php load_picture($_SESSION['profile_picture']); ?>
<textarea class="scrollabletextbox" placeholder="Share your thoughts" onkeyup="textAreaAdjust(this)" name="status_update" id="status_update"></textarea>
</div>
<div id="update_options">
<button id="post" name="post" onclick="javascript:postUpdate()">Post</button>
</div>
</form>
And it calls post_status.php who's structure is basically:
<?php
function post_status($conn, $status){
// function
}
$status = $_POST['status_update'];
post_status($conn, $status);
?>
<script type="text/javascript">
// clear textarea
document.getElementById('status_update').value = "";
alert("passed clear");
</script>
What happens is the following : the php function executes properly, but the JS part doesn't. If I leave out ' .value = "" ' it works fine, if I don't then the alert never shows.
Does anyone have any idea concerning this issue ?
You use status_update on class attribute (div) and id attribute (textarea)
you need to make a choice.
I have a list of links not in an iframe which refresh the iframe with different info.eg
href="http://www.myfav.co.uk/nf_req_grid.php?g=top_72&e=joebloggs#mail.com<? echo $email; ?>" target="iframe_c"
This works well, but I also need the user to input text for the g=xxxx bit that are not on the general list, which also resides outside the iframe. I have tried various methods including hidden in an input statement but only sucessfully done by re-loading the whole page which I wish to avoid.
I am sure the answer is simple but is eluding me. Thanks
I think it will be easiest to just rig this up with some javascript like this:
<input name="g" type="text" />
<button name="b" value="Refresh" />
<script>
$(document).ready( function(){
$('button[name="b"]').click( function() {
var g = $('input[name="g"]').val();
var e = '<?= $email ?>';
var url = 'http://www.myfav.co.uk/nf_req_grid.php?g='+g+'&e='+email;
$('#iframeId').attr('src', url);
});
});
</script>
Try this:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" class="ginpt"><br/>
a<br/>
b<br/>
c<br/>
<iframe src="" name="iframe_c"></iframe>
The Javascript:
<script>
$(document).ready( function(){
$('.dlink').on('click',function(e){
e.preventDefault();
window.open(
$(this).attr('href').replace('{g}',$('.ginpt').val()),
$(this).attr('target')
);
})
});
</script>
In this example, I'm just replacing your g querystring value with a macro that'll be replaced by javascript function when they click on the anchor.
jsFiddle: http://jsfiddle.net/0dzassds/1/
Following my code:
HTML:
<form id="test" action="javascript:test()" method="post">
<input name="image" type="file" />
<input type="submit" value="Submit" />
</form>
JS:
function test(){
iframe = document.createElement("IFRAME");
iframe.name = "iframe_upload";
iframe.src="test.php";
document.body.appendChild(iframe);
document.getElementById("test").target = "iframe_upload";
}
PHP:
<?php
if (isset($_FILES["image"])){
echo 'exist';
exit();
}
?>
Where is the error? I'm sure the problem is in javascript, it would be easy to take off without the javascript dynamically create the iframe, but I must use javascript.
there are a couple of problems with that but nothing major,
firstly in order to post files you need to add enctype="multipart/form-data"to your form
seccondly the action of the form should be the file you are posting to (the iframe source) and the javascript should be run from onsubmit
finally you need to give the iframe an id for cross browser support
i end up with this
JS:
function test(){
iframe = document.createElement("IFRAME");
iframe.name = "iframe_upload";
iframe.id = "iframe_upload"; //some browsers target by id not name
document.body.appendChild(iframe);
document.getElementById("test").target = "iframe_upload";
}
HTML:
<form id="test" method="post" target="iframe_upload" enctype="multipart/form-data" onsubmit="javascript:test()" action="test.php">
<input name="image" type="file" />
<input type="submit" value="Submit" />
</form>
PHP:
<?php
print_r($_FILES);
?>