Hey guys I'm trying to work my way through this but am having an issue even getting inside my function for form submit in JQuery, I've set up several console.logs but it never actually gets inside my first functio, does anyone know what I did wrong?
Code
<script src='http://www.google.com/jsapi'></script>
<script> google.load('jquery', '1.7.1'); </script>
<script>
console.log('outside function');
$("form").submit(function() {
console.log('submit happened');
queryJsonServer($(this), "class/");
return false;
});
function queryJsonServer(form, path) {
var inputs = $('input:radio').serializeArray();
var params = createAction("saveFormData", inputs);
var url = path + "json.php";
$.post(url, params, function(data) {
console.log(data);
$.("form").submit();
});
}
</script>
HTML
<form>
<fieldset>
<legend>Select Orders</legend>
<table id='master'></table>
</div> <!-- end input1 -->
<div>
<button name="select" type="submit" id="btnLoad" value="load">Refresh</button>
<button name="select" type="submit" id="btnJson" value="down">Download JSON</button>
<button name="select" type="submit" id="btnView" value="view">View/Enter</button>
</div>
</fieldset>
</form>
This line:
$("form").submit(function() {
…binds a submit event to every form in the DOM at the time the script runs.
Since the script:
<head>… there are no form elements when the event handler is bound.
Either move the script so it appears after the form element (e.g. just before </body>), or call the function in your ready event handler.
You might try to wrap your function in the jQuery function so that it executes when DOM is ready.
<script>
$(function(){
console.log('outside function');
$("form").submit(function() {
console.log('submit happened');
queryJsonServer($(this), "class/");
return false;
});
function queryJsonServer(form, path) {
var inputs = $('input:radio').serializeArray();
var params = createAction("saveFormData", inputs);
var url = path + "json.php";
$.post(url, params, function(data) {
console.log(data);
$.("form").submit();
});
}
});
</script>