I'm trying to implement popup search window in a PHP project. I included JQuery and ColorBox & have managed to open the Search popup inline (using ColorBox plugin).
This is my code to open popup window
$(document).ready(function(){
$(".inline").colorbox({inline:true, transition:'none',speed:'10', close:'close', opacity:'0.6'});
});
Popup div has a separate <form> element to POST data.
<?php
if (isset($_POST['btnSearch']))
{
//Code to search data
}
?>
<form action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post"
enctype="multipart/form-data">
//Some Page Content
<div class="input"><input type="submit" name="btnSearch" Value="Search"
class="button"></div>
</form>
The problem is when I click the 'Search' button it POST the form but closes the popup. How can I retain popup window opened even after the button click?
AJAX is what you're looking for. jQuery has built in AJAX support which you can read about HERE
It's real easy to use so you shouldn't have any problems implementing it
Related
I want to load a php file when the user clicks on the button, but it isn't working and php file is not loaded. Is there any way to link the php file to the button via anchor tag?
<a href="visual.php" >
<button name="visual" id="newbtn" >Add Visual device</button></a>
<a href="audio.php" ><button name="audio" id="newbtn" >Add Audio device</button></a>
I need to create a main html page which includes only two buttons and when "Add Visual device" button is clicked a php page is loaded with a form to add details about the device to visual device table in sql database. When the "Add Audio device" button is clicked it need to load the php page with form to send the data to the audio table in the db. But nothing loads when the buttons are clicked... I want to load the two pages when the respective buttons are clicked
here is the code to hit php file through anchor tag.
<html>
<body>
visit php file
</body>
</html>
here is the code to hit php file through button.
<form action="audio.php" method="get">
<input type="text" name="id">
<input type="submit" value="Open Form">
</form>
you can do it by adding onclick event as follows
<button onclick="window.location.href = 'audio.php';">Add Audio device</button>
<button onclick="window.location.href = 'visual.php';">Add Visual device</button>
//It can be useful when you are not using a <form> tag.
I am building a PHP website that has one page that contains all of the UI (header, footer, etc.), and other pages that just contain the content. In my main file, between the header and footer, I put the code:
<?php
echo $_POST["content"];
?>
I was planning to also provide the user with a hyperlink that would refresh the page while sending POST data, in this case the contents of one of the other php content files. How would I create this link?
Thank you very much,
Cello Guy
You should use JavaScript to send the form, here is an example with jQuery:
<form id="myForm">
<input type="hidden" name="content" value="<?= htmlspecialchars($content) ?>">
</form>
Send
<script>
$(function(){
$('#myLink').click(function(){
$('#myForm').submit();
});
});
</script>
There is one "create profile" page written in PHP. There are 2 forms and 1 JQuery function.
<script type="text/javascript" >
$(document).ready(function(){
$('#photoimg').change(function(){
$("#imageform").ajaxForm({
target: '#preview'
}).submit();
});
});
</script>
This is where the image is displaying:
<div id='preview'></div>
Form-1: (For profile image uploading)
<form id="imageform" method="post" enctype="multipart/form-data" action='ajaximage.php'>
<input name="photoimg" id="photoimg" type="file" />
</form>
Form-2: (For other text information)
<form class="form-signin" name="reg" role="form" action="process.php" method="post">
.... some normal input values ....
<input type="submit" value="Submit">
</form>
The problem:
When I am clicking on the "photoimg" to browse image file and choose, the JQuery "onchange" is working perfectly and the "imageform" is getting submitted and 'ajaximage.php' being called the uploaded image is being showed up perfectly on the main page in the DIV 'preview' without refreshing the main page. This portion is working perfectly.
Now after that if I click on SUBMIT button of Form "reg", instead of going to "process.php" it is again going to "ajaximage.php". This is the problem.
If I REFRESH the main page and then click on SUBMIT button of Form "reg", then it will go to "process.php".
I am not sure if my question is clear. Thanks in advance for your time & help.
Adding the "ajaximage.php" code for your reference:
if(isset($_POST) and $_SERVER['REQUEST_METHOD'] == "POST")
{
.......
do all the image upload stuff & update database
.......
echo "<img src='uploads/".$actual_image_name."'>";
}
Possible walk through.
Check if all the html tags are properly closed after your target div is updated.
Try to focus out of file element after completion of request.
Check for jQuery errors on your console.
Check if some ids are not conflicting.
The idea is to preview (this part works fine) the form somewhere so, if corrections are needed we can go back to the unrefreshed form to make corrections.
I have this form:
<form action="../../../../sendmail.php" id="Formulaire" method="post" name="Formulaire" onsubmit="return checkform()" target="_self">
I have a submit button to preview:
<input id="captcha" name="_Preview" type="submit" value="Preview" />
And here is my php code (from sendmail.php)
if(isset($_POST['_Preview'])) { echo $text; ?>
As stated above the preview (content of array $text) works well although it is presented on a blank page.
I like it to be presented either in a div on the form page or in a popup Window so when I close the popup I am back on the non-refreshed form.
I tryed different ways, my problem is everytime, after submitting the preview button I endup having the sendmail.php form in the background (blank of course or with the preview data). I don't know what approach to take. Thank you for your help.
I have a page with file upload form.
<form enctype="multipart/form-data" method="post" action="uploaded.php">
<input type="file" name="my_file">
<input type="submit">
</form>
I need to post results into a modal window created with colorbox jQuery plugin.
http://colorpowered.com/colorbox/
Does anyone know how do do this?
Thanks
Colorbox is client-side, upload server-side. You have to create a php page which displays uploaded images and "apply" colorbox on it.