我很好奇我如何能够拼凑出一种方法来检测用户从表单的选项选择中选择了什么。根据他们的选择将改变输入字段文本的处理方式。
预期效果:
选项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);
}
?>
如果你想在php中验证它，你所需要做的就是将选项值设置为你想要验证的类型，而不是x, y，并相应地处理它。如果您需要这些值(x和y)，您可以将值设置为类似x;email和y;email的格式，在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>
对JS和PHP I的一点点新手理解，我创建了3个输入字段-名称/用户名/电子邮件。对于类型A，需要一个名称和用户名组合来提交。对于B型&我需要一个姓名和电子邮件组合来提交。因此，当从选项中选择类型A并提交可见字段时，我隐藏了电子邮件字段。当选择Type B或C时，我隐藏了Username字段，保持Name和Email字段可见，并提交了它们的内容。