SitePoint Sponsor

User Tag List

Results 1 to 19 of 19
  1. #1
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mootools vs Mootools-core/more conflict.

    I'm currently trying to make a contact form using mootools FormCheck and mootools 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
    Code:
    <script type="text/javascript">
        window.addEvent('domready', function(){
            new FormCheck('myform');
        });
    	</script>
    Form.Send
    Code:
    <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.

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Have a look at this formcheck documentation page where you'll find out about optional settings such as onValidateSuccess and setting submit to false.

    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Well, you know the script part for the form.send?

    Code javascript:
    $('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.

    Code javascript:
    function sendForm (form) {
        form.send({
        ...
        });
    }

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

    Code javascript:
    sendForm($('myform'));
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <input type="image" id="submit" src="/images/send.gif" action="submit"></input>
    here is my javascript FormCheck:
    Code:
     window.addEvent('domready', function(){
            new FormCheck('myform');
        });
    here are the javascript FormCheck options (with notes):
    Code:
    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:
    Code:
    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:
    Code:
     $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."; }

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yea I wasn't able to edit that post for some reason, but here it is:

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

  8. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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:

    Code html4strict:
    <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:

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?
    Code:
    	<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:

    Code:
    <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???

  10. #10
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    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({
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  11. #11
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm thinking I didn't do this merger properly:

    Code:
    <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 :-(

  12. #12
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The sendForm($('myform') part should now be removed, as that function now no longer exists due to its contents already being moved in.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  13. #13
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alright so some reason the submit function is just skipping the javascript all together.

    here is the finalized javascript code:

    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:

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

  14. #14
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Have a quick look back at post #10
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  15. #15
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok adjustment made, I feel like there needs to be a stop for the php file on submit, no?

    the code we removed perhaps?
    Code:
    	$('submit').addEvent( 'click', function(evt){
    	new Event(evt).stop();
    	$('myform').send({
    anyhow, adjusted javascript looks like this:

    Code:
    	<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!

  16. #16
    om nom nom nom Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,272
    Mentioned
    50 Post(s)
    Tagged
    2 Thread(s)
    thanks again for all your patients!!!
    Well, Paul is, after all, both a ninja AND a doctor.

  17. #17
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Doctor Wilkins is now going to get his rubber duckys all lines up in a row.

    Code javascript:
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  18. #18
    SitePoint Member
    Join Date
    Jun 2010
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy

    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?

  19. #19
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The link appears to be broken.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •