I will try to walk you through this very slow. I am trying to make a poll that are subject to change often so I have to make it dynamical. I also need to have this without page reload, so I would need to use Ajax to submit the form. So what I did was to create a PHP script that will echo the poll for me. This works nicely and I get the poll just the way I want it. Oh yeah, forgot to tell that it is a multi step poll. I navigate through 2-4 questions at a time by hiding/showing divs within a JQM ‘page’. And by that I mean:
<div data-role='page'>
At the last page I do have a submit button instead of a next button since the poll obviously has no “next” div to show. This submit button does in no way, shape or form work, and thus is the issue here.
$("#submit").click(function()
{
if ($("#form").validate())
{
$.ajax(
{
type:'POST',
url:'add.php',
data:$('#form').serialize(),
success:function(response)
{
$("#answers").html(response);
}
});
}
else
{
return false;
}
})
This is supposed to send my form data to another PHP file that is named add.php, when then is supposed to post it to the div shown abit underneath. (It’s really supposed just to save to database but I try to echo it until I see that it works). Now, the twist is that I did another identical piece of code on a non-dynamical form that was not created through PHP, but merely plotted down in HTML. This was also a multi step poll that span out over 3 divs/’pages’. And this had no problems submitting at all.
So to summarize: I had 2 different projects that each handled half my problem. One generated the form dynamically and the other saved a static form that I made. Both forms consisted of a variety of checkboxes, radiobuttons and textareas. Problem is, they won’t work together. When I click the submit button I expect the form to echo out the answers into this div (the one you read about a few lines up):
<div data-role="content" id="answers">
Answers comes here:
</div>
Nevertheless, this div remains the same. I stripped down the $(“#submit”).click(function()) to alert(‘test’); and I still could not get a reaction. I’ve quadrillion-checked the variable names and div names and any other names that are relevant, and I’ve made various minor adjustments on each separate part (both generating the poll and posting it with ajax) as well as to my attempt to combine them without success. So, the million dollar question is what could be wrong? My last remaining hypothesis is that somehow the JavaScript function for $(“#submit”).click … is loaded before the script that generates the poll. This would make sense that when the submit click function is declared it would not be linked up to any button like shown here:
<input type="button" id="submit" name="Submit"/>
Does anyone have any clue on how I can make this submit button to work, or even have a clue as to why it does not work? Thanks to anyone who read this far and I hope you posess and are willing to share some knowledge that could help me. Also thanks to the creators of Stack Overflow for implementing an alt+z function for this as I accidentally clicked alt+a then random letters while writing the sentence before this one. Have a nice day!
EDIT: Tried this after a tip from Kevin an answer below, but even the first alert button doesn’t react:
$("#submit").click(function()
{
alert("it works");
if ($("#form").validate())
{
$.ajax(
{
type:'POST',
url:'add.php',
data:$('#form').serialize(),
success:function(response)
{
$("#answers").html(response);
return false;
}
});
}
else
{
return false;
}
})
});
You need a return false; under $(“#answers”).html(response); inside the scope of the success function. Let me know if this works. Good luck, Kevin