PHP - как мне получить (jquery) зацикленный массив из строки запроса

Question

Эй, я все еще новичок в 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--;
    });
});

Любая помощь будет принята с благодарностью.

что я положил в поле

что я положил в то, что выдается

Что происходит, когда проверка не удалась

Answer 1

Вам не нужно помещать параметры 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>