时间戳

首页 > 解决方案 > PHP - 我如何从查询字符串中取回（jquery）循环数组

javascript - PHP - 我如何从查询字符串中取回（jquery）循环数组

问题描述

嘿，我还是 PHP 新手，正在创建一个表单，在表单中我有一个从 JQuery 创建和循环的数组。所以最初表单中只有 1 个输入字段，但用户最多可以创建 5 个输入字段。如果表单失败，那么我想发回用户输入，这样他们就不必重新填写它们。但是没有任何东西被发回，并且在查询字符串中它只是发回了“kname = Array”。然后表单将其重置回 1 个输入字段，即使他们已将其扩展为 5。

这是html：

<label for="names" id="name"> Names: 
<input type="text" name="name[]" class="names" required value="<?php if 
(isset($_GET['name']) && $_GET['name'] !== '') {echo $_GET['name'];} ?>"> 
</label>
<span id="warning"></span>
<button id="morenames">ADD MORE NAMES</button>

这是我如何获取然后通过 PHP 将其发送回

得到

if (isset($_POST['name']) && $_POST['name'] !== '') {

    $vName= $_POST['name'];
    $allnames = '';

    foreach ($vName as $vNames) {
        $allnames .= $vNames. ' ';
    }

    if (filter_var($allnames , FILTER_SANITIZE_STRING) === null) {
        $vValidation++;
    } 
} else {
    $vValidation++;
}

如果验证失败，则将其发回

$querystring = "kname=$vName";
$querystring .= "&";
$querystring .= "ksurname=$vSurname";
$querystring .= "&";
$querystring .= "kvalidation=failed";

header('Location: questionaire.php?' . $querystring );
exit();

JQuery 代码（当我单击输入时，我从旁注上的堆栈溢出从其他人那里得到它，它也删除了该行是否可以删除它，以便只有当他们单击删除按钮时它才会删除？）

 $(document).ready(function() {
    var max_fields      = 5;
    var wrapper         = $("#name");
    var add_button      = $("#morenames");

    var x = 1;
    $(add_button).click(function(e){
        e.preventDefault();
        if(x < max_fields){
            x++;
            $(wrapper).append('<div><input name="name[]" class="names" required style="margin-bottom:5px;"><button id="delete">Delete</button></div>'); //add input box
        }
        else
        {
            alert('You Reached the limits')
        }
    });

    $(wrapper).on("click","#delete", function(e){
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });
});

任何帮助将不胜感激。

我在田野里放了什么

我放了什么 放什么

验证失败时会发生什么

标签： javascriptphpjqueryformsget

解决方案

您不需要将 get 参数直接放在输入上，例如：

<input type="text" name="name[]" class="names" required value="<?php if 
(isset($_GET['name']) && $_GET['name'] !== '') {echo $_GET['name'];} ?>">

但这会从 url 中获取参数，然后从 js 创建您的输入，如下所示

var max_fields = 5;
var wrapper = $("#name");
var add_button = $("#morenames");
var x = 1;

// init inputs
init();

$(add_button).click(function (e) {
    e.preventDefault();
    if (x < max_fields) {
        x++;
        $(wrapper).append('<div><input name="name[]" class="names" required style="margin-bottom:5px;"><button id="delete">Delete</button></div>'); //add input box
    } else {
        alert('You Reached the limits')
    }
});

$(wrapper).on("click", "#delete", function (e) {
    e.preventDefault();
    $(this).parent('div').remove();
    x--;
});

function getUrlVars() {
    var vars = {};
    var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
        vars[key] = value;
    });
    return vars;
}

function init() {
    var names_p = getUrlVars();
    console.log(names_p);
    Object.keys(names_p).forEach(function (key) {
        x++;
        $(wrapper).append(`<div><input name="name[]" class="names" value="${names_p[key]}" required style="margin-bottom:5px;"><button id="delete">Delete</button></div>`); //add input box

    })
}

你的 html 变成：

<label for="names" id="name"> Names: 
<input type="text" name="name[]" class="names" required value=""> 
</label>
<span id="warning"></span>
<button id="morenames">ADD MORE NAMES</button

完整代码：

<?php
if (isset($_GET['name']) && $_GET['name'] !== '') {
    $vNameas= $_GET['name'];
    foreach ($vNameas as $vName) {
        $allnames .= $vName. ' ';
    }
    $querystring = "kname=" . implode ( "_" , $vNameas );
    header('Location: ?' . $querystring );
    exit();
}
?>
<form method="get" action="">
    <label for="names" id="name"> Names:
        <input type="text" name="name[]" class="names" required value="">
    </label>
    <span id="warning"></span>
    <button id="morenames" type="button">ADD MORE NAMES</button>
    <input type="submit" value="send">
</form>
<script
src="https://code.jquery.com/jquery-3.3.1.min.js"
integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
crossorigin="anonymous"></script>
<script>
    var max_fields = 5;
    var wrapper = $("#name");
    var add_button = $("#morenames");
    var x = 1;
    // init inputs
    init();
    $(add_button).click(function (e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div><input name="name[]" class="names" required style="margin-bottom:5px;"><button id="delete">Delete</button></div>');
            //add input box
        }
        else {
            alert('You Reached the limits')
        }
    }
                       );
    $(wrapper).on("click", "#delete", function (e) {
        e.preventDefault();
        $(this).parent('div').remove();
        x--;
    }
                 );
    function getUrlVars() {
        var vars = {
        };
        var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function (m, key, value) {
            if(key === 'kname') vars[key] = value;
        }
                                                );
        return vars;
    }
    function init() {
        var names_p = getUrlVars();
        console.log(names_p);
        if( names_p['kname']) {
            names_p['kname'].split('_').forEach(function (key) {
                x++;
                $(wrapper).append(`<div><input name="name[]" class="names" value="${key}" required style="margin-bottom:5px;"><button id="delete">Delete</button></div>`);
                                  console.log(key);
            }
                                               )
        }
    }
</script>

推荐阅读