Question

我很好奇我如何通过一种方式来检测用户从表单选项中选择的内容。根据它们的选择，将改变输入字段文本的处理方式。

期望效果：

选项 A ：接受文字，因此立即处理，

选项 B ：在继续表单处理之前接受要验证的电子邮件。

选项 C ：接受电子邮件，以便在继续表单处理之前验证其电子邮件。

最后，所有三个选项都附加到文本文件中。到目前为止，我只能用它来验证电子邮件。

提前致谢。

HTML表单：

<form method="post" class="subscription-form form-inline" id="subscribe" role="form">

 <h4 class="subscription-success"><i class="icon_check"></i> Thank you for requesting... </h4>
 <h4 class="subscription-error">Something Wrong!</h4>

 <select id="iam" name="usertype" class="form-control input-box">
 <option data-placeholder = "Enter A username" selected value="A">Enter  A account username</option>
 <option data-placeholder = "enter B email" value="B"> Enter B email </option>
 <option data-placeholder = "enter C email" value="C"> Enter C email </option>
 </select>

 <input type="email" name="email" id="subscriber-email" placeholder="Your Email" class="form-control input-box">

 <button type="submit" name="submit" id="subscribe-button" class="btn btn-default standard-button">Submit</button>

</form>

JS - 到目前为止只检测选择和更改占位符文本：

$('#iam').on('change', function() {
var placeholder = $(this).find(':selected').data('placeholder');
    $('#subscriber-email').attr('placeholder', placeholder); 
});

PHP - 到目前为止只验证电子邮件并将结果附加到文件：

<?php
 // Note: filter_var() requires PHP >= 5.2.0
 if ( isset($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) ) {

$selected_val = $_POST['usertype'];  // Storing Selected Value In Variable

$e_mail = $_POST['email'] . " - is a - " . $selected_val . " ," . "\n";
file_put_contents('email-list.txt', $e_mail, FILE_APPEND | LOCK_EX);

}
?>

Answer 1

如果你想在php中验证它，你需要做的就是将选项值设置为你要验证的类型而不是x，y并相应地处理它。如果您需要这些值（x和y），您可以将值设置为x，email和y等格式;电子邮件，在php中拆分并获取原始值和验证器方法。

如果您希望在javascript中这样做，它会变得有点棘手。这应该有助于您开始根据所选选项设置类型。正确的名称和ID由您自己决定。

<html>
    <head>
        <Script>
            function createInputField(e){
                var tS = (e || document.getElementById('inputFieldSelector')); //The type list
                var tC = document.getElementById('inputFieldContainer'); //The field container we append our input to

                if (tS && tC){
                    while (tC.firstChild) tC.removeChild(tC.firstChild); //Empty the container

                    var tO = tS.options[tS.selectedIndex]; //Selected option
                    var tE = document.createElement('input'); //The dynamic input field
                    tE.id = 'inputField';
                    tE.type = (tO.getAttribute('data-type') || 'text');
                    tE.placeholder = tO.getAttribute('data-placeholder');
                    tC.appendChild(tE);
                }
            }

            function validateInputField(){
                var tE = document.getElementById('inputField');
                if (tE){
                    if (tE.type == 'number' && (tE.value.trim() === '' || isNaN(tE.value))){
                        alert('This is no number..');
                        return false;
                    }
                    else if (tE.type == 'email' && tE.value.indexOf('@') === -1){
                        alert('What email is that?');
                        return false;
                    }
                }

                return true
            }
        </Script>
    </head>

    <body onload = 'createInputField()'>
        <form onsubmit = 'return validateInputField()'>
            <select id = 'inputFieldSelector' onchange = 'createInputField(this)'>
                <option data-placeholder = 'Enter Text' data-type = 'text' value = 'Influencer'>Today I want text</option>
                <option data-placeholder = 'Enter EMail' data-type = 'email' value = 'B'>I feel like entering an email</option>
                <option data-placeholder = 'Enter Number' data-type = 'number' value = 'C'>How about a number?</option>
            </select>

            <div id = 'inputFieldContainer'>
                <!--In here we are going to create the input field according to the selection.-->
            </div>

            <button type = 'submit'>Submit</button>
        </form>
    </body>
</html>

Answer 2

由于我对JS和PHP的新手理解很少，我创建了3个输入字段 - 名称/用户名/电子邮件。对于类型A，需要提交名称和用户名组合。适用于B型和B型C我需要提交名称和电子邮件组合。因此，当从选项和提交的可见字段中选择类型A时，我会隐藏电子邮件字段。当选择类型B或C时，我隐藏了用户名字段，并保持名称和电子邮件字段可见并提交其内容。

通过HTML Selector更改输入验证类型

2 个答案: