On a button click, my page removes one form and replaces it with another using jQuery. When clicking submit
on the second form, it does not execute the associated Javascript like it is supposed to.
Instead, it executes that /post
route in Express, despite being overridden by the JavaScript. It's like the page does not know how to associate the form submission with the associate JS function, or something.
Here is what the HTML looks like once the first (working) form has been submitted and jQuery has done its magic:
<div class="text-center">
<form id="ex2" method="post">
<div class="btn-group">
<div class="row" id="mertola"><input name="selected" type="radio" value="selected" /> Yes Please: </div>
<div class="row" id="email"><input name="email" type="radio" value="yesemail" /> email: </div><br/>
</div>
<div class="text-center" id="gobutton">
<button type="submit" class="btn btn-warning btn-lg text-center">Choose</button>
</div><br/><br/>
</form>
</div>
The JavaScript is unchanged the entire time. Here's the javascript for the second form submission:
$("#ex2").submit(function (e) {
//todo this code is never being executed
console.log("WAHOOO!!");
var formResult = $(this).serialize();
//client.publish('/foo', {text: 'channel2', form: formResult});
e.preventDefault();
return false;
});
Hoe do I get the JavaScript to execut? It's a headscratcher.