I have a registration form in jsp and i am validating the form in js file using jquery as shown in below code. When i call form() method of jquery validate, it says this.formValidation 'undefined' because my form is not loaded. i have tried setTimeout and delay methods but my problem did not solve. Please help me, my code:
UserRegistration.prototype.formValidation = function(){
var me = this;
this.formValidation = $('#user_form').validate({
rules : $.extend({}, rules)
});
if (this.formValidation !== 'undefined') {
this.formValidation.form();
}
else {
setTimeout(this.formValidation.form(), 50);
}
};
In else condition the error occurs.
In Jsp page i am loading my js file using headjs like:
head.load("scripts/userregistration.js");
Below that i have my form:
<form id="user_form">
</form>
How can i load my form by the time i call this.formValidation.form();
Related
I'm trying to add a Marketo form to my Vue Js application but it doesnt seem to be working.
I loaded the initial forms2.min.js script in the created lifecycle hook and that loads just fine. Example code below.
created() {
const scriptTag = document.createElement('script');
scriptTag.src = "//app-ab00.marketo.com/js/forms2/js/forms2.min.js";
scriptTag.setAttribute('charset', 'utf-8');
document.head.appendChild(scriptTag);
}
Within the html template i added the container element to load the form.
<form id="mktoForm_1057"></form>
Then i created a method that gets triggered by a button to load the form into the container.
createForm(){
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057)
}
As soon as i run the script i get this error "MktoForms2 is not defined." Am i doing something wrong?
Would someone be able to help me out?
Thanks!
It should be
created() {
const scriptTag = document.createElement('script');
scriptTag.src = "//app-ab00.marketo.com/js/forms2/js/forms2.min.js";
scriptTag.setAttribute('charset', 'utf-8');
scriptTag.onload = function() {
MktoForms2.loadForm("//app-ab00.marketo.com", "785-UHP-775", 1057);
};
document.head.appendChild(scriptTag);
}
It's hitting a snag because MktoForms2 is not defined as a variable. I had to append 'window' to MktoForms2 in order for it to pass linting
window.MktoForms2.loadForm('//app-ab00.marketo.com', '785-UHP-775', 1057)
Here is a little snippet I have used for Marketo templates. Make sure you have their forms2.min.js file loaded before using this script. You could also wrap this in a DOM ready/jQuery ready as well.
// check if we have their forms2.min.js script available
if (window.MktoForms2) {
// error handling
try {
MktoForms2.loadForm(baseUrl, munchkin_id, formId, function(form) {
// code to execute after load form
});
MktoForms2.whenRendered(function(a) {
// code to execute after the form has rendered its markup
var fid = a.getId(); // form id
});
} catch (a) {
console.log(a);
}
}
I'm currently stuck with the following problem with SpringMVC, Thymeleaf and Javascript.
1) Server-Side: Under some circumstances I add a flash redirect attribute in my controller before redirecting to a certain page.
redirectAttributes.addFlashAttribute("myCondition", true);
2) Client-Side: In case that attribute exists, I want my javascript function to execute additional code.
window.onload = function() {
...
if([[${myCondition}]]) {
//do something
}
}
This works fine after the redirect, but on first enter the redirect attribute does simply not exist, which results in the following javascript code being rendered:
window.onload = function() {
if() {
//do something
}
}
This code is not valid and therefore produces a javascript error.
I'm not sure how to check with javascript if the redirect attribute exists?
can you try the following code and let me know if this works for you
declare a variable mycondition
var mycondition = [[${myCondition}]];
if(mycondition) {
//do something
}
Hope this helps
I have defined 3 javascript files with several functions, and I have event handler onsubmit in each of them (essentially same structure) the problem is, when I insert those 3 files at the bottom of the body section as filepath, only 2 of them are loaded while the third is not, and I cannot understand why...
This is the code:
function init() {
'use strict';
// Listen to see whether the form has been submitted:
//get a handle to my form
var demogrForm = document.getElementById("Demographics");
demogrForm.onsubmit = validateInputs;
console.log("submit");
} // End of init() function.
window.onload = init;
console.log("init");
essentially, the function called for each "onsubmit" is different in the 3 files, but the code to handle the call is the same...do you have any idea ?
Try using jQuery $(function(){}); or change your window.onload. It should look like this:
window.onload=function(){
console.log("init");
// Listen to see whether the form has been submitted:
//get a handle to my form
var demogrForm = document.getElementById("Demographics");
demogrForm.onsubmit = validateInputs;
console.log("submit");
};
or using jQuery:
$(function(){
console.log("init");
// Listen to see whether the form has been submitted:
//get a handle to my form
var demogrForm = document.getElementById("Demographics");
demogrForm.onsubmit = validateInputs;
console.log("submit");
});
I have a 3rd party system, where I can add articles (with (raw) html). One page contains a search form, which does a post to itself. Upon load (after post) it will add a javascript submit form using javascript - e.g.
function redir() {
document.myform.submit();
}
.... //some other stuff here
redir();
I'll not go into details on the design (I know why it is designed this way but cannot change it - its crappy design, I know!).
Is there someway to catch this "onload" submit?
I have tried this:
var sform = document.getElementsByName('myform');
try {
sform.addEventListener("submit", alert('Gotcha!'));
} catch(e) {
sform.attachEvent("submit", alert('Gotcha!')); //Internet Explorer
}
Also jQuery:
$('myform').submit(function() {
alert('Gotcha!');
return false;
});
I cannot seem to catch the event. I can override the method:
redir = function(){
//Empty - override
}
...but the submit action is trigged before my script is loaded or it will override my overridding method.
I hope this makes sense.
Your jQuery was close. You just need to use a # before your id based selector, just like in CSS.
$('#myform').submit(function() {
alert('Gotcha!');
return false;
});
Did you override the function in the correct place? The following works for me and stops the submit.
function redir() {
document.myform.submit();
}
redir = function(){}
redir();
Demo
We need to universally handle changed data on forms in ASP.NET MVC. Our application has ~100 forms, and the user should be prompted if they start editing a form and click on anything other than Save (i.e. something like "Your data has been changed. Click OK to return to the form, or Cancel to lose all changes.").
It looks like SO implements this (while asking a question) using JavaScript. In general, is this the best way? Also, any tips on how best to implement this?
The way I've done this is to use javascript to store the initial values of inputs when the page loads. Then I have a beforeunload handler that checks to see if any of the inputs have a different value than when the page was loaded. If any inputs are changed, it prompts the user to confirm that they want to leave the page, canceling the action if they cancel. In my submit logic, I set a flag that keeps the beforeunload check from happening so a submit doesn't get the prompt.
I suspect there is a jQuery plugin to do this, but I haven't implemented this since I started using jQuery. My earlier code used Prototype.
Edit: Couldn't find a jQuery plugin, but I could have just missed it. Here's a sample of how I might do it. Obviously, there's more that could be done. Note I wasn't able to get it to work with pure jQuery -- not sure exactly why, the popup would appear twice.
This should work with all input elements. You might want to change it to ignore/handle buttons, though. I only adjusted it to ignore a submit button (so it can post back without the popup). If other button types can cause a page unload, you may need to address that.
var CheckOnClose = function() {
this.initialize();
}
CheckOnClose.prototype = {
submitting: false,
initialize: function() {
var that = this;
window.onbeforeunload = function() { return that.checkLeavePage(); }
},
isChanged: function() {
var changed = false;
$('input:not(:submit)').each( function() {
var iv = $(this).data('initialValue');
if ($(this).val() != iv) {
changed = true;
return false;
}
});
return changed;
},
setSubmitting: function() {
this.submitting = true;
},
checkLeavePage: function() {
if (!this.submitting && this.isChanged()) {
return 'You have some unsaved changes.';
}
}
}
var checker = new CheckOnClose();
$(document).ready(function() {
$(':input:not(:submit)').each( function() {
$(this).data('initialValue',$(this).val() );
});
$(':submit').click( function() {
checker.setSubmitting();
});
});
JavaScript is your only shot for doing this. It doesn't even have to be a complicated bunch of code. All you have to do is have a global variable to flag if the form is in editing stages (var formEdited = false; would do), and then add this snippet to your page:
window.onbeforeunload = confirmExit;
function confirmExit()
{
if (formEdited)
{
return "You have attempted to leave this page. If you have made any changes to the fields without Submitting the form, your changes will be lost. Are you sure you want to exit this page?";
}
// no changes - return nothing
}