簡體   English   中英

PHP聯系人表單中的多個字段

[英]Multiple fields in PHP contact form

我正在創建一個表單,該表單會根據需要動態添加其他字段。

如何在聯系表格PHP中注冊這些動態字段?

另外,為什么刪除按鈕會導致Bootstrap核心jQuery錯誤?


表格:

<form action="%3C?php%20bloginfo('template_url');%20?%3E/contactengine.php" class="form-horizontal cd-form" method="post">
    <div class="col-md-12">
        <h3>Ditt navn og adresse</h3>
    </div>
    <div class="col-md-12 medlem-form">
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputEmail3">Fornavn*</label>
            <div class="col-sm-12">
                <input class="form-control" id="Fornavn" name="Fornavn" placeholder="Fornavn" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputPassword3">Etternavn*</label>
            <div class="col-sm-12">
                <input class="form-control" id="Etternavn" name="Etternavn" placeholder="Etternavn" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputEmail3">Fødselsdato*</label>
            <div class="col-sm-12">
                <input class="form-control" id="Fodselsdato" name="Fodselsdato" placeholder="Fødselsdato" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputPassword3">Adresse*</label>
            <div class="col-sm-12">
                <input class="form-control" id="Adresse" name="Adresse" placeholder="Adresse" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputPassword3">Post nummer*</label>
            <div class="col-sm-12">
                <input class="form-control" id="Postnummer" name="Postnummer" placeholder="Post nummer" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputPassword3">Post sted*</label>
            <div class="col-sm-12">
                <input class="form-control" id="Poststed" name="Poststed" placeholder="Post sted" type="text">
            </div>
        </div>
    </div><!-- end form -->
    <div class="col-md-12">
        <h3>e-post og telefon nummer</h3>
    </div>
    <div class="col-md-12 medlem-form">
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputEmail3">Navn foresatt</label>
            <div class="col-sm-12">
                <input class="form-control" id="Navnforesatt" name="Navnforesatt" placeholder="Nanv Foresatt" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputPassword3">E-post *</label>
            <div class="col-sm-12">
                <input class="form-control" id="Epost" name="Epost" placeholder="E-Post" type="text">
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-12 control-label" for="inputEmail3">Mobil nummer</label>
            <div class="col-sm-12">
                <input class="form-control" id="Mobilnummer" name="Mobilnummer" placeholder="Mobil nummer" type="text">
            </div>
        </div>
    </div><!-- end form -->
    <div class="col-md-12">
        <h3>Velg en medlemskapstype</h3>
    </div>
    <div class="col-md-12 medlem-form">
        <div class="radio">
            <label class="radio-inline"><input id="inlineRadio1" name="inlineRadioOptions" type="radio" value="option1"> Støttemedlem (kr 300,-)</label> <label class="radio-inline"><input id="inlineRadio2" name="inlineRadioOptions" type="radio" value="option2"> Enkelt medlem (kr 1.500,-)</label> <label class="radio-inline"><input name="multi_note" onclick="showMe('div1', this)" type="checkbox" value="1"> Familemedlem (kr 2.500,-)</label>
        </div><!-- third level ends here -->
        <!-- Hidden form starts here -->
        <div id="div1" style="display:none">
            <hr>
            <div class="clonedInput" id="input1" style="margin-bottom:4px;">
                <div class="form-group">
                    <label class="col-sm-12 col-xs-12 control-label" for="inputEmail3">Fornavn*</label>
                    <div class="col-sm-12">
                        <input class="form-control" id="inputEmail3" placeholder="Email" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-12 col-xs-12 control-label" for="inputPassword3">Etternavn*</label>
                    <div class="col-sm-12">
                        <input class="form-control" id="inputPassword3" placeholder="Password" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-12 col-xs-12 control-label" for="inputEmail3">Fødselsdato*</label>
                    <div class="col-sm-12">
                        <input class="form-control" id="inputEmail3" placeholder="Email" type="text">
                    </div>
                </div>
                <hr>
            </div>
            <div id="send-BTN">
                <input id="btnAdd" type="button" value="+ Legg en til"> <!--<input type="button" id="btnDel" value="remove name" />-->
                <input id="fieldnumber" type="hidden" value="1">
            </div>
        </div><!-- end Hidden form -->
    </div><!-- end form -->
    <div class="col-md-12 bottom-hack">
        <input type="submit" value="Send Message">
    </div>
</form>

這是PHP

<?php
$EmailFrom = "nett@martin.no";
$EmailTo = "martin@martin.no";
$Subject = "Ny Medlem";
$Fornavn = Trim(stripslashes($_POST['Fornavn']));
$Etternavn = Trim(stripslashes($_POST['Etternavn']));
$Fodselsdato = Trim(stripslashes($_POST['Fodselsdato']));
$Adresse = Trim(stripslashes($_POST['Adresse']));
$Postnummer = Trim(stripslashes($_POST['Post nummer']));
$Poststed = Trim(stripslashes($_POST['Post sted']));
$Navnforesatt = Trim(stripslashes($_POST['Navn Foresatt']));
$Epost = Trim(stripslashes($_POST['E-post']));
$Mobilnummer = Trim(stripslashes($_POST['Mobil nummer']));
$Medlemskaptype = Trim(stripslashes($_POST['Medlemskapstype']));
$FamilieMedlemFornavn = Trim(stripslashes($_POST['Familie Medlem Fornavn']));
$FamilieMedlemEtternavn = Trim(stripslashes($_POST['Familie Medlem Etternavn']));
$FamilieMedlemFodselsdato = Trim(stripslashes($_POST['Familie Medlem Fødselsdato']));

// validation
$validationOK = true;
if (!$validationOK) {
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
    exit;
}

// prepare email body text
$Body = "";
$Body .= "Fornavn: ";
$Body .= $Fornavn;
$Body .= "\n";
$Body .= "Etternavn: ";
$Body .= $Etternavn;
$Body .= "\n";
$Body .= "Fodselsdato: ";
$Body .= $Fodselsdato;
$Body .= "\n";
$Body .= "Adresse: ";
$Body .= $Adresse;
$Body .= "\n";
$Body .= "Post nummer: ";
$Body .= $Postnummer;
$Body .= "\n";
$Body .= "Post sted: ";
$Body .= $Poststed;
$Body .= "\n";
$Body .= "Navn Foresatt: ";
$Body .= $Navnforesatt;
$Body .= "\n";
$Body .= "E-post: ";
$Body .= $Epost;
$Body .= "\n";
$Body .= "Mobil nummer: ";
$Body .= $Mobilnummer;
$Body .= "\n";
$Body .= "Medlemskapstype: ";
$Body .= $Medlemskaptype;
$Body .= "\n";
$Body .= "Familie Medlem Fornavn: ";
$Body .= $FamilieMedlemFornavn;
$Body .= "\n";
$Body .= "Familie Medlem Etternavn: ";
$Body .= $FamilieMedlemEtternavn;
$Body .= "\n";
$Body .= "Familie Medlem Fødselsdato: ";
$Body .= $FamilieMedlemFodselsdato;
$Body .= "\n";

// send email 
$success = mail($EmailTo, $Subject, $Body, "From: <$EmailFrom>");

// redirect to success page 
if ($success) {
    print "<meta http-equiv=\"refresh\" content=\"0;URL=contactthanks.php\">";
} else {
    print "<meta http-equiv=\"refresh\" content=\"0;URL=error.htm\">";
}
?>

JavaScript:

<script type="text/javascript">
    $(document).ready(function () {
        $('#btnAdd').click(function () {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            var newNum = new Number(num + 1);      // the numeric ID of the new input field being added

            // create the new element via clone(), and manipulate it's ID using newNum value
            var newElem = $('#input' + num).clone().attr('id', 'input' + newNum);

            // manipulate the name/id values of the input inside the new element
            newElem.children(':first').attr('id', 'name' + newNum).attr('name', 'name' + newNum);

            // insert the new element after the last "duplicatable" input field
            $('#input' + num).after(newElem);

            // enable the "remove" button
            $('#btnDel').attr('disabled', '');
            $('#fieldnumber').val(num + 1);

            // business rule: you can only add 5 names
            if (newNum == -1)
                $('#btnAdd').attr('disabled', 'disabled');
        });

        $('#btnDel').click(function () {
            var num = $('.clonedInput').length; // how many "duplicatable" input fields we currently have
            $('#input' + num).remove();     // remove the last element

            // enable the "add" button
            $('#btnAdd').attr('disabled', '');

            //Take one from value of hidden field
            $('#fieldnumber').val(num - 1);

            // if only one element remains, disable the "remove" button
            if (num - 1 == 1)
                $('#btnDel').attr('disabled', 'disabled');
        });

        $('#btnDel').attr('disabled', 'disabled');
    });
</script>

您將在$_POST變量中包含新字段,並且可以使用$_POST['child4']訪問每個字段(不要像以前那樣僅將輸入名稱數字制成)。 您現在可能會想到這樣的循環

foreach($_POST as $key => $value) {
    if (strpos($key, 'child') === 0) {
        // value starts with book_
    }
}

您可以在jquery ajax中執行此操作,其想法是:

  1. 在jQuery中將變量初始化為0。
  2. 在每次添加Textarea增量變量之后。
  3. 最后,您只需瀏覽文本區域,然后通過ajax Requette將數據插入數據庫,即可獲得許多字段

暫無
暫無

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

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