Javascript not firing after first form submission

Swi · Jun 27, 2018

The JS below is only firing for the first form submission.

Code:

    function onSubmit(token) {
		msg = "";
		if (document.getElementById('name').value == "")
		  {
			msg = msg + "- Name \n";
		  }
		if (document.getElementById('email').value == "")
		  {
			msg = msg + "- Email \n";
		  }

		 if (msg != "")  {
		  	alert ("The following fields are required: \n" + msg);
            return false;
		 }
		 else {
            document.getElementById('contactform').submit();
		 }
    }
    </script>

Got to be something simple I am missing. Full code below. Thanks.

Code:

{html_head}
	{exp:channel:entries channel="contact" limit="1" disable="categories|member_data|pagination|category_fields"}
	<title>{page_title}</title>
	<meta name="description" content="{contactmeta_description}" />
	<meta name="keywords" content="{contactmeta_keywords}" />
	<meta name="format-detection" content="telephone=no">
    <!--api link-->
    <script src="[URL unfurl="true"]https://www.google.com/recaptcha/api.js"[/URL] async defer></script>
    <!--call back function-->
    <script>
    function onSubmit(token) {
		msg = "";
		if (document.getElementById('name').value == "")
		  {
			msg = msg + "- Name \n";
		  }
		if (document.getElementById('email').value == "")
		  {
			msg = msg + "- Email \n";
		  }

		 if (msg != "")  {
		  	alert ("The following fields are required: \n" + msg);
            return false;
		 }
		 else {
            document.getElementById('contactform').submit();
		 }
    }
    </script>
	{/exp:channel:entries}


{global_stylesheets}
{favicon}
<link rel="icon" type="image/png"
 href="" />
{js}
{html_head_end}

	{exp:channel:entries channel="contact" limit="1"}
	<body class="about entry-{entry_id}">
	{/exp:channel:entries}

	{branding_begin}
			{embed="global_embeds/.top_nav" loc="contact"}
			{!-- {global_top_search}--}

	{branding_end}

{wrapper_begin}

{exp:channel:entries channel="contact" limit="1"}

{sidebar_left_begin}
	<ul id="sidebar-left" class="subnav_list">
		<li style="font-weight: normal; line-height: 15px;">
		{side_bar_content}
		</li>
	</ul>

{sidebar_left_end}


<div id="content_pri" class="welcome"> <!-- This is where all primary content, right column gets entered -->

<div id="page_header" class="about">
        <h2>{title}</h2>
    </div>

<?php
$formSubmitted = false;
$captchaMessage = "";

//only run when form is submitted
if(isset($_POST['g-recaptcha-response'])) {
    $secretKey = 'xxxxxxxxxxxxxxxxxx';
    $response = $_POST['g-recaptcha-response'];
    $remoteIp = $_SERVER['REMOTE_ADDR'];


    $reCaptchaValidationUrl = file_get_contents("[URL unfurl="true"]https://www.google.com/recaptcha/api/siteverify?secret=$secretKey&response=$response&remoteip=$remoteIp");[/URL]
    $result = json_decode($reCaptchaValidationUrl, TRUE);
    if($result['success'] == 1) {
	            // Captcha was valid
        		$br = "<br />";
        		$msg = "";
        		$msg = "<div style='font-family: tahoma, verdana, arial; font-size: 12px; line-height: 17px;'>";
        		$msg .= "Name: " . $_POST["name"] . $br;
        		$msg .= "Title: " . $_POST["title"] . $br;
        		$msg .= "Company: " . $_POST["company"] . $br;
        		$msg .= "Address: " . $_POST["address"] . $br;
        		$msg .= "City: " . $_POST["city"] . $br;
        		$msg .= "State: " . $_POST["state"] . $br;
        		$msg .= "Zip: " . $_POST["zip"] . $br;
        		$msg .= "Email: " . $_POST["email"] . $br;
        		$msg .= "Phone: " . $_POST["phone"] . $br;
        		$msg .= "Fax: " . $_POST["fax"] . $br;
        		$msg .= "Division: " . $_POST["division"] . $br;
        		$msg .= "Referral: " . $_POST["referral"] . $br;
        		$msg .= "Source: " . $_POST["source"] . $br;
        		$msg .= "Bid Date: " . $_POST["biddate"] . $br;
        		$msg .= "Comments: " . $_POST["comments"] . $br;
        		$msg .= "</div>";

        		$division= $_POST["division"];
        		switch ($division)
        		{
        		case "General Inquiries":
        		  $to = "xxx";
        		  break;
        		case "Construction":
        		  $to = "xxx";
        		  break;
        		case "Steel Fabrication":
        		  $to = "xxx";
        		  break;
        		case "Galvanizing":
        		  $to = "xxx";
        		  break;
        		case "Custom Signs":
        		  $to = "xxx";
        		  break;
        		case "Human Resources":
        		  $to = "xxx";
        		  break;
        		default:
          		  $to = "xxx";
        		}


        		$subject = "Test.com - Contact Us Form Submission";
        		$headers  = 'MIME-Version: 1.0' . "\r\n";
        		$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
        		$headers .= "From: xxx";
        		$sent = mail($to, $subject, $msg, $headers);

				$formSubmitted = true;


	        } else {
				$formSubmitted = false;
	        }
	}

	if ($formSubmitted) {

?>
	    {thank_you_message}
<?php
	}
	else {
	// display the form
?>

 <p>{intro_text}</p>
<!-- begin form -->
<script src="[URL unfurl="true"]http://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>[/URL]
<style type="text/css">

	/* Contact Form */
	.contactForm label {
		display: block;
		float: left;
		text-align: right;
		width: 210px;
		padding-right: 5px;
		padding-top: 4px;
	}

	.contactForm input, select {
		float: left;
		padding: 2px;
		margin-bottom: 10px;
		width: 300px;
	}

	.contactForm .button {
		width: 100px;
		margin-left: 300px;
	}

	.contactForm textarea {
		width: 300px;
		height: 80px;
	}

	.contactForm .clear {
		clear: both;
	}

	.contactForm .smallInput {
		width: 120px;
	}

	.contactForm .smallLabel {
		width: 45px;
	}


	.contactForm .required {
		color: #940310;
		font-weight: bold;
	}

	/*the slider background*/
	.slider {
	width:230px;
	height:11px;
	background:url(/themes/site_themes/images/slider-bg.png);
	position:relative;
	margin:0;
	padding:0 10px;
	float: left;
	margin-left: 15px;
	margin-top: 7px;
	}

	/*Style for the slider button*/
	.ui-slider-handle {
	width:24px;
	height:24px;
	position:absolute;
	top:-7px;
	margin-left:-12px;
	z-index:200;
	background:url(/themes/site_themes/images/slider-button.png);
	}

	/*Result div where the slider value is displayed*/
	#slider-result {
	font-size:50px;
	height:200px;
	font-family:Arial, Helvetica, sans-serif;
	color:#fff;
	width:250px;
	text-align:center;
	text-shadow:0 1px 1px #000;
	font-weight:700;
	padding:20px 0;
	}

	/*This is the fill bar colour*/
	.ui-widget-header {
	background:url(/themes/site_themes/images/fill.png) no-repeat left;
	height:8px;
	left:1px;
	top:1px;
	position:absolute;
	}

</style>
<div class="contactForm">

	<form action="" method="post" name="contactform" id="contactform">
		<input type="hidden" name="formsubmit" id="formsubmit" value="true">
		<label class="required">Name:</label>
		<input type="text" id="name" name="name" maxlength="100" />
		<br class="clear" />

		<label>Title:</label>
		<input type="text" id="title" name="title" maxlength="100" />
		<br class="clear" />

		<label>Company:</label>
		<input type="text" id="company" name="company" maxlength="100" />
		<br class="clear" />

		<label>Address:</label>
		<input type="text" id="address" name="address" maxlength="100" />
		<br class="clear" />

		<label>City:</label>
		<input type="text" id="city" name="city" maxlength="100" />
		<br class="clear" />

		<label>State:</label>
		<input class="smallInput" type="text" id="state" name="state" maxlength="100" />

		<label class="smallLabel">Zip:</label>
		<input class="smallInput"  type="text" id="zip" name="zip" maxlength="100" />
		<br class="clear" />

		<label class="required">Email:</label>
		<input type="email" id="email" name="email" maxlength="100" />
		<br class="clear" />

		<label>Phone:</label>
		<input type="text" id="phone" name="phone" maxlength="100" />
		<br class="clear" />

		<label>Fax:</label>
		<input type="text" id="fax" name="fax" maxlength="100" />
		<br class="clear" />

		<label>Division to Contact:</label>
	        <select name="division" id="division">
		          <option value="" selected="selected">Select...</option>
				  <option value="General Inquiries">General Inquiries</option>
		          <option value="Construction">Construction</option>
		          <option value="Steel Fabrication">Steel Fabrication</option>
		          <option value="Galvanizing">Galvanizing</option>
		          <option value="Custom Signs">Custom Signs</option>
		          <option value="Human Resources">Human Resources</option>
			</select>
		<br class="clear" />


		<label>Referral Source:</label>
	        <select name="referral" id="referral">
		          <option value="" selected="selected">Select...</option>
		          <option value="Contractor">Contractor</option>
		          <option value="Advertisement">Advertisement</option>
		          <option value="Trade Show">Trade Show</option>
		          <option value="Google Search">Google Search</option>
		          <option value="Yahoo Search">Yahoo Search</option>
		          <option value="Site Link">Site Link</option>
		          <option value="Returning Customer">Returning Customer</option>
		          <option value="Friend">Friend</option>
		          <option value="Other">Other</option>
               </select>
		<br class="clear" />

        <label>Referral Source Name:</label>
        <input name="source" type="text" id="source" maxlength="100" />
		<br class="clear" />


		<label>Bid Date (if applicable):</label>
		<input type="text" id="biddate" name="biddate" maxlength="100" />
		<br class="clear" />

		<label>Questions or comments:</label>
		<textarea id="comments" name="comments"></textarea>
		<br class="clear" />
		<br />
		<br class="clear" />
		<br />
        <div style="text-align:center"><button class="g-recaptcha" data-sitekey="xxx" data-callback='onSubmit'>Submit</button></div>
		<br class="clear" />



	</form>
</div>

  		{footer_text}

	<!-- end form -->
<?php
 }
?>

        {/exp:channel:entries}
</div>


<div id="footer">
	{embed="global_embeds/.bottom-global" loc="contact"}
</div>

{wrapper_close}
{html_close}

Swi

Swi · Jun 27, 2018

Seems I had to reset the recaptcha response after form validation. Thanks.

Swi

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript not firing after first form submission

Swi

Programmer

Swi

Programmer

Similar threads

Part and Inventory Search

Sponsor