Problem: onClick Function

mihirc · #1 Jul 26th, 2007, 09:06

Hello All,
My first post in this forum.

I have made a general contact us module based in html/and table for Joomla. I have added verification and CAPTCHA. but the problem i am facing is that, for the submit button i need to give a 3 commands to make them work properly, i.e. unless the person has entered the cumpolsary fields he wont be able to send the mail. But the problem is the onclick command is parsing only the first of the attributes.

Here is the php code.

Code: Select all

input[type="text"] {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url('images/input_bg.png');
background-repeat: no-repeat;
border: 1px solid #999999;
margin: 5px 0 0 0;
padding: 3px 3px 3px 3px;
display: inline;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url('images/input_bg.png');
background-repeat: no-repeat;
border: 1px solid #999999;
margin: 5px 0 0 0;
padding: 3px 3px 3px 3px;
display: inline;
}

* {
font-family: Arial;
font-size: 12px;
}
</style>
<div id="main">

<form method="POST" name="mailform">
  <table border="0">
    
    <tr>
      <td colspan="2"><strong>Send us an Enquiry</strong></td>
      </tr>
      
    <tr>
      <td>Your Name<br />
      <input type="text" name="name" id="name" class="from" size="<?php echo $width ?>"></td>
    </tr>
    
    <tr>
      <td>Company<br />
      <input name="company" type="text" class="from" id="companyname" size="<?php echo $company ?>"></td>
    </tr>
    
    <tr>
      <td>Email:<br />
      <input type="text" name="from" id="from" class="from" size="<?php echo $sendmail ?>"></td>
    </tr>
    
    <tr>
      <td>Phone<br />
      <input type="text" name="phone" id="phone" class="from" size="<?php echo $phone ?>"></td>
    </tr>
    
    <tr>
      <td>Fax<br />
      <input type="text" name="fax" id="fax" class="from" size="<?php echo $fax ?>"></td>
    </tr>
    
    <tr>
      <td>Subject:<br />
      <input type="text" name="subject" id="subject" class="subject" size="<?php echo $subject ?>"></td>
    </tr>
    
    <tr>
      <td>Mesage:<br />
      <textarea name="body" id="body" class="body" rows="<?php echo $messageh ?>" columns="<?php echo $messagew ?>"></textarea><br />
      <img src="modules/contactform/captcha.php?.png" alt="CAPTCHA" style="margin-top:4px;" /> <br />
          <input type="text" name="captchastring" size="6" /> (Case Sensitive!)</td> 
    </tr>
    
    <tr>
      <td colspan="2">  
          <input type="hidden" name="toaddress" value="<?php echo $to; ?>" id="toaddress">
          <input name="button" type="button" id="submit" value="Send Enquiry" onclick="return checkForm(); mailIt(this.form); document.mailform.captchastring.value='';">
  <input name="reset" type="reset" value="Reset">
             </td>
             
             </tr>
             </table>
</form>
</div>
<div id="status"></div>

THanking You,
mihir.

MikeHopley · #2 Jul 26th, 2007, 10:08

Code: Select all

onclick="return checkForm(); mailIt(this.form); document.mailform.captchastring.value='';"

"Return" will end your function by returning a value (the result of checkForm(), in this case): that's why it doesn't get beyond the first item.

I recommend removing your onclick to the .js javascript file itself. Delete it from the HTML, and write this in the javascript:

Code: Select all

document.getElementById("submit").onclick=function{firstFunction(); secondFunction(); andSoOnFunction();}

Alternatively:

Code: Select all

document.getElementById("submit").onclick=myOnclickFunction()

function myOnclickFunction() {
firstFunction()
secondFunction()
andSoOnFunction()
}

mihirc · #3 Jul 26th, 2007, 10:16

Hello,
thanks for the reply.

Just one thing, while defining it in the js where shall the return tag come?

I added this, just as you suggest (i hope so...)

Code: Select all

<script> document.getElementById("submit").onclick=function{return checkForm(); mailIt(this.form); document.mailform.captchastring.value=('');}
</script>

But then, i got this error, in the firebug.

missing ( before formal parameters

thanks,
mihir.

MikeHopley · #4 Jul 26th, 2007, 11:04

Quote:

Originally Posted by mihirc

But then, i got this error, in the firebug.

missing ( before formal parameters

Oops! Sorry, that should have been:

Code: Select all

document.getElementById("submit").onclick=function(){return checkForm(); mailIt(this.form); document.mailform.captchastring.value=('');}

I don't know/understand what your functions do, but I would put the return statement last -- otherwise, it will terminate your function and the other two will not run.

mihirc · #5 Jul 26th, 2007, 11:22

Ok,Just to explain you better...

The mailIt function sends a mail to a defined email id. And the checkform validates the form. SO what i want is unless the form is validated the mail shouldnt be going. If i keep the mailIt function before, then it is checking the form and giving the correct error, but it is also sending the mail, which i dont want.

mihir.

mihirc · #6 Jul 26th, 2007, 11:24

And after using ur suggested correction,
I came across this error...

document.getElementById("submit") has no properties

Sorry For Putting you through all this trouble...

mihir.

MikeHopley · #7 Jul 26th, 2007, 12:38

Quote:

Originally Posted by mihirc

And after using ur suggested correction,
I came across this error...

document.getElementById("submit") has no properties

Sorry For Putting you through all this trouble...

mihir.

Ah ha!

I think that means it's failing to find the element with that ID. Not sure why this is happening, but at least you can add an object detect to avoid the error:

Code: Select all

var x = document.getElementById("submit")
if (x) {
x.onclick=function(){mailIt(this.form); document.mailform.captchastring.value=(''); return checkForm();}
}

This may not actually make it work, but at least it will stop the error message (for pages that lack this element).

mihirc · #8 Jul 26th, 2007, 12:45

Hi.

well id did avoid the error, but then it disabled both the scripts from working.

you can take a look at the live site.. www.dev003.tekdi.com

Its a quarter past 6 here... and am going to stay up all night to solve this...

My trial and error is getting me to nothing but sheer, desperation.

mihir.

MikeHopley · #9 Jul 26th, 2007, 12:54

Quote:

Originally Posted by mihirc

My trial and error is getting me to nothing but sheer, desperation.

Then stop using trial and error.

Your site's XHTML code is a horrible mess of errors. Fix them all: http://validator.w3.org/

mihirc · #10 Jul 26th, 2007, 12:55

I know know,

this is joomla based site...

mihir.

MikeHopley · #11 Jul 26th, 2007, 13:05

Quote:

Originally Posted by mihirc

I know know,

this is joomla based site...

mihir.

Sorry, but I'm not willing to debug any website that has a large number of known errors. I don't have any skills with manipulating junk code; it's a black art. I left that behind years ago.

If joomla creates junk code, then you must deal with the consequences

Paramiliar · #12 Jul 26th, 2007, 20:44

The other alternative is to use the return checkform() method but add more code to the JS function

so

Code: Select all

onclick="return checkForm(); mailIt(this.form); document.mailform.captchastring.value='';"

and simply use
[code]onclick="return checkForm(this.form, ';');"[/cpde]
then your function would look like

Code: Select all

function checkForm(FORM, CAPTCHA){
   mailIt(FORM);
   document.mailform.captchastring.value= CAPTCHA

hope that helps

mihirc · #13 Jul 27th, 2007, 05:07

Hi,
thanks for the reply...

Here is what i did as you suggested (putting up the whole code...)

Code: Select all

<? 
$to = $params->get('email');  
$width = $params->get('width'); 
$company = $params->get('company');
$phone = $params->get('phone');
$fax = $params->get('fax');
$subject = $params->get('subject');
$sendmail = $params->get('sendmail');
$messagew = $params->get('messagew');
$messageh = $params->get('messageh');
$val_com = $params->get('val_com'); 
$val_phone = $params->get('val_phone'); 
$val_fax = $params->get('val_fax'); 
?>

<script type="text/javascript" src="modules/contactform/ajaxcontact.js"></script>
<script> 
function checkForm(FORM, CAPTCHA)
{
    var cname, cemail, csubject, cmessage, ccompany, cphone, cfax;
    with(window.document.mailform);
    mailIt(FORM);
   document.mailform.captchastring.value= CAPTCHA
    {
        cname    = name;
        cemail   = from;
        csubject = subject;
        cmessage = body;
        ccompany = company;
        cphone   = phone;
        cfax     = fax;
        
    }
    
    if(trim(cname.value) == '')
    {
        alert('Please enter Your Name');
        cname.focus();
        return false;
    }
    else if(trim(cemail.value) == '')
    {
        alert('Please enter your email');
        cemail.focus();
        return false;
    }
    else if(!isEmail(trim(cemail.value)))
    {
        alert('Email address is not valid');
        cemail.focus();
        return false;
    }
    else if(trim(csubject.value) == '')
    {
        alert('Subject Is Cumpolsary');
        csubject.focus();
        return false;
    }
    else if(trim(cmessage.value) == '')
    {
        alert('Please enter your Enquiry');
        cmessage.focus();
        return false;
    }
    <?php if ($val_com) {?>
        else if(trim(ccompany.value) == '')
    {
        alert('Please enter your Company Name');
        cmessage.focus();
        return false;
    }
    <?php } ?>
    <?php if ($val_phone) {?>
        else if(trim(cphone.value) == '')
    {
        alert('Please enter your Phone Number');
        cmessage.focus();
        return false;
    }
    <?php } ?>
        <?php if ($val_fax) {?>
        else if(trim(cfax.value) == '')
    {
        alert('Please enter your Company Name');
        cmessage.focus();
        return false;
    }
    <?php } ?>
    else
    {
        cname.value    = trim(cname.value);
        cemail.value   = trim(cemail.value);
        csubject.value = trim(csubject.value);
        ccompany.value = trim(ccompany.value);
        cphone.value = trim(cphone.value);
        cfax.value = trim(cfax.value);
        return true;
    }
}

/*
Strip whitespace from the beginning and end of a string
Input : a string
*/
function trim(str)
{
    return str.replace(/^\s+|\s+$/g,'');
}

/*
Check if a string is in valid email format. 
Returns true if valid, false otherwise.
*/
function isEmail(str)
{
    var regex = /^[-_.a-z0-9]+@(([-_a-z0-9]+\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i;
    return regex.test(str);
}



</script>

<style type="text/css">
input[type="text"] {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url('images/input_bg.png');
background-repeat: no-repeat;
border: 1px solid #999999;
margin: 5px 0 0 0;
padding: 3px 3px 3px 3px;
display: inline;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url('images/input_bg.png');
background-repeat: no-repeat;
border: 1px solid #999999;
margin: 5px 0 0 0;
padding: 3px 3px 3px 3px;
display: inline;
}

* {
font-family: Arial;
font-size: 12px;
}
</style>
<div id="main">

<form method="POST" name="mailform">
  <table border="0">
    
    <tr>
      <td colspan="2"><strong>Send us an Enquiry</strong></td>
      </tr>
      
    <tr>
      <td>Your Name<br />
      <input type="text" name="name" id="name" class="from" size="<?php echo $width ?>"></td>
    </tr>
    
    <tr>
      <td>Company<br />
      <input name="company" type="text" class="from" id="companyname" size="<?php echo $company ?>"></td>
    </tr>
    
    <tr>
      <td>Email:<br />
      <input type="text" name="from" id="from" class="from" size="<?php echo $sendmail ?>"></td>
    </tr>
    
    <tr>
      <td>Phone<br />
      <input type="text" name="phone" id="phone" class="from" size="<?php echo $phone ?>"></td>
    </tr>
    
    <tr>
      <td>Fax<br />
      <input type="text" name="fax" id="fax" class="from" size="<?php echo $fax ?>"></td>
    </tr>
    
    <tr>
      <td>Subject:<br />
      <input type="text" name="subject" id="subject" class="subject" size="<?php echo $subject ?>"></td>
    </tr>
    
    <tr>
      <td>Mesage:<br />
      <textarea name="body" id="body" class="body" rows="<?php echo $messageh ?>" columns="<?php echo $messagew ?>"></textarea><br />
      <img src="modules/contactform/captcha.php?.png" alt="CAPTCHA" style="margin-top:4px;" /> <br />
          <input type="text" name="captchastring" size="6" /> (Case Sensitive!)</td> 
    </tr>
    
    <tr>
      <td colspan="2">  
          <input type="hidden" name="toaddress" value="<?php echo $to; ?>" id="toaddress">

         <input name="submit" type="button" id="submit" value="Send Enquiry" onclick="return mailIt(this.form)">
  
  <input name="reset" type="reset" value="Reset">
    
             </td>
             
             </tr>
             </table>
</form>
</div>
<div id="status"></div>

I really cant get it work...

mihir.

Paramiliar · #14 Jul 27th, 2007, 10:13

well there are so many things wrong with that code that i'm not even gonna attempt to put the problems here. Give me 5 mins i'll rewrite it for you

Right well I cant test the code fully (as I dont have all the functions and PHP classes) but this should work

Code: Select all

<? 
    $to = $params->get('email');  
    $width = $params->get('width'); 
    $company = $params->get('company');
    $phone = $params->get('phone');
    $fax = $params->get('fax');
    $subject = $params->get('subject');
    $sendmail = $params->get('sendmail');
    $messagew = $params->get('messagew');
    $messageh = $params->get('messageh');
    $val_com = $params->get('val_com'); 
    $val_phone = $params->get('val_phone'); 
    $val_fax = $params->get('val_fax'); 
    
?>

<script type="text/javascript" src="modules/contactform/ajaxcontact.js"></script>
<script type="text/javascript" language="javascript"> 
<!-- #
    function trim(str){
        return str.replace(/^\s+|\s+$/g,'');
    }

    function checkForm(FORM, CAPTCHA){
        var cname, cemail, csubject, cmessage, ccompany, cphone, cfax;

        mailIt(FORM);
        document.getElementById("captchastring").value = CAPTCHA;
        
        // get the form field data
        cname = document.getElementById("name");
        cemail = document.getElementById("from");
        csubject = document.getElementById("subject");
        cmessage = document.getElementById("body");
        ccompany = document.getElementById("company");
        cphone = document.getElementById("phone");
        cfax = document.getElementById("cfax");
        
        if (trim(cname.value) == ""){
            alert('Please enter Your Name');
            cname.focus();
            return false;
        } else if (trim(cemail.value) == ''){
            alert('Please enter your email');
            cemail.focus();
            return false;
        } else if(!isEmail(trim(cemail.value))){
            alert('Email address is not valid');
            cemail.focus();
            return false;
           } else if(trim(csubject.value) == ''){
            alert('Subject Is Cumpolsary');
            csubject.focus();
            return false;
        } else if(trim(cmessage.value) == ''){
            alert('Please enter your Enquiry');
            cmessage.focus();
            return false;
        }<?php if ($val_com) {?> else if(trim(ccompany.value) == '') {
            alert('Please enter your Company Name');
            cmessage.focus();
            return false;
        }<?php }  if ($val_phone) {?> else if(trim(cphone.value) == ''){
            alert('Please enter your Phone Number');
            cmessage.focus();
            return false;
        }<?php }  if ($val_fax) {?> else if(trim(cfax.value) == ''){
            alert('Please enter your Company Name');
            cmessage.focus();
            return false;
        }<?php } ?> else {
            cname.value        = trim(cname.value);
            cemail.value       = trim(cemail.value);
            csubject.value     = trim(csubject.value);
            ccompany.value     = trim(ccompany.value);
            cphone.value     = trim(cphone.value);
            cfax.value         = trim(cfax.value);
            return true;
        }
    }

/*
Strip whitespace from the beginning and end of a string
Input : a string
*/
/*
Check if a string is in valid email format. 
Returns true if valid, false otherwise.
*/
function isEmail(str)
{
    var regex = /^[-_.a-z0-9]+@(([-_a-z0-9]+\.)+(ad|ae|aero|af|ag|ai|al|am|an|ao|aq|ar|arpa|as|at|au|aw|az|ba|bb|bd|be|bf|bg|bh|bi|biz|bj|bm|bn|bo|br|bs|bt|bv|bw|by|bz|ca|cc|cd|cf|cg|ch|ci|ck|cl|cm|cn|co|com|coop|cr|cs|cu|cv|cx|cy|cz|de|dj|dk|dm|do|dz|ec|edu|ee|eg|eh|er|es|et|eu|fi|fj|fk|fm|fo|fr|ga|gb|gd|ge|gf|gh|gi|gl|gm|gn|gov|gp|gq|gr|gs|gt|gu|gw|gy|hk|hm|hn|hr|ht|hu|id|ie|il|in|info|int|io|iq|ir|is|it|jm|jo|jp|ke|kg|kh|ki|km|kn|kp|kr|kw|ky|kz|la|lb|lc|li|lk|lr|ls|lt|lu|lv|ly|ma|mc|md|mg|mh|mil|mk|ml|mm|mn|mo|mp|mq|mr|ms|mt|mu|museum|mv|mw|mx|my|mz|na|name|nc|ne|net|nf|ng|ni|nl|no|np|nr|nt|nu|nz|om|org|pa|pe|pf|pg|ph|pk|pl|pm|pn|pr|pro|ps|pt|pw|py|qa|re|ro|ru|rw|sa|sb|sc|sd|se|sg|sh|si|sj|sk|sl|sm|sn|so|sr|st|su|sv|sy|sz|tc|td|tf|tg|th|tj|tk|tm|tn|to|tp|tr|tt|tv|tw|tz|ua|ug|uk|um|us|uy|uz|va|vc|ve|vg|vi|vn|vu|wf|ws|ye|yt|yu|za|zm|zw)|(([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5])\.){3}([0-9][0-9]?|[0-1][0-9][0-9]|[2][0-4][0-9]|[2][5][0-5]))$/i;
    return regex.test(str);
}


-->
</script>

<style type="text/css">
input[type="text"] {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url('images/input_bg.png');
background-repeat: no-repeat;
border: 1px solid #999999;
margin: 5px 0 0 0;
padding: 3px 3px 3px 3px;
display: inline;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
background-image: url('images/input_bg.png');
background-repeat: no-repeat;
border: 1px solid #999999;
margin: 5px 0 0 0;
padding: 3px 3px 3px 3px;
display: inline;
}

* {
font-family: Arial;
font-size: 12px;
}
</style>
<div id="main">

<form method="POST" name="mailform" action="<?=$PHP_SELF;?>" onSubmit="return checkForm(this.form, ';');">
  <table border="0">
    
    <tr>
      <td colspan="2"><strong>Send us an Enquiry</strong></td>
      </tr>
      
    <tr>
      <td>Your Name<br />
      <input type="text" name="name" id="name" class="from" size="<?php echo $width ?>"></td>
    </tr>
    
    <tr>
      <td>Company<br />
      <input name="company" type="text" class="from" id="companyname" size="<?php echo $company ?>"></td>
    </tr>
    
    <tr>
      <td>Email:<br />
      <input type="text" name="from" id="from" class="from" size="<?php echo $sendmail ?>"></td>
    </tr>
    
    <tr>
      <td>Phone<br />
      <input type="text" name="phone" id="phone" class="from" size="<?php echo $phone ?>"></td>
    </tr>
    
    <tr>
      <td>Fax<br />
      <input type="text" name="fax" id="fax" class="from" size="<?php echo $fax ?>"></td>
    </tr>
    
    <tr>
      <td>Subject:<br />
      <input type="text" name="subject" id="subject" class="subject" size="<?php echo $subject ?>"></td>
    </tr>
    
    <tr>
      <td>Mesage:<br />
      <textarea name="body" id="body" class="body" rows="<?php echo $messageh ?>" columns="<?php echo $messagew ?>"></textarea><br />
      <img src="modules/contactform/captcha.php?.png" alt="CAPTCHA" style="margin-top:4px;" /> <br />
          <input type="text" name="captchastring" id="captchastring" size="6" /> (Case Sensitive!)</td> 
    </tr>
    
    <tr>
      <td colspan="2">  
          <input type="hidden" name="toaddress" value="<?php echo $to; ?>" id="toaddress">

         <input name="submit" type="submit" id="submit" value="Send Enquiry" >
  
  <input name="reset" type="reset" value="Reset">
    
             </td>
             
             </tr>
             </table>
</form>
</div>
<div id="status"></div>

mihirc · #15 Jul 27th, 2007, 10:16

Hi,
wow cool...
Would you like to check the javascript and the send.php file also? so that it could be easier for you to take a look...

you are being great help...

mihir.

		Webforumz.com > Main Forums > Design Your Website > Web Page Design
Problem: onClick Function