簡體   English   中英

PHP復選框表單-顯示值

[英]PHP checkbox form - displaying values

我的聯系表單中有一個復選框,但似乎無法顯示通過php發送的電子郵件中的值。 我知道這可能是一個isset問題,但我不能修復它顯示用戶是否點擊復選框與否。

形成:

<script>
function _(id){ return document.getElementById(id); }
function submitForm(){
    _("mybtn").disabled = true;
    _("status").innerHTML = 'please wait ...';
    var formdata = new FormData();
    formdata.append( "n", _("n").value );
    formdata.append( "b", _("b").value );
    formdata.append( "c", _("c").value );
    formdata.append( "n", _("n").value );
    formdata.append( "s", _("s").value );
    formdata.append( "d", _("d").value );
    formdata.append( "p", _("p").value );
    formdata.append( "checkbox1", _("checkbox1").value );
    formdata.append( "checkbox2", _("checkbox2").value );
    formdata.append( "checkbox3", _("checkbox3").value );
    var ajax = new XMLHttpRequest();
    ajax.open( "POST", "example_parser.php" );
    ajax.onreadystatechange = function() {
        if(ajax.readyState == 4 && ajax.status == 200) {
            if(ajax.responseText == "success"){
                _("my_form").innerHTML = '<h2>Thanks '+_("n").value+', your message has been sent.</h2>';
            } else {
                _("status").innerHTML = ajax.responseText;
                _("mybtn").disabled = false;
            }
        }
    }
    ajax.send( formdata );
}
</script>
</head>
<body>
<form id="my_form" onsubmit="submitForm(); return false;">
  <p><input id="n" placeholder="First name" required></p>
  <p><input id="b" placeholder="Last name" required></p>
  <p><input id="c" placeholder="C Number"></p>
  <p><input id="n" placeholder="N Number"</p>
    <p><input id="d" placeholder="Date of birth"></p>
    <p><input id="p" placeholder="Postcode"></p>
    <label for="sex">I am </label>
    <select id="s" name="s">
      <option value="female">Female</option>
      <option value="male">Male</option>
      <option value="other">Other</option>
    </select>
    <label>
        <p>
        <br>
                <input type="checkbox" name="checkbox1" value="1" id="checkbox1"> 
              data1</label>
      <br>
      <label>
        <input type="checkbox" name="checkbox2" value="1" id="checkbox2">
        data2</label>
      <br>
      <label>
       <input type="checkbox" name="checkbox3" value="1" id="checkbox3">
        data3</label></p>
      <br>
  <p><input id="mybtn" type="submit" value="Submit Form"> <span id="status"></span></p>
</form>

example_parser.php:

<?php
if( isset($_POST['n']) && isset($_POST['b']) && isset($_POST['c']) && isset($_POST['n']) && isset($_POST['s']) || isset($_POST['d']) || isset($_POST['p']) && isset($_POST['checkbox1']) || isset($_POST['checkbox2']) || isset($_POST['checkbox3']) ){
    $n = $_POST['n']; // HINT: use preg_replace() to filter the data
    $b = $_POST['b'];
    $c = $_POST['c'];
    $n = $_POST['n'];
    $s = $_POST['s'];
    $s = $_POST['d'];
    $s = $_POST['p'];
    $z = $_POST['checkbox1'];
    $y = $_POST['checkbox2'];
    $x = $_POST['checkbox3'];
    $to = "";   
    $from = "";
    $subject = 'Please help';
    $message = '<b>First Name:</b> '.$n.' <b>Last Name</b> '.$b.' <b>C Number</b> '.$c.' <b>N Number</b> '.$n.' <b>Date of Birth</d> '.$d.' <b>Postcode</b> '.$p.' <b>Sex</b> '.$s.' <b>Option1</b> '.$z.' <b>Option2</b> '.$y.' <b>Option3</b> '.$x.' <br><b>End of message, thank you</b> '.$n.' <p>'.$b.'</p>';
    $headers = "From: $from\n";
    $headers .= "MIME-Version: 1.0\n";
    $headers .= "Content-type: text/html; charset=iso-8859-1\n";
    if( mail($to, $subject, $message, $headers) ){
        echo "success";
    } else {
        echo "The server failed to send the message. Please try again later.";
    }
}
?>

我記得未選中的復選框未與POST發送。 在您的PHP腳本更改

$z = $_POST['checkbox1'];

$z = $_POST['checkbox1'] ? : 'not_checked_value';

另外:您為該變量分配了不同的發布值(請參見$s )-您正在丟失一些發布數據。

附加2:將name屬性添加到html輸入中-表單中的所有數據都分配給它們的名稱。

另外3:優良作法是按照變量的名稱命名,例如$sex$gender$s更好地命名-這樣您很快就會迷路。

即使您的所有復選框都未選中,它們也都顯示為選中狀態的原因是,您正在手動添加所有輸入,無論是否選中它們。 沒有理由將每個輸入單獨添加到FormData 而是,添加整個表單。 您只需要內聯命名表單輸入。

更換

var formdata = new FormData();
formdata.append( "n", _("n").value );
formdata.append( "b", _("b").value );
formdata.append( "c", _("c").value );
formdata.append( "n", _("n").value );
formdata.append( "s", _("s").value );
formdata.append( "d", _("d").value );
formdata.append( "p", _("p").value );
formdata.append( "checkbox1", _("checkbox1").value );
formdata.append( "checkbox2", _("checkbox2").value );
formdata.append( "checkbox3", _("checkbox3").value );

var formdata = new FormData(document.getElementById('my_form'));

並更新您的輸入以具有name屬性

<input id="n" name="n" placeholder="First name" required>

擁有更明智的名稱是明智的,但是我將由您決定是否要更改它。

我還建議您學習類似jQuery(或Angular,隨便什么)的框架。 他們讓使用AJAX輕松了許多

此外,我建議您清理isset()邏輯,並在要檢查的組周圍添加一些括號。 我無法從您擁有的東西中得知您真正要去的地方,所以我無法為您做到。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM