Question

我用PHP构建了一个反馈表单。包括基金会5的Popup。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  <style type="text/css">
    .auto-style1 {
      margin-left: 1px;
    }
    .auto-style2 {
      margin-left: 0px;
    }
    .auto-style3 {
      text-align: center;
    }
  .auto-style4 {
      text-align: center;
      font-size: x-large;
  }
  .auto-style5 {
      color: #FF0000;
  }
  .auto-style6 {
      color: #000000;
  }
  .auto-style7 {
      text-align: left;
  }
  </style>
    <title>Rating</title>
                <!-- Sterne Scripts -->
    <script src='jquery.js' type="text/javascript"></script>
    <script src='jquery.MetaData.js' type="text/javascript" language="javascript"></script>
    <script src='jquery.rating.js' type="text/javascript" language="javascript"></script>
            <!-- Popup Scripts -->
  <link rel="stylesheet" href="css/normalize.css">
  <link rel="stylesheet" href="css/foundation.css">

  <!-- If you are using the gem version, you need this only -->
  <link rel="stylesheet" href="css/app.css">

  <script src="js/vendor/modernizr.js"></script>

     <link rel="stylesheet" href="css/app.css">

  <script src="js/vendor/modernizr.js"></script>
    <link href='jquery.rating.css' type="text/css" rel="stylesheet"/>
 </head>
<body style="background-image: url('img/body-bg.jpg')">
  <?php
  $send = false;
  $error = $text = '';
  if ($_SERVER['REQUEST_METHOD'] === "POST") {
    $to       = 'kontakt@schoenholz.eu';
    $subject  = "Feedback vom ".date("d.m.Y");
    $antispam = $_POST['access'];

    $name     = $_POST['star1'];
    $select   = $_POST['Select'];
    $text     = $_POST['TextArea1'];
    $message  = "Bewertung:  ".$name. "\r\n" . "Warum die Bewertung?:  " .$text . "\r\n" . "Woher kennen Sie uns?: " .$select;

    $success = true;
    if ($antispam != 'irregeheim') {
      $success = false;    //Fehlerflag setzen
      $error  .= 'Kein Spam erwünscht!<br>'; // Fehlertext
    }

   if ($name == '') {
    $success = false;
    $error  .= '"<em>Wie bewerten Sie uns</em>" wurde nicht ausgefüllt';
  }

    if ($select == "- Bitte auswählen -") {
      $success = false;    //Fehlerflag setzen
      $error  .= '<br>"<em>Wie haben Sie uns gefunden</em>" wurde nicht ausgefüllt</br>'; // Fehlertext
    }


    // ist alles ok ? dann senden
    if($success === true) {
      if (@mail($to,$subject,$message)) {
        $send = true;
        echo 'Danke für Ihr Feedback!';
      } else {
        $error .= 'Ihr Feedback konnte leider nicht gesendet werden. Bitte versuchen sie es später erneut';
      }
    }
  }
  if ($send === false) {
  ?>
     <a href="#" height="87" data-reveal-id="firstModal" class="small round button" width="26">Feedback</a><br/> 

<div id="firstModal" class="reveal-modal small" data-reveal aria-labelledby="modalTitle" aria-hidden="true" role="dialog">
        <form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>">
      <p class="auto-style4" style="width: 477px"><strong>Feedback&nbsp;</strong></p>
      <p class="auto-style7" style="width: 477px">Bitte füllen Sie alle mit
      <span class="auto-style6">*</span> gekennzeichneten Felder aus</p>
      <label id="Label1"></label>
      <fieldset style="width: 476px"><legend>Wie bewerten Sie uns? 
      <span class="auto-style5">*</span></legend>
<input name="star1" type="radio" class="star" <?php if (isset($name) && $name=="Sehr schlecht") echo "checked";?> value="Sehr schlecht"/>
<input name="star1" type="radio" class="star" <?php if (isset($name) && $name=="Schlecht") echo "checked";?> value="Schlecht"/>
<input name="star1" type="radio" class="star" <?php if (isset($name) && $name=="Durchschnittlich") echo "checked";?> value="Durchschnittlich"/>
<input name="star1" type="radio" class="star" <?php if (isset($name) && $name=="Gut") echo "checked";?> value="Gut"/>
<input name="star1" type="radio" class="star" <?php if (isset($name) && $name=="Hervorragend") echo "checked";?> value="Hervorragend"/>      </fieldset>
      <p style="height: 36px">&nbsp;Grund Ihrer Bewertung?</p>
          <textarea class="auto-style1" name="TextArea1" style="width: 505px; height: 105px"><?php echo htmlspecialchars($text, ENT_QUOTES);?></textarea>
      <p>Wie haben Sie uns gefunden? <span class="auto-style5">*</span></p>
      <p>
        <select name="Select" style="width: 151px">
          <option <?php if($select== "- Bitte auswählen -") echo "selected"; ?>>- Bitte auswählen -</option>
          <option <?php if($select== "Familie/Freunde") echo "selected"; ?>>Familie/Freunde</option>
          <option <?php if($select== "Suchmaschinen (Google etc.)") echo "selected"; ?>>Suchmaschinen (Google etc.)</option>
          <option <?php if($select== "Zeitungen") echo "selected"; ?>>Zeitungen</option>
          <option <?php if($select== "Örtliche") echo "selected"; ?>>Örtliche</option>
          <option <?php if($select== "Werbung") echo "selected"; ?>>Werbung</option>
          <option <?php if($select== "Sonstiges") echo "selected"; ?>>Sonstiges</option>
        </select>
      </p>
      <input type="hidden" name="access" value="irregeheim">
      <p class="auto-style3" style="width: 498px">
        <input class="auto-style2" name="Submit1" type="submit" value="Senden"></p>
    </form>
              <?php
  }

  if (!empty($error)) {
    echo $error;
  }
  ?>

   <a class="close-reveal-modal" aria-label="Close">&#215;</a>
</div>
  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>
</html>

问题是如果我按下反馈按钮并错过了一个字段，页面会重新加载，我必须再次按下反馈按钮。我已经发现我必须使用ajax和Javascript来处理这个问题，但我不知道如何重写我的脚本以便它可以工作。有人可以帮我吗？

Answer 1

我使用这种方法： 1）在html上创建表单并在每个输入元素上放置一个id，然后我放一个span或者其他东西来显示错误信息，如下所示：

<input type="text" name="email" id="email">
<span id="email-message" class="hidden"></span>

2）在php脚本中，您需要创建一个数组，验证每个输入并发送json数据。我的数组看起来像这样：

$data = array(
    'message' => null,
    'form' => array(
        'has_errors' => false, // put true if there are input errors
        'email' => array(
            error => false,
            message => null
        );
    );
);

header("Content-Type: application/json");
echo json_encode($data); 
exit;

通过这种方式，您可以根据需要向$ data [＆＃39; form＆＃39;]添加输入。 $ data [＆＃39; message＆＃39;]这是一般错误，例如“现在无法保存”。再试一次＆＃39;。

3）最后，在成功方法的javascript文件上（在json请求验证表单之后），检查＆＃34; data.message＆＃34;有一般错误，如果没有，你使用a for data.form检查每个输入并显示错误信息是否有必要：

$('#my-form').on("submit", function(event){
    event.preventDefault();
    var $form = $(this);

    $.ajax({
        url: $form.attr("action"),
        type: 'POST',
        data: $form.serialize(),
        dataType: 'json',
        cache: false
    }).done(function(data) {
        if(data.message) {
            // show general error
        } else if(data.form.has_errors){//Si hay errores de formulario
            //Recorremos todos los errores
            $.each(data.form, function(key, value){
                if(value.error) {
                    $('#' + key + '-msg').html(value.message).removeClass('hidden');
                } else {
                    $('#'+key+'-msg').html('').addClass('hidden');
                }
            });         
        } else {
            // no errors on form so show info message or whatever you need
        }
    });
});

表格不应重新加载

1 个答案: