This question already has answers here:
jQuery Ajax POST example with PHP
(17 answers)
Closed 8 years ago.
I developed a php form which initiates a database request to fetch data depending on a drop down choice.
PHP Form:
<form method="get" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>">
<select name="town" onchange='this.form.submit()'>
<?php $result= mysql_query('Query'); ?>
<option value="x" selected>Select Choice</option>
<?php while($row= mysql_fetch_assoc($result)) { ?>
<option value="<?php echo htmlspecialchars($row['town']);?>" >
<?php echo htmlspecialchars($row['town']); ?>
</option>
<?php } ?>
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>
Form action:
<?php
if(isset($_GET["action"])) {
$var1= $wpdb->get_results("Query");
$var2= $wpdb->get_results("Query");
Content to show once executed }
?>
How can I make the form fetch the Data using AJAX not to stay refreshing the whole page continuously but only the form part?
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>
<form id="form_id" action="<?php echo $url = basename($_SERVER['PHP_SELF']); ?>" method="post">
<select id="town" name="town" onchange="send_to_server()">
<?php $result= mysql_query("Query"); ?>
<option value="x" selected>Select Choice</option>
<?php while($row= mysql_fetch_assoc($result)){ ?>
<option value="<?php echo htmlspecialchars($row['town']); ?>">
<?php echo htmlspecialchars($row['town']); ?>
</option>
<?php } ?>
<input type="hidden" name="action" value="submit" /><br>
</select>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
function send_to_server(){
var value = $("#town").val();
/* get some values from elements on the page: */
var $form = $("#form_id"); var url = $form.attr('action');
/* Send the data using post */
var posting = $.post( url, { option_value: $("#town").val() } );
posting.done(function( data ) {
alert('success');
});
}
</script>
</body>
</html>
The above does exactly what you want. Check it in localhost
Related
I am trying to pass the select values for form action URL for wordpress,
$args_shortcode = shortcode_atts(array(
'category_name' => ''
), $attr);
$condition = "";
if(isset($_POST['Collateral_services'])){
$condition = "/?Collateral_services=".$_POST['Collateral_services'];
}
$action_url = site_url() . "/category/" . $args_shortcode['category_name'] . $condition;
As you can see, the action url will redirect user to a different page which is getting fetched from shortcode attribute, so $_POST['Collateral_services'] is not fetching any data because it needs to be on search result page,
But the action URL needs to be based on selected option of the form, so I am not getting how can I change values in url after "/category/" using javascript or jQuery ?
form:
<form method="POST" action="<?php echo $action_url; ?>">
<div class="form-group">
<div class="col-xs-12 col-sm-12">
<select name="Collateral_services" class="custom-select-input">
<option value="" disabled selected>All Services</option>
<?php
foreach ($terms_ser as $term_ser) {
?>
<option value="<?php echo $term_ser->slug; ?>"><?php echo $term_ser->name; ?></option>
<?php } ?>
</select>
</div>
</div>
<div class="custom-search-button-align">
<input type="submit" value="Filter" class="custom-search">
</div>
</form>
<form action="mydtr" method="post">
<select id="periodname">
<?php foreach($period as $period): ?>
<option><?= $period['period']; ?></option>
<?php endforeach; ?>
</select>
</form>
Im looking for ways to prevent selection options to reset after i select and submit. thank you in advance for the help
Not sure if this is what you asking for but here you go.
<?php $period = array("period1", "period2", "period3", "period4"); ?>
<form action="" method="post">
<select id="periodname" name="periodname">
<?php foreach($period as $period): ?>
<option><?= $period; ?></option>
<?php endforeach; ?>
</select>
<input value="submit" type="submit"></form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<?php if(isset($_POST["periodname"])): echo "Form was submitted and we set that value of the select box to selected ".$_POST["periodname"];?>
<script>
$( "#periodname option" ).each(function( index ) {
var item = $(this).val();
if(item == "<?php echo $_POST["periodname"]?>"){
$(this).prop('selected', true);
}
});
</script>
<?endif;?>
I am confused as to why my select is not passing any post data to the results page. If I run var_dump($_POST); the select (#boxdest or #boxdest2) is not being displayed. Is there some special way to pass select to php results page. What I normally do is as an example: $var=$_POST['boxdest'];. Problem is the select is not being sent from original code. I have posted my code and would be grateful if someone could show me where I have gone wromg. Many thanks.
<?php
$conn = mysql_connect("localhost","root","");
mysql_select_db("sample",$conn);
$result = mysql_query("SELECT * FROM boxes where department = '{$_GET['dept']}'");
?>
<select id="boxdest" name="boxdest[]"size="7">
<?php
$i=0;
while($row = mysql_fetch_array($result)) {
?>
<option value="<?php echo $row["custref"];?>"><?php echo $row["custref"];?></option>
<?php
$i++;
}
?>
</select>
<input type="button" id="submit2" name="submit2" value=">" />
<input type="button" id="submit3" name="submit3" value="<" />
<select id="boxdest2" name="boxdest2[]" size="7"></select>
<script type="text/javascript">
$("#submit2").click( function()
{
//alert('button clicked');
$box1_value=$("#boxdest").val();
$box1_text=$("#boxdest option:selected").text();
$("#boxdest2").append('<option value="'+$box1_value+'">'+$box1_text+'</option>');
$("#boxdest option:selected").remove();
});
$("#submit3").click( function()
{
//alert('button3 clicked');
$box2_value=$("#boxdest2").val();
$box2_text=$("#boxdest2 option:selected").text();
$("#boxdest").append('<option value="'+$box2_value+'">'+$box2_text+'</option>');
$("#boxdest2 option:selected").remove();
}
);
</script>
I am using a while loop to display results from a query. The while loop is working fine. In hidden fields I would like to post the values of userID and accessID to the user details page. I am submitting the form using javascript to submit from a link. My problem is that regardless of the username I click I can only post the values for the first displayed record. What am I doing wrong?
The code:
<?php
while($row = $result->fetch_array()) { ?>
<form method="post" action="edit_user.php" id="userForm">
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
</form>
<?php } ?>
The javascript used for submitting the form:
function submitForm() {
var form = document.getElementById("userForm");
form.submit();
}
Thank you.
EDIT - I don't want to pass the values in the url.
you are generating multiple <form>s inside loop, move your <form> outside while loop, like:
<form method="post" action="edit_user.php" id="userForm">
<?php
while($row = $result->fetch_array()) { ?>
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID[]" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID[]" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
<?php } ?>
Submit
</form>
You're running into trouble because of this line
var form = document.getElementById("userForm");
In Javascript and HTML, an ID is supposed to be unique to a certain DOM element. In this case, you've got a whole load of form tags that have the same ID. You need to give each form a different ID, and then pass that ID to the submitForm function.
For example:
<?php
$id = 0;
while($row = $result->fetch_array()) { ?>
$id++;
<form method="post" action="edit_user.php" id="<?php echo "userForm".$id ?>">
<tr>
<td>
<?php echo $row['firstname'].' '.$row['surname']; ?>
<input type="hidden" name="userID" value="<?php echo $row['userID']; ?>" />
<input type="hidden" name="accessID" value="<?php echo $row['accessID']; ?>" />
</td>
</tr>
</form>
<?php } ?>
and then
function submitForm(id) {
var form = document.getElementById(id);
form.submit();
}
edit: how do I php? :D
I have a while in PHP that is building a table. Inside my while, I have a dropdown menu that I want to execute code on change.... The form submit on change doesn'T work...
This is my code:
<?
while ($data2 = mysql_fetch_array( $data))
{ ?>
<form name="FormSize" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<td>
<select name="size[]" class="form-field3" OnChange="document.FormSize.submit();" >
<? foreach ($sizearray as $value) { ?>
<option value="$value" <? if($data2['size'] == $value) { echo "selected";} ?> ><? echo $value; ?></option>
<? } ?>
</select>
<input type="hidden" name="product_id[]" value="<? echo $data2['product_id']; ?>">
</td>
</form>
<? } ?>
and on top of my page, I have this to execute the code..
<?
//submit size form
if (isset($_POST['size']))
{
foreach($_POST['product_id'] as $key => $id)
{
$product_id = $id;
$newsize = $_POST['size'][$key];
$sql3 = mysql_query("update cart SET size = '".$newsize."' where product_id = '".$product_id."' ");
}
?>
any idea why it's not executing ?
You have multiple forms with the same name="FormSize". So document.FormSize will be an array-like object, and you need to access the appropriate one. You can do this by using this.form to refer to the <form> that contains the <select>.
You also need to fix the element nesting -- the <form> has to be inside the <td>, not the other way around.
<?
while ($data2 = mysql_fetch_array( $data))
{ ?>
<td>
<form name="FormSize" action="<?php echo $_SERVER['PHP_SELF']; ?>" method="post" >
<select name="size[]" class="form-field3" OnChange="this.form.submit();" >
<? foreach ($sizearray as $value) { ?>
<option value="$value" <? if($data2['size'] == $value) { echo "selected";} ?> ><? echo $value; ?></option>
<? } ?>
</select>
<input type="hidden" name="product_id[]" value="<? echo $data2['product_id']; ?>">
</form>
/td>
<? } ?>
Could be because the html is not valid, you cannot put your form tag as a direct child of a tr.
Apart from that, naming all your forms the same will make it pretty hard to submit a specific one by its name.
As you are using arrays for your input names, I assume that you mean all of them to be in the same form, so you should just have your form wrap the table and take it out of the while loop.