We Keep Coding

Display POST data of a form in a modal

I have the following code:
Form:
<form action="test.php" onsubmit="addForm(event)" id="testeForm" method="post">
<input type="submit" name="payButton" value="BUY">
<input type="hidden" name="type" value="pgmType" />
<input type="hidden" name="total" value="10.00" />
</form>
Window modal (lightbox):
<div class="dark-pay" close="dark-pay" style="display:none">
<div id="loadiFrame" data="test.php"></div>
</div>
Javascript:
function addForm(event){
document.querySelector(".dark-pay").style.display = "inline";
$('#loadiFrame').html('<iframe style="border: 0;width: inherit;" src="' + $("#loadiFrame").attr("data") + '"></iframe>');
}
Content of test.php
<?php
$type = $_POST["type"];
$total = $_POST["total"];
echo "Type: ".$type." - Total: ".$total;
?>
I need the file test.php to be opened inside lightbox by iframe, already with POST data for printing.
I already tried using several examples available here on the site and could not implement any. As it is now, it opens the modal but redirects the user to the new tab instead of opening it in the modal.
This is a payment gateway, the customer clicks the buy button on the form, then the lightbox (modal) opens with the form data, and then redirects to the payment method using this data, all within the modal without leaving the page.
Inside the file test.php, I will need to create a redirect, I don't know if this will work within modal too.
Any ideas on how I can do this?

Is it possible to redirect back after form submit done in php?

I have this form:
<form action="/productcategories/foods/" method="GET">
<input type="hidden" name="add-to-cart" value="<?php echo htmlspecialchars($getid); ?>" />
<input type="number" name="quantity" min="1" value="1">
<br><input type="submit" value="Buy" />
</form>
If I hit submit it'll redirect me to a Wordpress plugin generated page, does the add-to-cart action but after I done this form I want to redirect back the user to the current page. Is there any method to do it from the page where the form stored? Like JavaScript or something like that?

You can submit the form and open the redirection in tag, not leaving your site. Then possibly using javascript you can remove on variety of ways, clicking on button or after it will fully load.

using form input in different pages and handling actions dynamically

I have four files, they are index.php, commonform.php, image1.php, image2.php
Suppose, in the index.php I have a form with two image input, the form's action change dynamically, method is post. when the first image is clicked is goes to commonform.php and also when the second image is clicked is goes to commonform.php but in commonform I have a form with some button input (its work can be anything and not my concern) and a submit button. My concern is when the first image is clicked, it goes to commonform.php and when the submit button is clicked of commonform.php, it goes to image1.php and same things for when the second image is clicked, it goes to commonform.php and when the submit button is clicked of commonform.php, it goes to image2.php. Can anyone help me?

You may attach a variable to your requests in index.php and then recognize it in commonform.php and decide to jump to the target destination !
For Example :
index.php
<form action="commonform.php" method="POST">
<input type="image" name="image_1" src="image1.gif" alt="Image 1">
<input type="image" name="image_2" src="image2.gif" alt="Image 2">
</form>
commonform.php
<?php
if (isset($_POST['image_1_x'], $_POST['image_1_y'])) {
$action = 'image1.php';
}
if (isset($_POST['image_2_x'], $_POST['image_2_y'])) {
$action = 'image2.php';
}
?>
<form id="commonform" action="<?php echo $action; ?>" method="POST">
<input type="button" value="From HTML">
<input type="button" value="Content">
<input type="button" value="Button style ">
<br><br>
<input type="submit" name="submit" value="Submit">
</form>
when you are processing the INPUT with IMAGE type artibute ; it sends the X , Y artibutes , we just need to check them !

Hide Div on submit

I coded a html form and would like to hide a div upon submission using javascript. For some reason the div isn't hiding.
DIV & Form code:
<div id="map"><iframe src="sourceurl" width="700" height="300" frameborder="0"></iframe></div><br />
<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>" onsubmit="mapHide(); return false;">
<select name="country" onchange='this.form.submit()'>
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>
JS:
<script>
function mapHide() {
document.getElementById('map').style.display = 'none';
}
</script>

Seems like this would be easier just using php. Check if the the form has been submitted and display content accordingly.
if($_SERVER['REQUEST_METHOD'] == 'POST'){
//form was submitted content
}
else{
//empty form
}

you probably found a code meant for onsubmit and used it for an onchange event. I'm not an expert on this but based on what I've read so far, onchange="this.submit.form()" will refresh or reload your page therefore, everything just resets back.
I tried using your code and place it on a
<input type="submit" onsubmit="this.form.submit();" />
and it works.
So probably what you can do, is to do it using AJAX.

How to use ajax to link with a div tag on a seperate page

I just need a bit of help using ajax. What I have at the moment is a button image of a plus sign. Now when the user clicks on the button image, it will open up a model window. At the moment the modal window is blank.
The reason the modal window is blank is because I have not corrctly linked it up with the div tag "previouslink", as it is on a seperate page. (previousquestions.php). I want the modal window to display the details within the "previouslink" div tag in the "previousquestions.php" page, but how can this be achieved using ajax?
Below is the code of the modal window and the image button in the page (QandATable.php):
<script>
function plusbutton()
{
$(".previouslink").modal("previousquestions.php");
return false;
}
</script>
<body>
<h1>CREATING QUESTIONS AND ANSWERS</h1>
<table id="plus" align="center">
<tr>
<th>
<a onclick="return plusbutton();">
<img src="Images/plussign.jpg" width="30" height="30" alt="Look Up Previous Question" class="plusimage"/>
</a>
<span id="plussignmsg">(Click Plus Sign to look <br/> up Previous Questions)</span>
</th>
</tr>
</table>
<div class="previouslink">
</div>
</body>
Below is the "previouslink" div tag which is in the "previousquestions.php" page:
<button type="button" id="close" onclick="return closewindow();">Close</button>
<h1>PREVIOUS QUESTIONS</h1>
<form action="<?php echo htmlentities($_SERVER['PHP_SELF']); ?>" method="post">
<p>Search: <input type="text" name="questioncontent" /></p>
<p><input id="searchquestion" name="searchQuestion" type="submit" value="Search" /></p>
</form>

Which modal plugin do you use? I would suggest you take a look at its documentation, as most of these already have the ability to load content via AJAX.
But regardless of that, I think there is a misconception here: you basically tell jQuery "Take the element with the class 'previouslink', and make it into a modal window" - but there is no element with that class on the current page (QandATable.php).
EDIT: for simpleModal, it should work like this:
$.modal( $('<div />').load('previousquestions.php .previouslink') );