将一个输入的值克隆到具有相同名称的另一个输入的表单问题

Question

我的表单中有两个同名的输入（我使用 css 根据屏幕大小显示一个或另一个），但是在表单提交时，只获取最后一个的值，这对我来说是个问题因为如果我display:none 它可以是空的。我想出了一个技巧，包括将不为空的输入值克隆到另一个，这样当我将我的 POST 变量发送到 PHP 时，任何人都可以返回输入的值。

这是我的 HTML 代码：

    <form id="form" class="form" name="postuler" method="post" action="receive-post.php" enctype="multipart/form-data" novalidate>
    <div class="not-hidden">
           <label for="mail">Email address <span class="required">*</span></label>
               <input type="email" class="email" placeholder="ex: jdoe@exelcia-it.com" name="email" id="email" maxlength="40" />
    </div>

    <div class="hidden-fields">
           <label for="mail">Email address <span class="required">*</span></label>
               <input type="email" class="email" placeholder="ex: jdoe@exelcia-it.com" name="email" id="email" maxlength="40"/>
    </div>
                    <input type="submit" name="upload" id="send" value="Submit" class="postu"/>
</form>

这是我的 jQuery 代码：

$(document).ready(function(){
    $('#envoyez').on('click', function () {
        if($.trim($('.hidden-fields #email').val())==0){
            $('.hidden-fields #email').val()==$.trim($('.not-hidden #email').val())
        } else if ($.trim($('.not-hidden #email').val())==0){
            $('.not-hidden #email').val()==$.trim($('.hidden-fields #email').val())
        }
    })
})

这是我的 php 代码：

if(!empty($_POST['email'])){
    var_dump($_POST['email']);
} else {
    echo "Theres a problem somewhere" ;
}

我遇到的问题是，如果我填写 not-hidden 字段，在 php 端我会得到一个空字符串，因为它总是检索隐藏字段值。

Answer 1

你好，你可以这样试试

       <input type="email" class="email" placeholder="ex: jdoe@exelcia-it.com" name="email[]" id="email" maxlength="40" />
       <input type="email" class="email" placeholder="ex: jdoe@exelcia-it.com" name="email[]" id="email" maxlength="40"/>

然后你可以循环进入php脚本来检查数组是否为空并获取填充的key。

更新

这是检查数组并获取填充键的方法

if (isset($_POST['email'])) {

    $emails = $_POST['email'];

    foreach ($emails as $key => $email) {

        if (!is_null($email)) {

            echo $email;
            break;
        }
    }
}

这是基本检查，您可以将电子邮件保存在变量中或执行其他检查，但这是获取值的基本方法

Answer 2

您的 jQuery 代码中有几处错误，例如：

• 修剪输入文本字段的值后，您直接将其与0 进行比较，这是错误的。相反，您应该将它的 length 与 0 进行比较。
• $('... #email').val()==$.trim($...)、== 用于比较，= 用于赋值。

所以你的 jQuery 代码应该是这样的：

$(document).ready(function(){
    $('#envoyez').on('click', function () {
        if($.trim($('.hidden-fields #email').val()).length == 0){
            $('.hidden-fields #email').val($.trim($('.not-hidden #email').val()));
        } else if ($.trim($('.not-hidden #email').val()).length == 0){
            $('.not-hidden #email').val($.trim($('.hidden-fields #email').val()));
        }
    })
});

使用上面的 sn-p，填写哪个输入文本字段都没有关系，另一个字段也会自动更新为相同的值。一旦您点击提交按钮，您将只收到一个带有 POST 请求的电子邮件 ID。

另一种方法是在您的两个电子邮件输入字段中使用 name 属性作为 name='email[]'。此处无需使用任何 jQuery。

<input type="email" class="email" placeholder="ex: jdoe@exelcia-it.com" name="email[]" id="email" maxlength="40" />   
<input type="email" class="email" placeholder="ex: jdoe@exelcia-it.com" name="email[]" id="email" maxlength="40"/>

这样，您可以通过以下方式访问提交的电子邮件ID（无论哪个输入文本字段被填写），

if(isset($_POST['email'])){
    $email = array_values(array_filter($_POST['email']));
    if(count($email))
        echo $email[0];
    else
        echo "Theres a problem somewhere";
}