每個打印PHP變量在不同領域中的HTML

我使用PHP和AJAX驗證HTML表單。每個打印PHP變量在不同領域中的HTML

目前，當我提交表單，JS打印我的PHP變量中的HTML作爲一個字符串，但我想將它們打印在不同的地方，對於我已經準備了下面的每個表單字段span標籤。例如，我希望在下面的名稱字段中打印$ nameErr，在下面的數字字段中輸入$ numberErr ...等等。

爲此，我的邏輯說我需要首先將所有錯誤變量保存在一個數組中，然後調用它與Ajax，但我不知道如何做到這一點。

我想用純JS。

submitBtn.addEventListener('click', function(){ 
    myForm.onsubmit = function(event){ 
    event.preventDefault(); 
    } 
    var phpRequest = new XMLHttpRequest(); 
    phpRequest.open('POST', 'form.php'); 
    phpRequest.onload = function(){   
    phpMessage.insertAdjacentHTML('beforeend', phpRequest.responseText); 
    } 
    phpRequest.send(); 
});

PHP

$nameErr = $numberErr = ''; 
$fieldsErr = array($numberErr, $numberErr); 

if($_SERVER['REQUEST_METHOD'] == 'POST'){ 
    if(empty($_POST['name'])){ 
    echo $nameErr = 'Name is required'; 
    }else{ 
    $name = test_input($_POST['name']); 
    } 
    if(empty($_POST['number'])){ 
    echo $numberErr = 'Number is required'; 
    }else{ 
    $number = test_input($_POST['number']); 
    }  
}

HTML

<form method="post"> 
    <label> 
    <input type="text" name="name" placeholder="Your name*"> 
    <span class="status-field-message"></span> 
    </label> 
    <label> 
    <input type="text" name="number" placeholder="Your phone number*"> 
    <span class="status-field-message"></span> 
    </label>  
</form>

來源

2017-07-24 GhostOrder

輸出變量作爲JSON在PHP與json_encode。例如在PHP：

$errors = []; 

if(empty($_POST['some])) { 
    $errors['some'] = 'empty'; 
} 

echo json_encode($errors);

，可以以純JS處理此數據：

var xmlhttp = new XMLHttpRequest(); 
var url = "http://someurl.net/page.php?param=123"; 

xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     var myArr = JSON.parse(this.responseText); 
     myFunction(myArr); 
    } 
}; 
xmlhttp.open("POST", url, true); 
xmlhttp.send(); 

function myFunction(arr) { 
    var out = ""; 
    var i; 
    for(i = 0; i < arr.length; i++) { 
     out += arr[i].some; 
    } 
    document.getElementById("id01").innerHTML = out; 
}

來源

2017-07-24 15:57:04 zen

謝謝你的回答，但如何將這些代碼看起來純JS？我忘了提及我只想用js。 – GhostOrder

更新了js代碼 – zen

submitBtn.addEventListener('click', function(){ 
    myForm.onsubmit = function(event){ 
    event.preventDefault(); 
    } 

    var phpRequest = new XMLHttpRequest(); 

    phpRequest.open('POST', 'form.php'); 
    phpRequest.onload = function(){   
     phpMessage.insertAdjacentHTML('beforeend', phpRequest.responseText); 
    } 
    phpRequest.send(); 

    response = JSON.parse(phpRequest.responseText); 

    document.getElementById('/name error div id/').innerHTML = response.nameError 
    document.getElementById('/number error div id/').innerHTML = response.numberError 
});

這假定JSON響應具有限定nameError和numberError作爲鍵 - 值對的數組。

來源

2017-07-24 19:43:31 Luke

每個打印PHP變量在不同領域中的HTML

回答

相關問題