Re-get <form>-element values after JavaScript .innerHTML change_问答_开发者

Re-get <form>-element values after JavaScript .innerHTML change

开发者 https://www.devze.com 2023-02-11 02:18 出处：网络

I have a form that has several text input fields and a drop down list. The contents of the drop down list is generated by a php script to match a database structure. What I\'m trying to do is to let u

I have a form that has several text input fields and a drop down list. The contents of the drop down list is generated by a php script to match a database structure. What I'm trying to do is to let user choose an option from the drop down list and then according to the choice update the form view by loading some text from a database and then put it in for the user to edit (AJAX style that is). I generate the whole form again with php to add the queried content to the view.

Here is the problem: now when user has made changes to the text contents of the input fields he presses a "Commit changes"-button. Now I'd have to get the changed content of the text fields to update the row in the database. I don't know how to properly do it.

I'm trying to use the POST-method of the form to deliver the changed content to the php-scri开发者_StackOverflow社区pt, but it fails to get any content because the AJAX-style didn't really change the HTML of the page.

Here is a short reproduction of how I'm trying to achieve this:

The page head:

<head>
<script>
function updateForm(str) {
    if (window.XMLHttpRequest) {
        xmlhttp=new XMLHttpRequest();
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                document.getElementById("divContainingForm").innerHTML=xmlhttp.responseText;
            }
    }

    xmlhttp.open("POST","/scripts/regenerateTheForm.php",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("id=" + str);
}
</script>
</head>

The page body:

<form action="/scripts/changeTheOldOne.php" method="post">
    <div id="form">
        <fieldset>
            <label for='list'>Content to edit</label>
            <select id='list' name="list" onchange='updateForm(this.value)' autofocus>
            <?php echo(generateListOptions()); ?> //php-function
            </select>
            </fieldset>
            <fieldset>
                <label for="header">Header</label>
                <input required type="text" id="header" />
            </fieldset>
            <fieldset>
                <label for="body">Plain text</label>
                <textarea required id="body" rows="16" maxlength="1500"></textarea>
            </fieldset>
        </fieldset>
    </div>
</form>

Function from the regenerateTheFrom.php returns the generated form which now has the text in the fields and the JavaScript writes it in the page and updates the user view. User can now see the retrieved content and edit it but when the form is submitted the changeTheOldOne.php can't get the AJAX updated and user edited values of the form from the $_POST array.

Problem Solved!

It was just a noob thing. Had forgotten name labels from the input fields and that's why PHP POST couldn't get any info. I thought that the id would be enough for php but it wasn't!