I have a form with action attribute as searchbycat.php. in the form there is a selection field based upon which contents in the php page will be dynamically made. so I am passing the selected value by GET and processing the value in searchbycat.php. so I am implementing jQuery's click event when the user clicks the submit button and changing the action attribute value with the selected value from the drop down menu. but it does not seem to work. I searched for this in stackoverflow and found that it can be done in jquery ajax call. but those answers is not really helping me. can somebody please explain how to do this?
here is my code:
<form action="" id="form1" method="POST">
<select name="category">
<option>Search By Category</option>
<option value="mobile">Mobile Phone</option>
<option value="computer">Computer Electronics</option>
<option value="book">Books</option>
<option value="fashion">Fashion and Beauty</option>
<option value="furniture">Furniture</option>
<option value="house">House Rent</option>
<option value="vehicle">Vehicle</option>
</select>
<input type="submit" name="submit" id="search" value="Search"/>
</form>
and here is the Jquery part I am trying to do:
<script type="text/javascript">
$(document).ready(function(){
$('#search').click(function(){
$('#form1').attr("action","searchbycat.php?category=<?php echo $_POST['category']?>");
});
});
Just change your form to method = 'GET' and action="searchbycat.php"
It will send automatically like you want. You don't really will need the jquery in this situation
Related
I have the following form I want to use to filter through products on my website:
<div class="top-filter-select-container">
<form method="GET" action="" id="sort-filter-pick">
<select class="selectpicker" id="sort-filter">
<option value="popularity">Sort by Popularity</option>
<option value="ratings">Sort by Ratings</option>
<option value="newest">Sort by Newest</option>
<option value="lowest">Sort by Lowest Price</option>
</select>
</form>
</div>
I am trying to reload my page when an option is selected using jQuery form.submit() and retrieve the selected option to be used for filtering with a SQL query. I would eventually want to use this value along with other filtering values for a more complex filtering.
$(function(){
$('#sort-filter').on('change', function() {
var action = $(this).val();
$("#sort-filter-pick").attr("action", "?sort=" + action);
this.form.submit();
});
});
To test my code, I am just trying to echo isset($_GET['sort']) ? $_GET['sort'] : null;
The code works if I change form method to POST instead of GET but doesn't work with GET. On websites such as Amazon, the GET form method is used when applying filters from a select option but I also notice that the ?sort=... is added to the page URL after the form is submitted, which is not the case for me if I use GET. I was wondering what would be the right approach to do the same thing.
If you add a "name" to your form-elements you don't need to manually add the sort-criteria with jQuery.
HTML:
<div class="top-filter-select-container">
<form method="GET" action="" id="sort-filter-pick">
<select class="selectpicker" name="sort" id="sort-filter">
<option value="popularity">Sort by Popularity</option>
<option value="ratings">Sort by Ratings</option>
<option value="newest">Sort by Newest</option>
<option value="lowest">Sort by Lowest Price</option>
</select>
</form>
</div>
Javascript:
$(function(){
$('#sort-filter').on('change', function() {
this.form.submit();
});
});
Or you could just use location.href = url rather than posting the form.
Well i'm submitting form through onChange of select
<form name="selForm" id="selForm" type="POST>
<select name="sel_status" id="sel_status">
<option value="one">one</option>
<option value="two">two</option>
</select>
</form>
My jQuery Code
$('#sel_status').change(function(){
$('#selForm').submit();
});
And then i'm echoinging the value submitted in php
echo $_POST['sel_status'];
My network tab in Chrome showing 302 status
So how to submit the form through onChange of select and receive those values in php?
<form name="selForm" id="selForm" type="POST">
The action is missing and it's method, not type
You've got an error in your HTML code.
First, there is a " missing (after POST) and this attribute is called method, not type. So the correct code should be:
<form name="selForm" id="selForm" method="post">
<select name="sel_status" id="sel_status">
<option value="one">one</option>
<option value="two">two</option>
</select>
</form>
If your PHP code is in an other file, you also have to set the action="yourfile.php" attribute
Use $_POST['sel_status'];
You cannot use echo $_POST['selForm']; "selForm" is name of the form.
Add form action="yourphpfile.php" and change method="POST".
Try:
echo $_POST['sel_status'];
I'm still learning to use PHP with MySQL tables and I'm sorry if this is a novice question but how would I change the dropdown code below to be able to insert normal a href links (with an image or text) that link to the playerMenu.php page? Here's the dropdown menu code I have:
<form action="playerMenu.php" method="get">
<select id="players" name="selectvalue" onchange="showMe(this.value);">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input type="submit" value="Submit">
<form>
Submit
Thanks in advance.
Here's how using JQuery. It works! Try it out!
<!-- Your Form -->
<form>
<select id="players" name="selectvalue" onchange="showMe(this.value);">
<option value="">Select</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
<option value="4">D</option>
</select>
<input id="button" type="button" value="Submit">
<form>
<!-- Include JQuery -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var sub_link = "playerMenu.php?electvalue="
$("#button").click(function() {
sub_link = sub_link + $("#players").find('option:selected').text();
// Here's your link
alert(sub_link);
// And now we do a javascript redirect
window.location.replace(sub_link);
});
</script>
From the PHP side, once you submit that form then the url will be
playerMenu.php?players=1&submit=Submit
If the option A was chosen. You can remove the onchange and onclick javascript, if this is what you want to achieve.
From there you have passed in the value of the players select box. You would want to then likely save this as a variable and what you want with the code. If you are doing something with your database then make sure to santize the variable as well.
i have a dropdown menu generated by my php when the page loads filling with my rows in the sql table, being the table ID(Value) and they NAME.
<select>
<option value="0"></option>
<option value=6>Alientech</option>
<option value=2>FNAC</option>
<option value=5>Logitech</option>
<option value=1>MHR</option>
</select>
Then i have:
<input type="text" name="editname">
<input type="text" name="editmail">
<input type="text" name="editwebsite">
<input type="text" name="editphone">
<input type="text" name="editfax">
<input type="text" name="editadress">
<input type="text" name="editincharge">
What i want to do is on selecting the option above he gets the id of the row in mysql and fills the inputs accordingly to the values in the SQL table so a person can edit the values on submitting the form.
How can i with jQuery do this?
Where is your code attempt?
The way to do this is on select of the jquery
you would take the value of the select where
<select id="some_id">
also you will need to ID all your fields of input.
Your PHP script should return a JSON where your on success you parse the JSON and set it to the value of your INPUT field via ID.
$.ajax({
url: some_php_mysql.php
type:post,
data: {some_id:$('#some_id').val()},
success:function(data){
//json object returned - parse and then ID each value
});
First, you could reload the page :
<form action="" method="post" id="myform">
<select name="myselect">
<option value="0" disabled="disabled"></option>
<option value=6>Alientech</option>
<option value=2>FNAC</option>
<option value=5>Logitech</option>
<option value=1>MHR</option>
</select>
</form>
With a little bit of jQuery...
$("form#myform select").change(function(){
$("form#myform").submit(); // Submit the form if the value is changed.
});
And when you load your page, if you find a value for $_POST["myselect"] then you have to load something in the fields (except if it's 0).
You could also do things asynchronously with Ajax (instead of submitting the form, send a HTTP request and parses the result to fill the form). However, if the purpose of your page is only to edit an entry, the you should use the above method.
Ajax reference : http://www.w3schools.com/ajax/
I have dropdown list (menu) and a button created with this code:
<form name="period" action="all.php" method="POST">
<div align="center">
<select name=period_dropdown>
<option value="nill"></option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="120">120</option>
</select>
<input type="submit" value= "OK" >
</div></form>
When option of dropdown is selected, must be on button instead of OK and when button is pressed to be assigned to variable $period1. So, when I select 72, button must have 72 instead of OK and when I click button, variable $period1 to get value 72 (integer). Please, no javascript. Just html and php.
Thanks
You have to use javascript for what you are trying to do. If you want the button to change on the fly without submitting the form, you have to do client-side scripting (javascript).
Either:
Change the value of button after the dropdown is selected and form is submitted
Use two lines of javascript to change the value of the button when the select box is changed
In all.php:
if (isset($_POST['period_dropdown'])) {
$period1 = $_POST['period_dropdown'];
//do something with $period1
}
?>
<form name="period" action="all.php" method="POST">
<div align="center">
<select id="period_dropdown" name="period_dropdown" onchange="updateButton()">
<option value="nill"></option>
<option value="48">48</option>
<option value="72">72</option>
<option value="96">96</option>
<option value="120">120</option>
</select>
<input id="period_button" type="submit" value= "OK" >
</div></form>
<script type="text/javascript">
function updateButton() {
document.getElementById("period_button").value = document.getElementById("period_dropdown").value;
}
</script>