Mootools vs Mootools-core/more conflict

EricBenjamin · June 13, 2010, 4:48am

I’m currently trying to make a contact form using mootools FormCheck and mootools [URL=“http://demos.mootools.net/Form.Send”]Form.Send in conjunction with each other.

Each one will function correctly individually, but once I have all three:

mootools.js (required by form.send)
mootools-more.js (required by FormCheck)
mootools-core.js (required by FormCheck)

linked in my header, the form.send becomes dominant and my formcheck doesn’t function at all.

I’m specifically using form.send so that I can post a success (or failure) message without reloading the contact page. I’m using FormCheck - obviously to check that required fields are filled out.

I have stripped the form from the website itself here. and here are the two pieces of code I’m using:

FormCheck


<script type="text/javascript">
    window.addEvent('domready', function(){
        new FormCheck('myform');
    });
	</script>

Form.Send


<script type="text/javascript">
var fx = {
	'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
	'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
	'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
};

var showHide = function( el ){
	fx.loading.set(0);
	(fx[ el ]).start(0,1);
	(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
}

$('submit').addEvent( 'click', function(evt){
	new Event(evt).stop();
	$('myform').send({
		onRequest: function(){
			fx.loading.start( 1,0 );
		},
		onSuccess: function(){
			showHide( 'success' );
		},
		onFailure: function(){
			showHide( 'fail' );
		}
	});
} );
</script>

I have no idea what I’m doing with javascript, but I imagine I need a line that tells the script if FormCheck is successful, run Form.Send ? Anything would help at this point.

Paul_Wilkins · June 17, 2010, 2:06am

The link appears to be broken.

Paul_Wilkins · June 14, 2010, 9:29am

Doctor Wilkins is now going to get his rubber duckys all lines up in a row.


window.addEvent('domready', function () {
    var fx, showHide;
    fx = {
        'loading': new Fx.Style('loading', 'opacity', {duration: 400}),
        'success': new Fx.Style('success', 'opacity', {duration: 400}),
        'fail': new Fx.Style('fail', 'opacity', {duration: 400})
    };
    showHide = function (el) {
        fx.loading.set(0);
        (fx[el]).start(0, 1);
        (function () {
            (fx[el]).start(1, 0);
        }).delay(20000);
    };
    new FormCheck('myform', {
        validate: false,
        onValidateSuccess: function () {
            $('myform').send({
                onSuccess: function () {
                    showHide('success');
                },
                onFailure: function () {
                    showHide('fail');
                }
            });
        }
    });
});

where we learn that the onFailure function is missing a closing brace, the fx and showhide stuff should be moved to the top, and that the last two lines needed to be swapped.

The code has also gone through the tempering heat of jslint.com, and has re-emerged with every space in the right place. Whether it does what it’s supposed to though is a completely different story.

EricBenjamin · June 14, 2010, 8:53am

ok adjustment made, I feel like there needs to be a stop for the php file on submit, no?

the code we removed perhaps?


	$('submit').addEvent( 'click', function(evt){
	new Event(evt).stop();
	$('myform').send({

anyhow, adjusted javascript looks like this:


	<script type="text/javascript">
    	window.addEvent('domready', function(){
        	new FormCheck('myform', {
    		validate: false,
   		onValidateSuccess: function () {
        	$('myform').send({
		onSuccess: function(){
		showHide( 'success' );
	},
		onFailure: function(){
		showHide( 'fail' );
		});
   	}
});    

		var fx = {
			'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
			'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
			'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
		};
		
		var showHide = function( el ){
			fx.loading.set(0);
			(fx[ el ]).start(0,1);
			(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
		});
	}
	</script>

not REALLY understanding this is miserable thanks again for all your patients!!!

PS sorry the code formatting looks really awful in the forum posts!! not sure why my formatting didn’t translate. what an eyesore!

EricBenjamin · June 14, 2010, 1:24pm

drum roll…

http://www.jaredsprojects.com/test.html

no beans it seems to be ignoring all our hard work and ONLY using the send-contact.php script. any ideas?

EricBenjamin · June 14, 2010, 7:15am

I realize I seem pretty helpless right now. I reset the FormCheck JS file, then added your new formcheck script. That makes sense, their code is just allowing room for settings I want to specify. Then the onValidateSuccess, makes sense, run "sendForm, which is then mapped out below?

like so?


	<script type="text/javascript">
    	window.addEvent('domready', function(){
        	new FormCheck('myform', {
    		validate: false,
   			onValidateSuccess: function () {
        	sendForm($('myform'));
   			}
		});    

		var fx = {
			'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
			'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
			'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
		};
		
		var showHide = function( el ){
			fx.loading.set(0);
			(fx[ el ]).start(0,1);
			(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
		}
		
		function sendForm (form) {
		    form.send({
				onSuccess: function(){
					showHide( 'success' );
				},
				onFailure: function(){
					showHide( 'fail' );
				}
			});
		}
	</script>

I also noticed that having this line in my header:

<script language="javascript" type="text/javascript" src="/includes/js/mootools.js"></script>

will always break the formCheck. once I remove it, the form check works fine, but form.send needs it???

Stomme_poes · June 14, 2010, 9:06am

thanks again for all your patients!!!

Well, Paul is, after all, both a ninja AND a doctor.

Paul_Wilkins · June 14, 2010, 8:05am

The sendForm($(‘myform’) part should now be removed, as that function now no longer exists due to its contents already being moved in.

EricBenjamin · June 14, 2010, 3:21am

I feel pretty dumb, I tried what I thought you were saying, but I’m clearly not doing this right.
I really appreciate your help!! also thanks for your patients, I know it takes some thought to dig in to other people’s issues.
I’ll completely understand if you don’t want to deal with how noob I am, but I really am learning from this - so in the future I won’t be asking again, and I hope to be helping others!

here is my submit xhtml:


<input type="image" id="submit" src="/images/send.gif" action="submit"></input>

here is my javascript FormCheck:


 window.addEvent('domready', function(){
        new FormCheck('myform');
    });

here are the javascript FormCheck options (with notes):


options : {
				
		submit : false,						
		
		trimValue : false,  //trim (remove whitespaces before and after) the value
		validateDisabled : false,  //skip validation on disabled input if set to false.
		
		submitByAjax : false,  //false : standard submit way, true : submit by ajax
		ajaxResponseDiv : false,  //element to inject ajax response into (can also use onAjaxSuccess) [cronix] 
		ajaxEvalScripts : false,  //use evalScripts in the Request response [cronix] 
		onAjaxRequest : $empty,  //Function to fire when the Request event starts 
		onAjaxSuccess : $empty,  //Function to fire when the Request receives .  Args: response [the request response] - see Mootools docs for Request.onSuccess 
		onAjaxFailure : $empty,  //Function to fire if the Request fails
		
		onSubmit : $empty,  //Function to fire when user submit the form
		onValidateSuccess : sendForm($('myform')),  //Function to fire when validation pass
		onValidateFailure : $empty,  //Function to fire when validation fails

here is my javascript Form.Send:


var fx = {
	'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
	'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
	'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
};

var showHide = function( el ){
	fx.loading.set(0);
	(fx[ el ]).start(0,1);
	(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
}

function sendForm (form) {
    form.send({
		onSuccess: function(){
			showHide( 'success' );
		},
		onFailure: function(){
			showHide( 'fail' );
		}
	});
} );

and here is my send php file to make the result actually send:


 $send = mail($to, $subject, $body, $headers); 
 $send2 = mail($from, $subject2, $autoreply, $headers2); 
 
 if($send) 
 {print "Poof! Your electronic mail has been sent!"; } 
 else 
 {print "We encountered an error sending your mail."; }

Paul_Wilkins · June 14, 2010, 6:21am

Is there a test page in which to explore the working of things?
The test link that you provided earlier doesn’t appear to load anything.

EricBenjamin · June 14, 2010, 6:22am

yea I wasn’t able to edit that post for some reason, but here it is:

http://www.jaredsprojects.com/test.html

Paul_Wilkins · June 13, 2010, 10:30pm

Well, you know the script part for the form.send?


$('submit').addEvent( 'click', function (evt) {
    new Event(evt).stop();
    $('myform').send({
    ...
    });
});

Well, don’t attach it to the submit click event. Remove the event stop part and turn the rest into a normal function.


function sendForm (form) {
    form.send({
    ...
    });
}

That way you can then call that function from elsewhere, which you could do with something like:


sendForm($('myform'));

EricBenjamin · June 13, 2010, 6:51pm

PMW57, thank you!

In theory this is exactly what I need. My only problem now is that both of the scripts are fighting for the submit button. is there a way to tell my Form.Send to only run once it receives the go ahead from FormCheck?

I also noticed my link to the form was broken, here is the correct url:
http://www.jaredsprojects.com/test.html

EricBenjamin · June 14, 2010, 8:34am

alright so some reason the submit function is just skipping the javascript all together.

here is the finalized javascript code:


	<script type="text/javascript">
    	window.addEvent('domready', function(){
        	new FormCheck('myform', {
    			validate: false,
   				onValidateSuccess: function () {
        		form.send({
				onSuccess: function(){
					showHide( 'success' );
				},
				onFailure: function(){
					showHide( 'fail' );
				});
   			}
		});    

		var fx = {
			'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
			'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
			'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
		};
		
		var showHide = function( el ){
			fx.loading.set(0);
			(fx[ el ]).start(0,1);
			(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
		});
	}
	</script>

and here is the submit part:


<input type="image" id="submit" src="/images/send.gif" action="submit"></input>

Paul_Wilkins · June 14, 2010, 6:48am

Okay, first of all, you need to return the formcheck.js script back to the original code that it was. That script must remain unedited. You interact with it after you have loaded it, by creating a new formcheck.

For example, from the demo page:


<script type="text/javascript">
    window.addEvent('domready', function(){
        new FormCheck('myform');
    });
</script>

If you’re going to set the validate an onValidateSuccess options, you would set them like this:


new FormCheck('myform', {
    validate: false,
    onValidateSuccess: function () {
        sendForm($('myform'));
    }
});

Note: it helps if the sendForm function has been defined before the above script is run.

You may also want to remove the ); after the closing brace for the formSend function.

Paul_Wilkins · June 14, 2010, 8:40am

Have a quick look back at post #10

EricBenjamin · June 14, 2010, 7:29am

I’m thinking I didn’t do this merger properly:


<script type="text/javascript">
    	window.addEvent('domready', function(){
        	new FormCheck('myform', {
    			validate: false,
   				onValidateSuccess: function () {
        		sendForm($('myform')
        		form.send({
				onSuccess: function(){
					showHide( 'success' );
				},
				onFailure: function(){
					showHide( 'fail' );
				});
   			}
		});    

		var fx = {
			'loading': new Fx.Style( 'loading', 'opacity',{ duration: 400 } ),
			'success': new Fx.Style( 'success', 'opacity',{ duration: 400 } ),
			'fail': new Fx.Style( 'fail', 'opacity',{ duration: 400 } )
		};
		
		var showHide = function( el ){
			fx.loading.set(0);
			(fx[ el ]).start(0,1);
			(function(){ (fx[ el ]).start(1,0); }).delay( 20000 );
		});
	}
	</script>

www.jaredsprojects.com/test.html - some reason neither one is working now

Paul_Wilkins · June 13, 2010, 8:51am

Have a look at this formcheck documentation page where you’ll find out about optional settings such as onValidateSuccess and setting submit to false.

[indent]onValidateSuccess Function to fire when validation pass (you should prevent form submission with option submit:false to use this)

submit If you turn this option to false, the FormCheck will only perform a validation, without submitting the form, even on success. You can use validateSuccess event to execute some code.[/indent]

Paul_Wilkins · June 14, 2010, 7:19am

That’s right. You could even get rid of the sendForm function and move its contents in to the onValidateSuccess function, where you would then change the form.send({ instead to $(‘myform’).send({