I have a form setup but for some reason the JS to submit the form works in Chrome but not IE9 or Safari. Interestingly enough in Chrome where the submit button does work none of the information gets passed.
Here is my submit button -
<a href="javascript: validate(); return false;"><img type="submit" src="lib/send_feedback.jpg" border="0" class="feedback-submit-img" /></a>
Here is what JS it calls
// Submit form to next page
function submitForm() {
// document.forms["feedbackform"].submit();
document.feedbackform.submit();
}
// Submit form and validate email using RFC 2822 standard
function validateEmail(email) {
// Modified version original from: http://stackoverflow.com/a/46181/11236
var re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
return re.test(email);
}
// Return true if email field is left unchanged
function originalText(email){
var defaultMsg;
defaultMsg = "Enter your email address (optional)";
if(defaultMsg == email){
return true;
}
return false;
}
// Verify or decline with error message
function validate(){
$("#result").text("");
var email = $("#email").val();
if ((validateEmail(email)) || originalText(email)) {
submitForm();
} else {
$("#result").text(email + " is not a valid email.");
$("#result").css("color", "red");
}
return false;
}
$("form").bind("submit", validate);
For the second part of my issue which may or may not be related to the JS issue is -
echo $POST['satisfaction'];
echo $POST['user_email'];
echo $POST['comments'];
if(isset($POST['user_email'])){
echo 'true';
} else {
echo 'false';
}
If you would like a better look at the page I am editing here is a link to jsfiddle
edit
As per Marco's request I removed the link from around the submit button and placed the onClick event onto the actual button itself. This absolutely fixed the issue on both IE and Safari. Now my remaining question/concern is why the POST data is not passing correctly to the next page.
Here is the complete source with George requested. - index.php
Page source gets passed to - feedback-accept.php
Also with that being said/posted, what is StackOverflow's preferred site to post source to?
In response to Brian's comment, if I cannot use failed without potentially breaking the POST data, what would be a good alternative/work-around?
In a quick look, I would say you are having a conflict of functions here. When you design a Submit Type, you are telling the browser that that will submit your form (on its action), on the other hand, that is inside a link that is calling a JS function. If you're manufacturing the submit in your JS, try to consider not use a Submit Type and see if it works more properly. You might also try to replace the link for a simple "onSubmit" inside the form's Tag and call the JS function from there. This way, when the browser identifies that the user hit the submit button, he'll call a JS Function as you wish and if this function returns true, the submit will be allowed by the browser.
try this code:
jQuery:
$(document).ready(function()
{
$('.validate').bind('submit click',function()
{
//Validate!
//is email
if( /..../.test( $(this).find('input[name=email]').val() ) )
{
alert('Error!!!');
return false; //STOP PROPAGATION
}
//Its okay!
//send form!
$(this).parents('form').submit();
//click event stop propagation
return false;
});
});
HTML:
<a href="" class="validate">Submit</a>
OR
<input type="submit" value="Submit" class="validate" />
OR
<button class="validate" >Submit</button>