Im having a problem loading the AJAX and I tried to follow this answer by Praveen Kumar
First drop down menu to auto change the options of a second dropdown
and also read about ajax from http://codex.wordpress.org/AJAX_in_Plugins and it is quoted there
Since Version 2.8, The javascript global variable ajaxurl can be used
in case you want to separate your javascript code from php files into
javascript only files. This is true on the administration side only.
So i guess there is no problem loading ajax in my page. My code goes like this
HTML:
<form action="#" method="POST">
<select name="region" onchange="messi_code(this.value)">
<option>Region Select</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="North">North</option>
<option value="South">South</option>
</select>
<br>
<select id="region_branch" name="region_branch">
<option>Select City</option>
</select>
</form>
AJAX:
<script type="text/javascript">
function messi_code(parent){
url= 'process.php?parent=' + parent,
$.get(url,function(data){
alert(data);
/* $("#region_branch").html(data);*/
});
}
</script>
by the way, in the ajax script I tried POST, GET and remove the type and still having an error in the J-console, error says Uncaught ReferenceError: ajaxfunction is not defined: onchange
would appreciate some help in this.
<form action="#" method="POST">
<select name="region" onchange="messi_fan(this.value);">
<option>Region Select</option>
<option value="East">East</option>
<option value="West">West</option>
<option value="North">North</option>
<option value="South">South</option>
</select>
<br>
<select id="region_branch" name="region_branch">
<option>Select City</option>
</select>
</form>
<script>
function messi_fan(parent){
url= 'process.php?parent=' + parent;
$.post(url,function(data){
alert(data);
});
}
</script>
jsfiddle
Related
I've simple dropdown with some options.
<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="https://instance1.com">Instance1</option>
<option value="https://instance2.com">Instance2</option>
<option value="https://instance3.com">Instance3</option>
<option value="https://instance4.com">Instance4</option>
</select>
<button>Submit</button>
When I select example Instance3 I need to redirect to this custom url on submit.
Can anyone help me to do?
Try this!
function goToUrl(){
window.location = document.getElementById("server-select").value;
};
<label for="server-select">Choose a instance type:</label>
<select name="servers" id="server-select">
<option value="">--Please choose an option--</option>
<option value="https://instance1.com">Instance1</option>
<option value="https://instance2.com">Instance2</option>
<option value="https://instance3.com">Instance3</option>
<option value="https://instance4.com">Instance4</option>
</select>
<button onclick="goToUrl()">Submit</button>
This code won't run properly in the StackOverflow's code snippet. You may have to run it by adding this to your own project.
Thanks and best regards!
$(document).ready(function(){
$('#server-select').change(function(){
window.open(this.value, '_self');
});
});
This will achieve what you are looking for with jQuery, example: https://jsfiddle.net/rz8ty90n/
I'm trying to send data from a HTML select to a PHP file using jQuery. Unfortunately it does not work. I have looked at all the solutions proposed here and it's still not working. Here is the code:
<select id="city" name="city" >
<optgroup label="Popular Cities">
<option selected style="display:none;color:#eee;">Entire country</option>
<option value="city1">city 1</option>
<option value="city2">city 2</option>
<option value="city3">city3</option>
<option value="city4">city4</option>
<option value="city5">city5</option>
</select>
$("#city").change(function() {
$.ajax({
url: 'post.php',
type: 'POST',
data: { city: $(this).val() },
success: function(data) {
alert(data);
window.location.replace("post.php");
window.location.reload("post.php");
}
});
});
$city = isset($_POST['city']) ? $_POST['city'] : false;
echo "".$city."";
The alert() works but I still have no data received in post.php. I have tried with the code below as well but still can't have it.
$.post("post.php", { city: $(this).value }, function(data) {
alert(data);
window.location.reload("post.php");
window.location.replace("post.php");
});
Any help?
You need to use form for this as said in comments
<form action="post.php" method="get" id="frmForm">
<select id="city" name="city" >
<optgroup label="Popular Cities">
<option selected style="display:none;color:#eee;">Entire country</option>
<option value="city1">city 1</option>
<option value="city2">city 2</option>
<option value="city3">city3</option>
<option value="city4">city4</option>
<option value="city5">city5</option>
</select>
</form>
Then use jquery to submit form on city selection
$(document).ready(function() {
$("#city").change(function() {
$('#frmForm').submit();
});
Then you can find city name with $_GET['city'];
It's not how you're meant to use Ajax. What your PHP file should be doing would be to handle the data sent in the Ajax request, and return a content which will be handled by the Ajax success callback.
What you're trying to do here is to:
Post data to post.php, which is working fine,
Then, go on post.php, which doesn't have the data previously sent, since you're making a completly new HTTP request.
What you should be doing would be to submit the form when your select changes, which would redirect you to post.php using HTML, not JavaScript.
Maybe this suits what you want:
HTML file:
<form action="post.php" method="POST">
<select id="city" name="city" >
<optgroup label="Popular Cities">
<option selected style="display:none;color:#eee;">Entire country</option>
<option value="city1">city 1</option>
<option value="city2">city 2</option>
<option value="city3">city3</option>
<option value="city4">city4</option>
<option value="city5">city5</option>
</select>
</form>
Then in post.php have the same code as current.
How can I maintain the value of the form when I submit it?
<select name="Year">
<option value="2013">2013</option>
<option value="2014">2014</option>
<option value="2015">2015</option>
</select>
<input type="submit" value="Filter"/>
If you use jquery (you tagged it): Submit your form via $.post to your php script. Something like
$("form").submit(function() {
$.post("URL/TO/FORM.PHP", $(this).serializeArray(), function(data) {
console.log(data);
});
return false;
});
So you submit your form to your script but the site don't refresh because you set the return to false. You can get the url to your script from your action="" like this
$("form").attr("action")
if you are using php then:
<select name="Year">
<option value="2013" <?php if($_REQUEST['Year']=='2013'){echo "selected"}?>>2013</option>
<option value="2014" <?php if($_REQUEST['Year']=='2014'){echo "selected"}?>>2014</option>
<option value="2015" <?php if($_REQUEST['Year']=='2015'){echo "selected"}?>>2015</option>
</select>
<input type="submit" value="Filter"/>
i have a form like so:
<form>
<select onchange="this.form.submit()">
<option>Today</option>
<option>Last Week</option>
<option>Last Month</option>
<option>Lifetime</option>
</select>
</form>
I need to do some basic filtering of results and the aim is that when a user changes the drop down the user is sent to page/?date=THEIROPTION
I a using the javascript on change so i dont have to have a button.
Any help?
P.S i have tried having the option value as the URL but no luck.
This works.
ONCHANGE="location = this.options[this.selectedIndex].value;"
This too.
<form name="filter_form">
<select name="filter" onchange="document.forms.filter_form.submit();">
<option value=""></option>
<option value="today">Today</option>
<option value="yesterday">Yesterday</option>
</select>
</form>
You may try something like this
HTML:
<select onchange="loadPage(this.value)">
<option value="page?date=today">Today</option>
<option value="page?date=last_week">Last Week</option>
</select>
JS:
function loadPage(url)
{
location.href = url;
}
I am trying to make a drop down menu that takes me to various webpages. Right now it is set up so you make your selection and then you hit a "Go" button and then it takes you to the appropriate link. I am trying to figure out how to make it so when you make your selection it automatically goes and you don't need to push the "Go" button.
Here is what I have:
<p align="center">
<form name="jump" class="center">
<select name="menu">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
Any help or links to explanations would be great. Thank you!
Try the following:
<select onchange="location = this.options[this.selectedIndex].value;">
<option>Please select</option>
<option value="http://www.apple.com/">Apple</option>
<option value="http://www.bbc.com">BBC</option>
<option value="http://www.facebook.com">Facebook</option>
</select>
What you were looking for was 'onchange' instead of 'onsubmit'
Check out jQuery .change()
<script>
$('select.menu').change(function(e){
// this function runs when a user selects an option from a <select> element
window.location.href = $("select.menu option:selected").attr('value');
});
</script>
Something like this might help - basically you just tie an onChange event to the select so that when a new option is selected it'll forward the location to the page.
<p align="center">
<form name="jump" class="center">
<select name="menu" onchange="gotoPage(this)">
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
<input type="button" onClick="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
</form>
</p>
<script type="text/javascript">
function gotoPage(select){
window.location = select.value;
}
</script>
I would recommend that you start using the javascript framework jQuery as it really will make your life much easier when it comes to javascript.
When you have jQuery installed and setup in you web page you should be able to do something like this:
<script type="text/javascript">
$(document).ready(function() {
$("#selection").change(function() {
location = $("#selection option:selected").val();
});
});
</script>
<p align="center">
<form name="jump" class="center">
<select name="menu" id="selection>
<option value="#">Select an option</option>
<option value="/link1.shtml">Link 1</option>
<option value="/link2.shtml">Link 2</option>
<option value="/link3.shtml">Link 3</option>
</select>
</form>
</p>
Obviously super late to the party here, but since I was trying to figure out the same thing and was able to, I'll post how here.
The other answers have you load the link when you change your select element option, but you originally had asked to do it with a button, after making your selection. This worked for me:
<script type="text/javascript">
$(document).ready(function() {
var newUrl = "";
$("#picksite").change(function() {
$newUrl = $("#picksite option:selected").val();
});
$("#executelink").click(function() {
location = $newUrl ;
});
});
</script>
<select id="picksite">
<option value="">Pick A Website</option>
<option value="http://google.com">Google</option>
<option value="http://facebook.com">Facebook</option>
<option value="http://twitter.com">Twitter</option>
<option value="http://gmail.com">Gmail</option>
</select>
<button id="executelink">Go To Site</button>