當用戶單擊按鈕時顯示表單並將其添加到div

Question

如標題所示，

當用戶單擊按鈕時，我想在div標簽中顯示一個表單。

的HTML

<div id="newaccount_form">
    <!--add form here-->
</div>

的PHP

echo "<form>";
   echo "<input type='submit' value='New Account' name='newaccount' onclick='newAccount(this)'/>";
echo "</form>";

JS / AJAX

function newAccount(obj){

    alert("test");

    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp = new XMLHttpRequest();
    } else {
        // code for IE6, IE5
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange = function() {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            document.getElementById("newaccount_form").innerHTML = xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","newaccount.php", true);
    xmlhttp.send();

現在，當單擊“新帳戶”按鈕時，我希望newaccount.php上的表單顯示在newaccount_form div中。

newaccount.php

if (isset($_POST['submit'])) {
// Grab the profile data from the POST
$accountname = mysqli_real_escape_string($dbc, trim($_POST['accountname']));

if (!empty($accountname)) {
  // Make sure that this account name doesnt already exist
  $query = "SELECT * FROM account WHERE account_name = '$accountname'";
  $data = mysqli_query($dbc, $query);
  if (mysqli_num_rows($data) == 0) {
    // The account name is unique, so insert the data into the database
    $query = "INSERT INTO account (account_name) VALUES ('$accountname')";
    mysqli_query($dbc, $query);

    // Confirm success with the user
    echo '<p>You have succesfully created a new account. Please go back to the<a href="login.php">admin panel</a>.</p>';

  }
  else {
    //Account already exists with the name
    echo '<p class="error">An account already exists with this name, Please try another account name.</p>';
    $accountname = "";
  }
 }
 else {
  echo '<p class="error">Please enter in all fields.</p>';
 }
}

echo "<p>test</p>";
?>

<form method="post" action="newaccount.php">
    <fieldset>
        <legend>New Account</legend>
        <ul>
            <li>
                <label for="accountname">Account name: </label>
                <input id="accountname" type="text" name="accountname"/>
            </li>
        </ul>
    <input type="submit" value="Create" name="submit"/>
    <input type="button" value="Cancel" name="cancel"/>
    </fieldset>
</form>

Answer 1

使用jQuery，您可以做類似的事情

$('#newaccount_form').hide();

$('#buttonName').click(function(){
    $('#newaccount_form').toggle();
});

加載時隱藏newaccount_form div