Solved

Conflict between onLoad code and javascript

Posted on 2014-07-21
5
390 Views
Last Modified: 2014-07-21
I have a contact form with a submit button which is disabled by default.  This is done to interfere with spambots which have abused the form.  The button is enabled by javascript.  This contact page is intended for mobile visitors, and it is loaded in a frameset.  In order to assure that the contact form loads at the top of the page, and not at the level of a link embedded in the page from which it is loaded, there is onLoad code in the contact form.  The onLoad code forces the contact form to scroll to the top when the page is loaded.  However, there is a dilemma.  The javascript which enables the submit button somehow interferes with the onLoad code, such that the page does not scroll to the top when loaded.  However, without that javascript, the submit button is disabled.  I'm looking for a method of enabling the submit button without conflicting with the onLoad code.  I've simplified the contact form, rendering only the essential elements of it in the snippet.  The actual contact form is at www.mauitradewinds.com/RezEasy/mobile/rez_m-contact.html

<!doctype html>
<html>
<head>
</head>	
<body onLoad="window.parent.parent.scrollTo(0,0)">
<button type="submit" id="submit" disabled>Submit Form</button>
<script>
      function load() {
        document.getElementById('submit').disabled = false;
        //alert("load event detected!");
      }
      window.onload = load;
    </script>
</body>
</html>

Open in new window

0
Comment
Question by:ddantes
  • 2
  • 2
5 Comments
 
LVL 13

Expert Comment

by:duncanb7
ID: 40208448
Could you this code putting load() on body onload  ?
Duncan
<!doctype html>
<html>
<head>
</head>	
<body onLoad="javascript:load();">
<button type="submit" id="submit" disabled>Submit Form</button>
<script>
      function load() {
        document.getElementById('submit').disabled = false;
        //alert("load event detected!");
      }
    '  window.onload = load;
    </script>
</body>
</html>

Open in new window

0
 
LVL 38

Accepted Solution

by:
Tom Beck earned 500 total points
ID: 40208722
A spambot doesn't need a submit button at all to submit a form so disabling it is pointless. Plus, you are disabling and re-enabling on the same page in the onLoad event.

There are a few other methods that work better (though not perfectly). I assume you don't want to use a CAPTCHA method.

1.) Insert a text box and label set to visibility:hidden and leave it blank. Label it something normal like First Name. Test that that field is blank in validation. Spambots tend to fill in every field to get past the validators.

2.) Use javascript to capture and cancel any submitting of the form before a predetermined number of seconds has passed, say 15 seconds. Humans take much longer to fill out forms than spambots. If it's filled out too quickly, it's a spambot.

3.) Require the user to delete text from a field before clicking submit. "Delete this text before submitting the form." Check that that field is blank in validation. Again, spambots tend to fill in every field.
0
 

Author Comment

by:ddantes
ID: 40209547
Thank you both for your comments.  Tom:  I do have an invisible text field, which is checked in validation.  The PHP exits if that field is not blank.  The text field is named "how", and it is preceded with the question: "How did you learn about Maui Tradewinds?"

 In a previous question about captcha methods, an Expert suggested that I use an auxiliary method, namely, disabling the submit button unless the visitor uses javascript, because most bots don't use javascript.  Now, understanding that bots usually don't load a form in a browser, I'm not so interested in disabling the Submit button.

I very much like your suggestion about canceling a form which is submitted before a predetermined number of seconds.  Are you able to supply code for that?  If I should start a new question about this, let me know. Here is the present PHP code...

<?php 
if($_POST['how'] != '') {  //show thankyou page and exit.
    header("Location: m_reply.html"); /* Redirect to thankyou page */
    exit; }
 
$errors = '';
$myemail = 'stay@mauitradewinds.com';//<-----Put Your email address here.
if(empty($_POST['firstname'])  || 
   empty($_POST['lastname'])  ||
   empty($_POST['email']) || 
   empty($_POST['message']))
{
    $errors .= "\n Error: At a minimum, we need your name, Email address and message in order to transmit your form.";
}
else
{
    $firstname = array_key_exists('firstname',$_POST) ? $_POST['firstname']:''; 
    $lastname = array_key_exists('lastname',$_POST) ? $_POST['lastname']:''; 
    $Address = array_key_exists('Address',$_POST) ? $_POST['Address']:''; 
    $City = array_key_exists('City',$_POST) ? $_POST['City']:''; 
    $State = array_key_exists('State',$_POST) ? $_POST['State']:''; 
    $Zip = array_key_exists('Zip',$_POST) ? $_POST['Zip']:''; 
    $Country = array_key_exists('Country',$_POST) ? $_POST['Country']:''; 
    $Phone = array_key_exists('Phone',$_POST) ? $_POST['Phone']:''; 
    $email_address = array_key_exists('email',$_POST) ? $_POST['email']:''; 
    $message = array_key_exists('message',$_POST) ? $_POST['message']:''; 
    if (!preg_match(
    '/^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i', 
    $email_address))
    {
        $errors .= "\n Error: Invalid email address";
    }
}

if( empty($errors))
{
	$to = $myemail; 
	$email_subject = "m_Rez-contact form";
	$email_body = "You have received a contact form from m_RezEasy. ".
	" Here are the details:\n First Name: $firstname \n Last Name: $lastname \n Address: $Address \n City: $City \n State: $State \n Zip: $Zip \n Country: $Country \n Phone: $Phone \n Email: $email_address \n Message: $message"; 
	
	$headers = "From: $myemail\n"; 
	$headers .= "Reply-To: $email_address";
	
	mail($to,$email_subject,$email_body,$headers);
	//redirect to the 'thank you' page
	header('Location: m_reply.html');
	exit;//You should always "exit" immediately after a redirection request
} 
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
	<title>Contact form handler</title>
</head>

<body>
<!-- This page is displayed only if there is some error -->
<?php
echo nl2br($errors);
?>


</body>
</html>

Open in new window

0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40209605
"How" would not be a good choice for a field name for a "honeypot" if you are trying to trap a spambot. Just call it "Name" and the spambot will fill in a fake name.

A sophisticated spambot can do a form submit at the DOM level or do a POST transaction of it's own on the form fields. It reads the field names and the form action from the source.

To capture a form submit you can use jQuery like this;

$( "#myform" ).submit(function( event ) {
  alert( "Handler for .submit() called." );
  event.preventDefault();  //prevent the form submission until you check the timer
});

This will be invoked whether the form is submitted via a button press or by way of scripting. Won't work if the spambot is initiating a POST of it's own.

Your using PHP. This site suggests a form token.

http://community.developer.authorize.net/t5/The-Authorize-Net-Developer-Blog/Handling-Online-Payments-Part-7-Preventing-Automated-Form/ba-p/11778
0
 

Author Comment

by:ddantes
ID: 40209648
Thank you.  I'll change the text field to "name".  I've posted a new question about applying a timer.  http://www.experts-exchange.com/Programming/Languages/Scripting/PHP/Q_28480522.html
0

Featured Post

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now