PHP联系表单中的多个字段

时间:2016-04-19 08:32:34

标签: javascript php jquery form-fields

我正在创建一个表单,根据需要动态添加其他字段。

如何在我的联系表单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>

2 个答案:

答案 0 :(得分:1)

您的$_POST变量中有新字段,您可以使用$_POST['child4']访问每个字段(不要像以前那样输入您的输入名称数字)。你现在可以想出一个像这样的循环

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

答案 1 :(得分:0)

你可以在jquery ajax中做到,这个想法是这样的:

  1. 在jquery中将变量初始化为0。
  2. 每次添加Textarea增量变量后
  3. 最后你有多个字段只需浏览textarea并通过ajax Requette将数据插入数据库