how to keep $_POST after submitting form with onchange event? - javascript

I have a list view and grid view which are submit buttons and I have sort selection if I click on one of the select options the form will be submitted but I want to keep $_POST value whether the list had been clicked or Grid because when I submit the form the data will be gone
I want something like:
Name had been clicked and list had been clicked before that
live example: (I changed it but concept is the same)
I cannot remove onchange submit of select drop down and simply first choose the drop down selection and then submit the buttons because I need it to be like that for when going to the option load the form with new information
The reason why I am submitting on onchange is that I need it because I sort my items with this submit
my question is how can I have them both? do I need two forms? do I need to use jQuery?
or php will do the work?
I kept value of option after submit by javascript but I don't know how to maintain the value of $_POST that which one had been clicked
how can I keep $_POST value when it has been set and submit the form on onchange of sort?
<form method="post" action="">
<div id="gridSort">
<span>View Results As:</span> <span>
<input type="submit" class="listButtons" name="view" value="List"> </span> <span>
<input type="submit" class="resultButtons" name="view" value="Grid"></span>
<select id="sortSelect" class="sortSelect" size="1" name="sort" onchange="this.form.submit();">
<option selected>Sort</option>
<option value="Name">Name</option>
<option value="PriceLowToHigh">Price - Low</option>
<option value="PriceHighToLow">Price - High</option>
</select>
</div>
</form>
<script type="text/javascript">
document.getElementById('sortSelect').value ="<?php if(! $_POST['sort']):?>"Sort"<?php else: echo $_POST['sort']; endif;?>";
</script>
<?php
if(isset($_POST["view"])):
if($_POST["view"]=="Grid")
{
echo "Grid clicked";
echo "<br/>";
}
if($_POST["view"]=="List" )
{
echo "List clicked";
echo "<br/>";
}
endif;
?>

Simply add a hidden field to your form:
<form method="post" action="">
<input name="selected_sort" value="<?php echo !empty($_POST['sort']) ? strip_tags($_POST['sort']) : ''; ?>" />
<input name="selected_view" value="<?php echo !empty($_POST['view']) ? strip_tags($_POST['view']) : ''; ?>" />
<div id="gridSort">
<span>View Results As:</span> <span>
<input type="submit" class="listButtons" name="view" value="List"> </span> <span>
<input type="submit" class="resultButtons" name="view" value="Grid"></span>
<select id="sortSelect" class="sortSelect" size="1" name="sort" onchange="this.form.submit();">
<option selected>Sort</option>
<option value="Name">Name</option>
<option value="PriceLowToHigh">Price - Low</option>
<option value="PriceHighToLow">Price - High</option>
</select>
</div>
</form>
This will allow the data to be sent across in all subsequent form submits

<form method="GET" action="">
<body >
<div id="gridSort">
<span>View Results As:</span> <span>
<input type="submit" class="listButtons" name="view" value="List"> </span> <span>
<input type="submit" class="resultButtons" name="view" value="Grid"></span>
<select id="sortSelect" class="sortSelect" size="1" name="sort" onchange="this.form.submit();">
<option selected>Sort</option>
<option value="Name">Name</option>
<option value="PriceLowToHigh">Price - Low</option>
<option value="PriceHighToLow">Price - High</option>
</select>
</div> </body>
</form>
<script type="text/javascript">
document.getElementById('sortSelect').value ="<?php if(isset( $_GET['sort'])){ echo $_GET['sort']; } ?>";
</script>
<?php
if(isset($_GET["view"])){
if($_GET["view"]=="Grid")
{
echo "Grid clicked";
echo "<br/>";
}
if($_GET["view"]=="List" )
{
echo "List clicked";
echo "<br/>";
}
}
?>
I TRIED TO REWRITE YOUR CODE WORKS FINE, but you need to replace post method with get, this will help user on reference and page refresh as many as he want.

Here is what I did for someone who will become frustrated like me:
<form method="post" action="" id="myform">
<div id="gridSort">
<input type="hidden" name="selected_sort" value="<?php echo !empty($_POST['sort']) ? strip_tags($_POST['sort']) : ''; ?>" />
<input type="hidden" name="selectionList_view" value="<?php echo !empty($_POST['Listview']) ? strip_tags($_POST['Listview']) : ''; ?>" />
<input type="hidden" name="selectionGrid_view" value="<?php echo !empty($_POST['Gridview']) ? strip_tags($_POST['Gridview']) : ''; ?>" />
<span>View Results As:</span> <span>
<input type="submit" class="listButtons" name="Lisview" value="List"> </span> <span>
<input type="submit" class="resultButtons" name="Gridview" value="Grid"></span>
<select id="sortSelect" class="sortSelect" size="1" name="sort" onchange="this.form.submit();" >
<option selected>Sort</option>
<option value="Name">Name</option>
<option value="PriceLowToHigh">Price - Low</option>
<option value="PriceHighToLow">Price - High</option>
</select>
</div>
</form>
<script type="text/javascript">
document.getElementById('sortSelect').value ="<?php if(! $_POST['sort']):?>"Sort"<?php else: echo $_POST['sort']; endif;?>";
</script>
<pre>
<?php print_r($_POST); ?>
</pre>

Related

Why im not getting all the values from the select element?

I ran into a little problem, when i submit the form through JS i would like to get all of the values from the select element... I mean like for every user the value of the select element.
<?php foreach($users as $user) : ?>
<div>
<p><?php echo $user['user_first'].' '.$user['user_last']; ?></p>
<form action="" method="post">
<select name="user-state">
<option value="Je na hodine">Je na hodine</option>
<option value="Chýba">Chýba</option>
<option value="Meškanie">Meškanie</option>
</select>
<input type="input" name="user" value="">
</form>
</div>
<?php endforeach; ?>
JS:
document.getElementById('saveBtn').addEventListener('click', function(){
document.getElementById('dochadzka-form').submit(); });
If you want all the data on a single submit you need to wrap all inputs inside a single form. To get the data as an array in PHP after submitting you should format the name attribute like name="user-state[]".
Something like this should do the trick (untested):
<form action="" method="post">
<?php foreach($users as $user) : ?>
<fieldset>
<legend><?php echo $user['user_first'].' '.$user['user_last'] ?></legend>
<input name="user[]" value="<?php echo $user['id'] ?>" type="hidden">
<select name="user-state[]">
<option value="Je na hodine">Je na hodine</option>
<option value="Chýba">Chýba</option>
<option value="Meškanie">Meškanie</option>
</select>
</fieldset>
<?php endforeach; ?>
<button type="submit">Submit</button>
</form>
An example to illustrate how this works:
// This is only needed to show the form data in this example.
// If you only need the data in PHP you don't need any JavaScript.
var form = document.getElementById("dochadzka-form");
form.addEventListener("submit", function(event) {
var data = new URLSearchParams(new FormData(form)).toString();
console.log(data);
event.preventDefault(event);
});
<form action="" method="post" id="dochadzka-form">
<fieldset>
<legend>User 1</legend>
<input name="user[]" value="1" type="hidden">
<select name="user-state[]">
<option value="Je na hodine">Je na hodine</option>
<option value="Chýba">Chýba</option>
<option value="Meškanie">Meškanie</option>
</select>
</fieldset>
<fieldset>
<legend>User 2</legend>
<input name="user[]" value="2" type="hidden">
<select name="user-state[]">
<option value="Je na hodine">Je na hodine</option>
<option value="Chýba">Chýba</option>
<option value="Meškanie">Meškanie</option>
</select>
</fieldset>
<br>
<button type="submit">Submit</button> to show the form data
</form>
<form action="" method="post">
<?php $i = 0; foreach($users as $user) : ?>
<div>
<p><?php echo $user['user_first'].' '.$user['user_last']; ?></p>
<select name="user-state<?= $i?>">
<option value="Je na hodine">Je na hodine</option>
<option value="Chýba">Chýba</option>
<option value="Meškanie">Meškanie</option>
</select>
<input type="input" name="user<?= $i?>" value="">
</div>
<?php $i++; endforeach; ?>
</form>

How to display the list from database using selected value in drop down

manage_bank
Hi everyone,
Can someone help me, How to display the bank name based on selected drop down, when we choose
for example:- 50 records
then it will display 50 records of the bank name from database.
When we logout the value still remain the same 50 records.
<?php
// Includes the required files
include ("../ecompany/terms_includes.php");
?>
<?php
// Check user authority for this page
$ModuleName = "Manage Banks";
$ModuleAction = "view";
base_checkAuthority($ModuleName,$ModuleAction)
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<?php
include PATH_INC_HEAD;
?>
<?php
//get page number
$page = $_GET["page"];
$record = $_GET["record"];
//get Miscellaneous detail
$MiscellaneousDetail = base_getMiscellaneousDetail();
?>
<?php
if(!isset($page))
{
$page = 1;
}
if(!isset($record))
{
$record = $MiscellaneousDetail['base_mis_default'];
}
//go to reload page
if(isset($_POST['load']))
{
$page = 1;
$record = $_POST['records_per_page'];
}
//go to add profile page
if(isset($_POST['add']))
{
echo '<script type="text/javascript">' . "\n";
echo 'window.location="../ecompany/add_bank.php";';
echo '</script>';
}
//go to home page
if(isset($_POST['cancel']))
{
echo '<script type="text/javascript">' . "\n";
echo 'window.location="../terms_base/home.php";';
echo '</script>';
}
?>
</head>
<body>
<div class="container">
<?php
include PATH_INC_HEADER;
?>
<div class="main_body1">
<div id="update_category"></div>
<div style="width:800px; margin:auto">
<?php
include PATH_INC_DESC;
?>
<div style="clear:both"></div>
<form name="bank_list_form" id="bank_list_form" method="post" action="">
<div style="width:800px; margin:auto; text-align:left">
<select name="records_per_page" id="records_per_page" >
<option value="<?php echo $record; ?>">Default Records/Page :</option>
<option value="1" title="1" >1</option>
<option value="3" title="3" >3</option>
<option value="5" title="5" >5</option>
<option value="10" title="10" >10</option>
<option value="20" title="20" >20</option>
<option value="30" title="30" >30</option>
<option value="50" title="50" >50</option>
<option value="100" title="100" >100</option>
<option value="200" title="200" >200</option>
<option value="500" title="500" >500</option>
<option value="1000" title="1000" >1000</option>
</select>
<input type="" size="4" style="width:25px" name="record"
id="record"value="<?php echo $record; ?>" readonly="readonly" />
<div id="searchbutton">
<input type="submit" id="load" name="load" value="Refresh">
</div>
</div>
<table cellspacing="1" class="tablesorter">
<thead>
<tr>
<th></th>
<th>Code</th>
<th>Name</th>
<th>Description</th>
<th>Remark</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php ecoy_listBank($page, $record) ?>
</tbody>
<tr>
<td align="center" colspan="8"><input type="submit" id="add"
name="add" value="Add Bank" /><input type="submit" id="cancel"
name="cancel" value="Cancel" /></td>
</tr>
</tfoot>
</table>
</form>
<br />
</div>
<div class="clearboth"></div>
</div>
<?php
include PATH_INC_FOOTER;
?>
</div>
</body>
</html>
Much appreciate, Thanks.
The title of your question is misleading. But if I got it right you actually succeed in querying your data correctly and refreshing the number of records with your refresh button.
You real question is how to persist the default value of the dropdown after a logout.
By mentioning your logout feature I assume you have users and a user table in your database.
From here you have two solutions I can think of:
1. Save the users preferences like the default value of your dropdown within your users table or create a separated table dedicated for this purpose.
2. Store users preferences in cookies

want to make these php function work inside this html echo [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 6 years ago.
Improve this question
this is php document, when building this form i want to use that forech function to build the dropdown menu... as im inside the (HTML) it doesnt work... anyone has a clue how to make it work?
echo <<<HTML
<form method="post" class="form">
<label for="datafalta">Data da falta</label>
<input id="datafalta" type="date" value="{$dateToday}" name="datafalta"/>
<label for="alunofalta">Selecionar aluno</label>
<select name="aluno">
<option value="0" selected></option>
foreach ($calfaltas as $a) {
<option value="1">$a->nome</option>
}
</select><br /><br />
<input type="submit" name="enviar" value="Enviar">
</form>
HTML;
You cannot mix html and php as you are. For a start you are missing such simple parts like '' around strings.
<?php
echo '
<html>
<form method="post" class="form">
<label for="datafalta">Data da falta</label>
<input id="datafalta" type="date" value="' . $dateToday . '" name="datafalta"/>
<label for="alunofalta">Selecionar aluno</label>
<select name="aluno">
<option value="0" selected></option>';
foreach ($calfaltas as $a) {
echo '
<option value="1">' . $a->nome . '</option>';
}
echo '
</select><br /><br />
<input type="submit" name="enviar" value="Enviar">
</form>
<html>';
This should work:
<?php
echo"<form method='post' class='form'>
<label for='datafalta'>Data da falta</label>
<input id='datafalta' type='date' value='{$dateToday}' name='datafalta'/>
<label for='alunofalta'>Selecionar aluno</label>
<select name='aluno'>
<option value='0' selected></option>
";
foreach ($calfaltas as $a) {
echo " <option value='1'>$a->nome</option>";
}
echo"
</select><br /><br />
<input type='submit' name='enviar' value='Enviar'>
</form>";
?>
Instead of putting the foreach loop inside the heredoc output....create all the options in variable and output that variable in the middle of the string
$options='';
foreach ($calfaltas as $a) {
$options.='<option value="'.$a->someProperty.'">'.$a->nome.'</option>';
}
echo <<<HTML
<form method="post" class="form">
<label for="datafalta">Data da falta</label>
<input id="datafalta" type="date" value="{$dateToday}" name="datafalta"/>
<label for="alunofalta">Selecionar aluno</label>
<select name="aluno">
<option value="0" selected></option>
$options
</select><br /><br />
<input type="submit" name="enviar" value="Enviar">
</form>
HTML;
note you need to fix value of the <option> tag to reflect proper data in array
Break your heredoc in two parts with the foreach in the middle :
<?php
echo <<<HTML
<form method="post" class="form">
<label for="datafalta">Data da falta</label>
<input id="datafalta" type="date" value="{$dateToday}" name="datafalta"/>
<label for="alunofalta">Selecionar aluno</label>
<select name="aluno">
<option value="0" selected></option>
HTML;
foreach ($calfaltas as $a) {
echo "<option value='{$a->id}'>{$a->nome}</option>";
}
echo <<<HTML
</select><br /><br />
<input type="submit" name="enviar" value="Enviar">
</form>
HTML;
?>

Enable button when select option in PHP using Javascript

I tried some code from other topics to resolve my problem here but I still don't manage to get what I want..
I need a button to goes enable when the user select one of the item in a select option and goes to disable when the users re-select the default select..
<script text="text/javascript">
$(document).ready(function(){
$('#select_resa').change(function(){
var val = $('#select_resa').val();
alert(val);
if (val == '') {
$('#supprimer_resa_button').attr('disabled', 'disabled');
}else{
$('#supprimer_resa_button').removeAttr('disabled');
}
});
});
</script>
<form method="post" action="modif_resa.php?" id="modif_resa">
<h2>Modifier/Supprimer un reservation</h2>
<?php if(isset($erreur)) echo '<p style="font-style:italic;font-size:0.8em;text-align:center;color:red;margin-bottom:5px;">'.$erreur.'</p>'; ?>
<label for="salle"><strong>Choisissez une reservation</strong></label>
<select id="select_resa" name="select_resa">
<option value="" id="select" name="select">--Selectionnez--</option>
<option value=""></option>
<option value="2">salut</option>
<?php
if(!empty($liste_reservations)){
for($i=0;$i<count($liste_reservations);$i++){
echo '<option "title="'.$liste_reservations[$i]['RS_NOM'].'" value="'.$liste_reservations[$i]['RS_NOM'].'" '.(isset($SALLE) && $SALLE==$liste_reservations[$i]['RS_ID']?'selected="selected"':'').'>'.$liste_reservations[$i]['RS_NOM'].'</option>';
}
}
?>
</select>
<br/><br/>
<label for="s_date"> Modifier la date de fin</label>
<input type="text" value="<?php if(isset($RS_DATE)) echo $RS_DATE;?>" name="s_date" id="s_date" maxlength="10" size="10"/>
<img src="/Libs/calendar/calendar_small.png" alt="Calendrier" style="vertical-align:middle; border:0;" title="Calendrier" />
<br/><br/>
<span class="valider">
<input type="submit" name="valider" value="<?php echo TXT_VALIDER; ?>" />
</span>
<br/><br/>
<div style="text-align:center; margin-top: 50px;">
<input id="supprimer_resa_button" disabled="disabled" type="submit" name="supprimer_resa_button" style="font-size: 15px; width: auto; height:auto; font-weight:bold;" value="<?php echo TXT_SUPPRIMER_RESA; ?>" />
</div>
</form>
My Submit button is enable in any case here...
Where am I wrong ?
Please check this:
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script text="text/javascript">
$(document).ready(function(){
$('#select_resa').change(function(){
var val = $('#select_resa').val();
if (val == '') {
$('#supprimer_resa_button').attr('disabled', 'disabled');
}else{
$('#supprimer_resa_button').removeAttr('disabled');
}
});
});
</script>
<form method="post" action="modif_resa.php?" id="modif_resa">
<h2>Modifier/Supprimer un reservation</h2>
<?php if(isset($erreur)) echo '<p style="font-style:italic;font-size:0.8em;text-align:center;color:red;margin-bottom:5px;">'.$erreur.'</p>'; ?>
<label for="salle"><strong>Choisissez une reservation</strong></label>
<select id="select_resa" name="select_resa">
<option value="" id="select" name="select">--Selectionnez--</option>
<option value="1">abc</option>
<option value="2">def</option>
<option value="3">ghi</option>
<?php
if(!empty($liste_reservations)){
for($i=0;$i<count($liste_reservations);$i++){
echo '<option "title="'.$liste_reservations[$i]['RS_NOM'].'" value="'.$liste_reservations[$i]['RS_ID'].'" '.(isset($SALLE) && $SALLE==$liste_reservations[$i]['RS_ID']?'selected="selected"':'').'>'.$liste_reservations[$i]['RS_NOM'].'</option>';
}
}
?>
</select>
<br/><br/>
<label for="s_date"> Modifier la date de fin</label>
<input type="text" value="<?php if(isset($RS_DATE)) echo $RS_DATE;?>" name="s_date" id="s_date" maxlength="10" size="10"/>
<img src="/Libs/calendar/calendar_small.png" alt="Calendrier" style="vertical-align:middle; border:0;" title="Calendrier" />
<br/><br/>
<span class="valider">
<input type="submit" name="valider" value="<?php echo TXT_VALIDER; ?>" />
</span>
<br/><br/>
<div style="text-align:center; margin-top: 50px;">
<input id="supprimer_resa_button" disabled="disabled" type="submit" name="supprimer_resa_button" style="font-size: 15px; width: auto; height:auto; font-weight:bold;" value="<?php echo TXT_SUPPRIMER_RESA; ?>" />
</div>
</form>
You just need to use:
$('#supprimer_resa_button').removeAttr('disabled');
instead of
$('#supprimer_resa_button').attr('disabled', '');
In recent jQuery api, you must use prop on boolean html attributes :
$('#supprimer_resa_button').prop('disabled', false)
Or
$('#supprimer_resa_button').prop('disabled', true)
attr is only with html attributes which can contain a value.
In your case, you can also do a little shorter :
function updateFormEnabled() {
$('#supprimer_resa_button').prop('disabled', verifyAdSettings());
}

Hide input fields by default and show it when selecting a value from select field

In my code, I have one select field and two read only fields. I need to hide the read only fields by default (while loading the page) and need to show these fields if any of the value selected from the select field. The values to select field is getting from mysql data base using php.
<select id ="name" name="name" class="form-control" required>
<option value="" disabled selected>Choose Wallet</option>
<?php
//my query
echo '<option value="' . $row['group'] . '">' . $row['group'] . '</option>';
?>
</select>
<input id ="od" value="<?php echo $od ?>" class="form-control" readonly/>
<input id="bal" value="<?php echo $bal ?>" class="form-control" readonly/>
Try
function onNameChange() {
var name = document.getElementById('name');
document.getElementById('od').style.display = name.value ? 'inline-block' : 'none'
document.getElementById('bal').style.display = name.value ? 'inline-block' : 'none'
}
<!-- use a change event handler for the select -->
<select id="name" name="name" class="form-control" onchange="onNameChange()" required>
<option value="" disabled selected>Choose Wallet</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<!-- Hide the inputs using `display: none` -->
<input id="od" value="<?php echo $od ?>" class="form-control" style="display: none" readonly/>
<input id="bal" value="<?php echo $bal ?>" class="form-control" style="display: none" readonly/>

Categories