【问题标题】:Submit button checking mandatory fields before opening new window在打开新窗口之前提交按钮检查必填字段
【发布时间】:2012-03-17 05:16:17
【问题描述】:

我有一个带有必填字段等的 HTML 5 表单。单击提交按钮时会在提交前检查必填字段。虽然我更改了在另一个窗口中打开链接的行为,但我无法让表单检查必填字段并在完成后发送链接。

我还需要表单来检查字段是否已填写,然后使用验证和外部链接进行处理,而不是在用户跳过填写时打开链接。

我的表单代码如下:

        <?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]-->

而我的Process.php文件如下

<?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']);
    }
}

【问题讨论】:

  • 有人遇到过同样的问题吗?
  • 如果你给出正确的标签,你得到答案的机会就会大很多。
  • 我不确定您要做什么。什么链接?但是你不能让表单提交到一个新打开的窗口吗?

标签: php forms html validation button


【解决方案1】:

您可以在单个 php 文件中完成所有操作。 (比如说 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
 ?>

【讨论】:

    【解决方案2】:

    既然你提到了 HTML5。我正在添加另一个答案
    使用 Javascript 验证您的表单,然后重定向到贝宝网站
    你犯的错误:

    代码 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>
    

    【讨论】:

    • 嗯 2 件事。第一:在 HTML5 中,您不必为属性分配值,因此 [required] 与 [required="required"] 一样有效(分配值是 XHTML 的遗产) - 看看他们在 W3C 上是如何做到的:@ 987654323@。第二:data-*属性用来定义自定义属性,后面可以从js中读取。所以是的 data-minlength 是有效的,因为 textareas 没有那种属性,我猜他用它来在他的 textarea 上设置最小长度。
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-12-13
    • 1970-01-01
    • 2013-10-17
    相关资源
    最近更新 更多