Javascript添加的表单元素无法通过$ _POST获得

Question

I am using radio buttons in a form to hide/show a member id field in a contact form. Problem is when javascript changes the hidden id field included in html which is set to a value of "None", the field is no longer available via post, even if javascript changes it back to the original when the no radio box is checked. Please help, I am new to javascript, thanks.

Relevant Form Code:

echo '<tr><td>IVAO Member:</td><td><input type="radio" name="ivao" value="yes" onchange="ivaoVID()">Yes | <input type="radio" name="ivao" value="no" onchange="ivaoVID()" checked>No</td></tr>';
echo '<tr id="ivaovid"><input type="hidden" name="vid" id="vid" value="None"></tr>';

Javascript:

function ivaoVID() {
    var selected = document.getElementsByName("ivao");
    var row = document.getElementById("ivaovid");
    for(i = 0; i <selected.length; i++) {
        if (selected[i].checked == true) {
            if (selected[i].value == "yes") {
                row.innerHTML = "<td>IVAO VID:</td><td><input type='text' name='vid' id='vid'></td>";
            } else {
                row.innerHTML ="<input type='hidden' name='vid' id='vid' value='None'>";
            }
        }
    }
}

Action php file:

public function submit(){
    $model = new contactModel;
    $name = isset($_POST['name']) ? $_POST['name']:$this->registry->getData('fname').' '.$this->registry->getData('lname');
    $vid = isset($_POST['vid']) ? $_POST['vid']:$this->registry->getData('vid');
    $email = isset($_POST['email']) ? $_POST['email']:$this->registry->getData('email');
    $message = $_POST['message'];

    echo $name . '<br> ' . $vid . '<br>' . $email . '<br>' . $message;
}

Answer 1

Overwriting the HTML like that messes up the form for some reason. No idea why exactly, but I see the same thing in both Chrome and IE.

If you go into the console and enter:

document.forms[0].vid

When you do it before changing the radio button you get a result, and when you do it after you get "undefined". The especially weird thing about it is that if you enter this in the console:

document.getElementById("vid")

You get a result in both cases.

One possible alternative would be to hide and show the "vid" text input instead of trying to overwrite it with a hidden input. To do that, you would change your PHP to write the text input version of the "ivaovid" row, then change your JavaScript to this:

function ivaoVID() {
    var selected = document.getElementsByName("ivao");
    var row = document.getElementById("ivaovid");
    var vid = document.getElementById("vid");
    for(i = 0; i <selected.length; i++) {
        if (selected[i].checked == true) {
            if (selected[i].value == "yes") {
                row.style.display = "";
                vid.value = "";
            } else {
                row.style.display = "none";
                vid.value = "None";
            }
        }
    }
}

Another option would be to hide and show the text input without modifying the value and ignore the value in your PHP post handler depending on the value of $_POST['ivao'] .