PHP-如何从查询字符串取回(jquery)循环数组

时间:2018-12-12 10:02:06

标签: javascript php jquery forms get

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

这是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代码(当我单击Enter时,我从其他人的堆栈溢出堆栈中获取了此代码,它也删除了该行,是否有可能删除此行,以便仅当他们单击删除按钮时才删除该行?)

 $(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--;
    });
});

任何帮助将不胜感激。

what i put in the field

我放入了什么 什么被扑灭

What happens when validation failed

1 个答案:

答案 0 :(得分:0)

您不需要像这样直接将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>