I have a PHP submit form, within that form I have a PHP image gallery that displays images from a folder. (I have a dropdown to select images from different folders).
When I click on an image from the gallery the path to that image is entered into an input field so it can be linked to the other information when submitted.
My problem is when I choose a different image gallery folder from the dropdown it submits the form. I understand why it does this, but am unsure how to change the way it uses PHP to choose different folders to JS/JQ so there is no need for a submit or refresh.
Here is the relevant code...
<script>
function change(){
document.getElementById("myfolders").submit();
}
</script>
$subF = $_POST['otherFolders'];
<form id="myfolders" method="post">
<select name="otherFolders" onchange="change()">
<option selected="selected">Other Galleries</option>
<?php
$otherFolders = $dirs2;
foreach($otherFolders as $item){
?>
<option value="<?php echo $item; ?>"><?php echo $item; ?></option>
<?php
}
?>
</select>
Thanks for any help
I believe that you dont want to refresh the page when a user clicks on submit. There is very limited info from the question, so I cannot provide changes to your code. But, what you want to do is either prevent the form from submitting by using the preventDefault(); function in JS and then reading the form elements, submitting an aJax request to your server (PHP), and using the server response to display on the page.
If you do not want the form to even submit, you can just make a button that does not submit a form, but simply has an onClick event that reads the form elements and does the same as above.
Form submit will always refresh the page if not prevented. If an action attribute is not provided, it will default to submitting the form to the current page.
Related
I have a div result_head which is hidden by default. Whenever I click a button which will provide options to select results, this hidden div will display as a heading for the form.
<div class="result_head" id="result_head" style="display: none"> >Results</div>
And the form code
<form method="post" id="form_result">
<div class="form-group">
<-----some drop down menus here --------->
<div class="form-group">
<button type="submit" name="result_submit" id="result_submit" style="display: none;margin:1%;" >Submit</button>
</div>
</form>
After the submit and after the page refresh, I need to display the heading for the result.
I tried different methods to achieve without any luck.
Tried Adding onclick and onsubmit finctions along with form submit
<button type="submit" name="result_submit" id="result_submit" style="display: none;margin:1%;" onclick="document.getElementById('result_head').style.display = 'block';">Submit</button>
Tried to echo CSS in php to display_head.
<div class="result_head" id="result_head" style="display: none" <?php if (isset($_POST['result_submit'])){ echo 'style="display:block !important;"'; } ?> >Results</div>
Also found a method echo entire div via php after form submit which will create the new div after form submit. But that option is not feasible for me as I need to display the head before submit as well.
Also while looking into some solutions, found an option to change the button type from sumbit to button and use jquery\ajax to submit the form. I may have to change my entire code for that.
Is there any other way to do it ?
How about the following:
<div class="result_head" id="result_head" style="display: <?php echo ($_POST['result_submit'] ? 'block' : 'none') ?>">Results</div>
It just changes the style from none to block when submited.
after submitting form you can store value in localStorage for example
localStorage.setItem('isHeadingVisible', true);
and add code which will check in every page load is header visible or not by checking this
if(localStorage.get('isHeadingVisible')){}
you can read more about localStorage here
but this will not work if user will use another browser after these operations, because user's localStorage will be emty in new browser, so I would suggest to use backend data here, or check in every page load if localStorage.get('isHeadingVisible') is undefined and form is submitted, set localStorage.setItem('isHeadingVisible', true);
This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Closed 4 years ago.
Is there any way to stop refreshing the page on submit button if your if condition goes false and show all the input fields with values entered?
Since you mentioned PHP, then why not use it?
I assume your question has two parts like below.
Part one - you wrote:
show all the input fields with values entered
By above, you mean using $_SESSION to repopulate the fields with the submitted data?
Part two - you wrote:
Is there any way to stop refreshing the page on submit button if your if condition goes false
Note that submit and any on is an event within the client side processing scope. You can use jQuery or JS validations for that.
Here below are two files for your learning test.
The posting php:
<html>
<body>
<form action="action.php" method="POST">
<input type="text" name="feedback" value="" />
<input type="hidden" name="token" value="123456ABCDEF" />
<input type="submit" value="Submit" />
</form>
</body>
</html>
<?
session_start();
$token = '123456ABCDEF';
if(isset($_SESSION)){
if($_SESSION['token'] == $token){
echo "Your feedback:<br />";
foreach($_SESSION as $field=>$value):
echo $field.": ".$value."<br />";
endforeach;
}else{
echo " Bad token! Cross-Site Request Forgery (CSRF)";
}
}else{
echo "Nothing!";
}
The posted to php:
<?php
session_start();
$_SESSION = $_POST;
$_SESSION['message'] = "Thank you for the feedback!";
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>
Hope I got you right and above helps.
First off, this is a duplicate of JavaScript code to stop form submission
Now, when we got that out of the way, here is abrief explanation. You cannot prevent the browser itself from refreshing. But what you can do is prevent the form from being submitted (and in turn causing a refresh). And this is the usual solution when dealing with form validation in JS.
You can check the abode linked answer for more details.
You can use Post / Redirect / Get Pattern. If you have errors redirect to same page with form and show errors. You can't just "stop" the form during POST.
Other way if you don't want "showing" any redirect you can use ajax request. Form wont "blink".
You can also use javascript for checking field onchange event of input elements.
I'm currently using Opencart which has a form in currency.tpl that changes the currency value depending on the button clicked.
The forms action works off of currency.php, there is then a button within the form that works as a drop down using data-toggle which allows the user to see the currencies available:
<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form-currency">
<button class="buttoninvis" style="font-size:14px; margin-top:-4px;" data-toggle="dropdown">
<?php echo $text_currency; ?></button>
My problem is that I am trying to have more than one action with a data-toggle button (which doesn't seem possible), the button which is currently opening a drop down menu, I would like it to still do this but also have another action which redirects to a different page when the button is clicked and the screen width is below X.
I have tried onclick, css displays, giving the button an ID and adding functions to detect the button click, etc but nothing works I'm not sure if it is to do with the form's action prohibiting it or the data toggle can only have one action?
Any help or ideas around this?
I have a simple form in a PHP application that I have to submit via POST method. Something like:
<form action="URL?page_id=10" method="POST">
<select name="some_name" id="some_id">
<option value='1'>...</option>
<option value='2'>...</option>
...
</select>
...
//submit button here
</form>
The goal is to go to the following URL on submit:
URL?page_id=10&selected_id=SELECTED_ID
where SELECTED_ID is the value chosen by the user from the select drop down menu in the form. I've done it by converting the whole form to post the parameters as GET as I need to have this SELECTED_ID visible in the URL. However, another requirement turned up saying that I need to pass everything through POST and still have the SELECTED_ID visible in the URL and now I'm looking for alternatives.
So the question gets down to: how can I add dynamically another GET parameter to the URL upon POST form submission with one of the values submitted with the form?
first you have to add a id to your form as below
<form id='form1' action="URL?page_id=10" method="POST">
then add call below function on your button click
function test(){
$('#form1').attr('action', $(this).attr('formaction')+'&selected_id='+$('#some_id').val());
}
use <form method="GET"> .. all the field values will be appended to the url automatically
I have a simple form with a submit button (below). I am trying to let the user type in the text box then when he/she clicks submit the page will refresh and echo out what they typed in a div. The data the user types is stored in a database before being echoed. The problem is that when I click submit, the input doesnt show immediatly. I have to click refresh for it to show and when I do my browser gives me a popup (safari) asking to resend the data. This will result in duplicate data inserted in the DB. I have a feeling I need to use javascript and I could also make it more elegant with a fadeIn, but I dont know how to do that. I guess I'm asking if there's a way to use javascript to take a user's text and insert it into a mysql DB and also display it after submit is clicked all on 1 or 0 (prefereably) refreshes. thanks
Here's my code:
<form method='POST' action='index.php'>
<input type='text' name='text' id='text'>
<input type ='submit' value='submit' name='submit'>
</form>
<?php
$input=$_POST['text'];
$put=mysql_query("INSERT INTO table VALUES ('$input')");
echo "<div id='area'>";
//i connect to the DB and echo out the data here
echo "</div>";
?>
I would put the php statements before you're actual html code and would modify you're code like this
<?php
if (isset($_POST['text']))
{
$input = mysql_real_escape_string($_POST['text']);
$put=mysql_query("INSERT INTO table VALUES ('$input')"); //At this point the info has been put inside the DB
echo "<div id='area'>";
//i connect to the DB and echo out the data here
echo mysql_query("SELECT * FROM table");
echo "</div>";
}
?>
<form method='POST' action='index.php'>
<input type='text' name='text' id='text'>
<input type ='submit' value='submit' name='submit'>
</form>
The reason why you don't see it is that the HTML is loaded before you php I think. So I would do a php page where all the sql treatement would be done and once that is done recal you index.php and in there query you're information from the database.
Setting aside SQL injection attacks your code is vulnerable with, the standard practice is to respond to the POST with a redirect back to where the form was. In your case, it will be the page which runs SELECT from table.
No need to use AJAX here. Just make sure that you do one of the following:
Make sure you SELECT from the DB after you have INSERTed the data.
Better, is that if ($_SERVER['REQUEST_METHOD'] == 'POST'), then rather than performing an extra SQL query, just display the POSTed value since you already know it.
A side note on your code sample. If you don't have magic_quotes enabled, it's susceptible to SQL injection, so make sure you properly escape user input before using it in queries.