Submit button checking mandatory fields before opening new window - php

Question

I've a HTML 5 form with mandatory fields etc. The submit button when clicked checks for mandatory fields before submitting. While I've changed the behavior to open a link in another window, I can't make the form check the mandatory fields and send the links after this is done.
I need the form to also check if the fields have been filled and then process with validation and external link but rather not have the link opened while the user skip from filling it.
My form's codes read as follows:
<?php
//init variables
$cf = array();
$sr = false;
if(isset($_SESSION['cf_returndata'])){
$cf = $_SESSION['cf_returndata'];
$sr = true;
}
?>
<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
<li id="info">There were some problems with your form submission:</li>
<?php
if(isset($cf['errors']) && count($cf['errors']) > 0) :
foreach($cf['errors'] as $error) :
?>
<li><?php echo $error ?></li>
<?php
endforeach;
endif;
?>
</ul>
<p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="process.php">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe#example.com" required />
<label for="telephone">Telephone: </label>
<input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />
<label for="enquiry">Enquiry: </label>
<select id="enquiry" name="enquiry">
<option value="Choose" selected>Choose</option>
<option value="Purchase">Purchase</option>
<option value="Distribution">Distribution</option>
<option value="Inquire">Inquire</option>
</select>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>
<span id="loading"></span>
<input type="submit" value="Submit" id="submit-button" Link" onClick="window.open ('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G6ZNL8H4JXBB8', 'newwindow')"/>
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
<?php unset($_SESSION['cf_returndata']); ?>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.5.1.min.js"%3E%3C/script%3E'))</script>
<script src="js/plugins.js"></script>
<script src="js/script.js"></script>
<!--[if lt IE 7 ]>
<script src="js/libs/dd_belatedpng.js"></script>
<script> DD_belatedPNG.fix('img, .png_bg');</script>
<![endif]-->
And my Process.php file is as follows
<?php
if( isset($_POST) ){
//form validation vars
$formok = true;
$errors = array();
//sumbission data
$ipaddress = $_SERVER['REMOTE_ADDR'];
$date = date('d/m/Y');
$time = date('H:i:s');
//form data
$name = $_POST['name'];
$email = $_POST['email'];
$telephone = $_POST['telephone'];
$enquiry = $_POST['enquiry'];
$message = $_POST['message'];
//validate form data
//validate name is not empty
if(empty($name)){
$formok = false;
$errors[] = "You have not entered a name";
}
//validate email address is not empty
if(empty($email)){
$formok = false;
$errors[] = "You have not entered an email address";
//validate email address is valid
}elseif(!filter_var($email, FILTER_VALIDATE_EMAIL)){
$formok = false;
$errors[] = "You have not entered a valid email address";
}
//validate message is not empty
if(empty($message)){
$formok = false;
$errors[] = "You have not entered a message";
}
//validate message is greater than 20 charcters
elseif(strlen($message) < 20){
$formok = false;
$errors[] = "Your message must be greater than 20 characters";
}
//send email if all is ok
if($formok){
$headers = "From: myemail#mail.com" . "\r\n";
$headers .= 'Content-type: text/html; charset=iso-8859-1' . "\r\n";
$emailbody = "<p>You have recieved a new message from the enquiries form on your website.</p>
<p><strong>Name: </strong> {$name} </p>
<p><strong>Email Address: </strong> {$email} </p>
<p><strong>Telephone: </strong> {$telephone} </p>
<p><strong>Enquiry: </strong> {$enquiry} </p>
<p><strong>Message: </strong> {$message} </p>
<p>This message was sent from the IP Address: {$ipaddress} on {$date} at {$time}</p>";
mail("myemail#mail.com","New Enquiry",$emailbody,$headers);
}
//what we need to return back to our form
$returndata = array(
'posted_form_data' => array(
'name' => $name,
'email' => $email,
'telephone' => $telephone,
'enquiry' => $enquiry,
'message' => $message
),
'form_ok' => $formok,
'errors' => $errors
);
//if this is not an ajax request
if(empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) !== 'xmlhttprequest'){
//set session variables
session_start();
$_SESSION['cf_returndata'] = $returndata;
//redirect back to form
header('location: ' . $_SERVER['HTTP_REFERER']);
}
}

Answer 1

You can do all in single php file . (say form_disp_process.php)
<?php
if( isset($_POST) )
{
// check validation set formok=true or false
if($formok)
{
//mail data
// if u want to redirect user to new welcome page after mailing
echo "
<script language='JavaScript'>
window.location = 'welcomepage.php';
//window.open ('https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=G6ZNL8H4JXBB8', 'newwindow')"
</script>
";
}
}
else
{
//init variables
?>
<ul id="errors" class="<?php echo ($sr && !$cf['form_ok']) ? 'visible' : ''; ?>">
<li id="info">There were some problems with your form submission:</li>
<?php
if(isset($cf['errors']) && count($cf['errors']) > 0) :
foreach($cf['errors'] as $error) :
?>
<li><?php echo $error ?></li>
<?php
endforeach;
endif;
?>
</ul>
<p id="success" class="<?php echo ($sr && $cf['form_ok']) ? 'visible' : ''; ?>">Thanks for your message! We will get back to you ASAP!</p>
<form method="post" action="form_disp_process.php">
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['name'] : '' ?>" placeholder="John Doe" required autofocus />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['email'] : '' ?>" placeholder="johndoe#example.com" required />
<label for="telephone">Telephone: </label>
<input type="tel" id="telephone" name="telephone" value="<?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['telephone'] : '' ?>" />
<label for="enquiry">Enquiry: </label>
<select id="enquiry" name="enquiry">
<option value="Choose" selected>Choose</option>
<option value="Purchase">Purchase</option>
<option value="Distribution">Distribution</option>
<option value="Inquire">Inquire</option>
</select>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required data-minlength="20"><?php echo ($sr && !$cf['form_ok']) ? $cf['posted_form_data']['message'] : '' ?></textarea>
span id="loading"></span>
<input type="submit" value="Submit" id="submit-button" Link" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
<?php unset($_SESSION['cf_returndata']); ?>
</div>
</div>
<?php
} //else close
?>

Answer 2

Since you mentioned HTML5 .I am adding another answer
Use Javascript to validate your form and then redirect to paypal site
Mistakes you made :
You have used attribute "required" for mandatory fields but have you have to give value .
Like this required="required"
Reference : http://www.w3schools.com/html5/att_textarea_required.asp
There is no attribute called data-minlength for textarea
Reference : http://www.w3schools.com/html5/tag_textarea.asp
Code HTML5 + JavaScript :
<head>
<script type="text/javascript">
function checklength()
{
var x=document.forms["myform"]["message"].value;
if(x.length < 20)
{
alert("Your message must be greater than 20 charcter");
document.getElementById('errors').innerHTML = 'Your message must be greater than 20 charcter';
return false;
}
return true;
}
</script>
</head>
<body>
<div id= "errors"> </div>
<form method="post" name="myform" onsubmit="return checklength();" action="mail_me_and_redirect_to_paypal.php" >
<label for="name">Name: <span class="required">*</span></label>
<input type="text" id="name" name="name" required="required" value="sdfdf" placeholder="John Doe" autofocus />
<label for="email">Email Address: <span class="required">*</span></label>
<input type="email" id="email" name="email" required="required" value="dsfds#sdf.com" placeholder="johndoe#example.com" />
<label for="telephone">Telephone: </label>
<input type="tel" id="telephone" name="telephone" required="required" value="werwe" />
<label for="enquiry">Enquiry: </label>
<select id="enquiry" name="enquiry">
<option value="Choose" selected>Choose</option>
<option value="Purchase">Purchase</option>
<option value="Distribution">Distribution</option>
<option value="Inquire">Inquire</option>
</select>
<label for="message">Message: <span class="required">*</span></label>
<textarea id="message" name="message" placeholder="Your message must be greater than 20 charcters" required="required" ></textarea>
<input type="submit" value="Submit" />
<p id="req-field-desc"><span class="required">*</span> indicates a required field</p>
</form>
</body>