Why does this script cause an error on submit in firefox?
It is using jquery.
$(document).ready(function(e) {
$('#errorMessage').hide();
$('#form').submit(function() {
var firstname = $('#formFirstname').val();
if(firstname == '') {
$('#errorMessage').html('Please enter your Name.');
$('#errorMessage').fadeIn();
}
else {
$('#errorMessage').html('Please wait a moment as the form Submits.');
$('#form').submit();
}
return false;
})
});
$('#form').submit();
causes recursion?
You are aliasing the jQuery to e.
Change $(document).ready(function(e) { to $(document).ready(function() {
Or jQuery(document).ready(function($) {
Edit:
Although it may not cause the error, in your code e is also jQuery's alias, e('#form') will also work.
Related
I have some very old javascript code on an existing site and I wanted to update it, but I'm running into errors and I'm not sure what to replace it with. The code is just part of a section where it does a .submit() call to the form. Then the code reaches the try condition, it throws the error that livequery is not a function. Code is also below the screenshot.
Also I'm not sure if the "var form" is outside the scope of the try for form to work or not. What could I have wrong here?
var submit = false;
var form = $("#webform-client-form-2")[0];
try {
if (repair) {
console.log('repair is true - line 317');
$(".simple-dialog").click();
$(".ui-dialog, .ui-widget-overlay").hide();
$(".form-actions").livequery(function() {
console.log('livequery - line 321');
$("#edit-submitted-name").val(subject_field);
$("#edit-submitted-phone").val(phone);
$("#edit-submitted-email").val(email);
$("#edit-submitted-details-of-issue").val(problem);
var find = $(".form-actions")[0]; //get the 1st form actions on the page. if more than 2 forms on page, this might submit wrong form.
if (!submit && find) {
console.log('repair is true - line 328');
submit = true;
$("#webform-client-form-2").submit();
$(".form-actions").expire();
return false;
}
});
} else if (contact) {
console.log('yyy');
console.log(form);
$("#edit-submitted-phone-number").val(phone);
$("#edit-submitted-message").val(problem);
$(form).submit();
} else {
console.log('zzz');
$(form).submit();
}
} catch (error) {
console.log(error);
console.log("no form - line 346");
}
I have the following code where i am blocking the code to stop its processing if the error happens
var objEditForm = document.getElementById("EditForm");
objEditForm.addEventListener("submit", function(e){
var error = 0;
$("##cell,##fax").on("invalid", function() {
let error = 1;
if($(this).val() == '') {
$(this).focus();
}
});
at the bottom i have this
if(error == 1) {
e.preventDefault();
}
and defined the var error = 0; at the top, it just goes inside that jquery code and does nothing, it alerts me 0 and then submits the form.
any idea what i am doing wrong here
i am sorry i was wrong .. thats write you did mistake in write selector in jquery
if "cell,fax" is elements id then its used wrongly in jquery..
it should be like "#cell" "#fax"..
it would be nice if you use jquery its pretty easy.apply even on your submit button i assum your button id is submit ok.
$("#submit").click(function(e)){
e.preventDefault();
var error = 0;
$("#cell,#fax").on("invalid", function() {
let error = 1;
if($(this).val() == '') {
$(this).focus();
}
});
but i am still not getting your cell and fax doing
I have a classic HTML5 form. I would like using jquery/javscript to show the browser native error tooltip when the user change a specific input value. I would like to avoid the user try to submit the form to see all errors.
For that, I tried with the functions checkValidity() and reportValidity() but it works only if I add alert('test'); in my condition...so weird
JS script
myInputJqueryObject.on('change', function() {
if ( !this.checkValidity() ) {
this.setCustomValidity( 'Custom error !!!' );
var $form = $('#my-form');
if( $form[0].checkValidity() === false) {
$form[0].reportValidity();
//alert('test'); <-- works only if I active this line code
return true;
}
}
});
You do not need to check the form validity when you know that the input is invalid. You can omit if( $form[0].checkValidity() === false). Also you can reportValidity on the input itself.
And setCustomValidity takes some time to be applied to the input field. So you have to wrap reportValidity into setTimeout:
$('input').on('change', function() {
var self = this;
if (!self.checkValidity()) {
self.setCustomValidity('Custom error !!!');
setTimeout(function() {
self.reportValidity();
self.setCustomValidity('');
}, 1);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="my-form"><input value="del me" required></form>
Based on 'Kosh Very' answer, I found the solution. It sounds good without bugs.
JS Script :
$('input').on('focusout', function() {
var self = this;
var validity = self.checkValidity();
if( !validity ){
if( self.validity.patternMismatch ){ //<-- Optionnal : Condition to keep others native message errors except Pattern.
self.setCustomValidity( 'Custom Error about pattern!!!' );
}
setTimeout(function() {
self.reportValidity();
self.setCustomValidity( '' ); //<-- Important to reinit
}, 1);
}
});
I have been struggling with getting this work on Firefox. Hope there is somebody help me!
Basically; Firefox ignores the button click function and it's sub functions and the button posts the page instead of running the jquery code.
It works on IE and Chrome but not on Firefox.
Thank you for your help in advance.
Here is the output code:
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".CatList li").click(function() {
if ($(this).is(".selected")) {
$(this).attr("class", "");
$('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
return false;
}
else {
$(this).attr("class", "selected");
$('#ctl00_ContentPlaceHolderRight_CatChanged').val(1);
return false;
}
});
$("#ctl00_ContentPlaceHolderRight_btnSave").click(function() {
var elements = $("li.selected");
if (elements.val() == null) {
alert("You must select at least one category");
return false;
}
else {
elements.each(function() {
$('#ctl00_ContentPlaceHolderRight_CatChecked').val($('#ctl00_ContentPlaceHolderRight_CatChecked').val() + "," + $(this).attr("id"));
return true;
});
}
});
});
</script>
Do you know firebug Firefox Extension? It is very useful for debug Javascript on Firefox.
Firebug also include a Javascript console where you can test your functions.
Don't check against null -- try to stick with the undefined that jQuery ensures. Check what elements.val() returns to start (just alert it).
Also, you don't preventDefault() or return false in the else clause which could be a reason for Firefox to submit the page.
Thank you tjko, using alert saved my day. I was just too confused. I have changed the code as below and everything works perfectly:
var elements = $("li.selected");
elements.each(function() {
$('#<%=CatChecked.ClientID%>').val($('#<%=CatChecked.ClientID%>').val() + "," + $(this).attr("id"));
});
if ($('#<%=CatChecked.ClientID%>').val() == "") {
alert("You must select at least one category");
return false;
}
else {
//alert($('#<%=CatChecked.ClientID%>').val());
return true;
}
I have a web page where i have 2 forms when i click the enter key, I am calling a javascript function to force the page to load another page.My code is
function SearchUser()
{
var text = document.getElementById("searchItem").value;
text = text == "" ? -1 : text;
var by = document.getElementById("listBy").value;
var on="";
if(by==1)
{
on="USERNAME";
}
else if(by==2)
{
on="FIRSTNAME";
}
else if(by==3)
{
on="EMAIL_ID";
}
gotoUrl="userlist.php?searchItem="+text+"&onSearch="+on;
alert(gotoUrl);
window.navigate=gotoUrl;
}
and
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
}
});
});
But the page is doing a form submit when the SearchUSer function being called.I am getting the correct url in the alert.But The page is not loading in the brower
Any Ideas ???
Thanks in advance
if (document.addEventListener) {
document.getElementById('strip').addEventListener('keypress',HandleKeyPress,false);
} else {
document.getElementById('strip').onkeypress = HandleKeyPress;
}
function HandleKeyPress(e) {
switch (e.keyCode) {
case e.DOM_VK_ENTER:
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
}
EDIT due to original Question edit:
all you need is:
$(document).ready(function()
{
$("#frmUserListSearch").keyup(function(event)
{
if(event.keyCode == 13)
{
SearchUser();
if (e.preventDefault)
e.preventDefault();
else e.returnValue = false;
}
});
});
edited to reflect comment
Returning false often does the trick.
http://javascript.about.com/library/bldisdef.htm
I have two recommendations. First, use the keydown event instead of keyup (it catches "enter" before submit better). Second, in your SearchUser() function, use window.location instead of window.navigate to go to the other page.
$(document).ready(function() {
$("#frmUserListSearch").keydown(function(event) {
if(event.keyCode == 13){
SearchUser();
return false;
}
});
});
NOTE: Don't forget to remove the "alert()" inside the SearchUser() function as it causes the form to submit before navigating away from the page.
You can do this by using the action attribute of the form, without having to deal with key events, granted that you will later need javascript to take action on the control that submits the form.
<html>
<head>
<script type="text/javascript">
function donothing() {}
</script>
<body>
<form action='javascript:donothing()'>
...
</form>
</body>
</html>