Develop Reference

jQuery not work correctly, after a submit

I have a problem with a jQuery,the problem is when i do the submit, when i press the button, the website dosen't stay on the same html page but switch to the "insert.php" page, to avoid that in the script, as you can see I put a return false "$("#myForm").submit(function(){ return false;});" but that does not work.
Here it is the html form:
<form id="myForm" action="insert.php" method="post">
PERSONE:
<select id="persona" name="perselect">
<!-- these option come from the database by a jquery -->
<option value=""></option>
</select>
<br>
AUTO:
<select id="auto" name="autselect">
<!-- these option come from the database by a jquery -->
<option value=""></option>
</select>
<br><br>
INIZIO:<br>
Ora:
<select id="oraInizio" name="oraInizio">
<option value="00">00</option>
<!-- all the hours -->
<option value="23">23</option>
</select>
<br>
Minuto:
<select id="minutoInizio" name="minutoInizio">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<br>
Data:
<input type="Date" name="dataInizio"/><br>
<br><br>
FINE:<br>
Ora:
<select id="oraFine" name="oraFine">
<option value="00">00</option>
<!-- all the hours -->
<option value="23">23</option>
</select>
<br>
Minuto:
<select id="minutoFine" name="minutoFine">
<option value="00">00</option>
<option value="15">15</option>
<option value="30">30</option>
<option value="45">45</option>
</select>
<br>
Data:
<input type="Date" name="dataFine"/><br>
<br><br>
Note:<br>
<input type="text" name="note"><br>
<button id="sub">salva</button>
<!--<input type="submit"/>-->
<span id="result"></span>
And This is the script code:
$(document).ready(function(){
fetchData();
});
$("#sub").click(function(){
var data = $("#myForm :input").serializeArray();
$.post( $("#myForm").attr("action"), data, function(info){
$("#result").html(info); });
});
$("#myForm").submit(function(){
return false;
});
function fetchData()
{
var personeOp;
$.getJSON("fetchPersona.php", function(data){
$.each(data.result, function(i,persona){
personeOp +="<option value='"
+persona.id+
"'>"
+persona.nome+" "+persona.cognome+
"</option>";
});
$('#persona').html(personeOp);
});
var autoOp;
$.getJSON("fetchAuto.php", function(data){
$.each(data.result, function(i,auto){
autoOp +="<option value='"
+auto.id+
"'>"
+auto.nome+
"</option>";
});
$('#auto').html(autoOp);
});
}

You are defining the submit handler inside a click handler, so it won't start listening for submit events until you've clicked once.
If you move this code:
$("#myForm").submit(function(){
return false;
});
...outside of the click handler, it should work.
I'd also recommend a slight change to how you do it:
$("#myForm").submit(function(e){
e.preventDefault();
});

Copy the callback function for the click in the callback function for the submit and add a preventDefault on event on the submit callback. Also, try to format your code before posting:
$("#myForm").submit(function(e){
e.preventDefault();
var data = $("#myForm :input").serializeArray();
$.post( $(this).attr("action"), data, function(info){
$("#result").html(info);
});
});

Dropdown Select Form, Go to URL On SUBMIT

Is there a simple way to have a user go to a URL from a dropdown list on SUBMIT, rather than onChange.
I have this code:
<form name="cityselect">
<select name="menu" onChange="top.location.href=this.options[this.selectedIndex].value;" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
Tried changing onChange to onSubmit, but it doesn't work.

Try this instead.
Also: You'll want to keep your JavaScript separated from your HTML. Do not use onchange or similar HTML attributes. While it's technically not wrong, it's bad from a code quality/maintainability perspective.
var goBtn = document.getElementById("goBtn");
var menu = document.getElementById("menu");
goBtn.onclick = function() {
window.location = menu.value;
}
<select id="menu">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
<input type="button" id="goBtn" value="GO!">
Does this work for you?

You can use the onsubmit event on the <form> element, but you'll want to preventDefault on the event, and for the onsubmit event you need to use a return:
<form name="cityselect" onsubmit="return redirectTo(this)">
<select name="menu" value="GO">
<option selected="selected">Select One</option>
<option value="http://www.domain-one.com">London</option>
<option value="http://www.domain-two.com">Glasgow</option>
</select>
</form>
<script>
function redirectTo(elem) {
event.preventDefault();
top.location.href = elem.firstElementChild.options[elem.firstElementChild.selectedIndex].value
}
</script>

PHP can't receive data sent using jquery . lead to undifined variable on php file

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.

Auto Load Second Dropdown using AJAX

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

Load page on selection from dropdown form

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>