javascript - PHP 联系表单中的多个字段

标签 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>

最佳答案

您的 $_POST 变量中将包含新字段,并且您可以使用 $_POST['child4'] 访问每个字段(不要让您的仅像您一样输入名称数字)。你现在可能会想出一个像这样的循环

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

关于javascript - PHP 联系表单中的多个字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36712856/

相关文章:

javascript - 为每个项目变量添加 +x

c# - WebBrowser 控件 - 使用 JavaScript 按钮调用脚本问题

javascript - 库与纯 Javascript

javascript - 如何获取在 Node 中调用函数的文件名和行号?

java - 使用java客户端在laravel中验证私有(private) channel 的问题

php - cakephp2.1 中的数据获取问题

javascript - 单击鼠标更改 SVG 字体大小

php - 将 php json 对象保存到 jquery 变量中

javascript - 提交前更改字段值

javascript - 如何使用键盘箭头键移动 Bootstrap 模式弹出窗口