頁面加載時如何附加動態輸入字段？

Question

我已經嘗試過這個策略->

<script type="text/javascript">
$(document).ready(function(){
    var countPos=0;
    var add_button=$('#add_position');
    var wrapper=$('#position_fields');
    window.console && console.log('Document ready called');
   //When the user clicks on the add button then It inserts these input fields
    $(add_button).click(function(event){
        // http://api.jquery.com/event.preventdefault/
        event.preventDefault();
        if ( countPos >=9 ) {
            alert("Maximum of nine position entries exceeded");
            return;
        }
        countPos++;
        window.console && console.log("Adding position "+countPos);
        $(wrapper).append(
            '<div id="position'+countPos+'"> \
        <p>Year: <input type="text" name="year'+countPos+'" value="" /> \
        <input type="button" value="-" \
            onclick="$(\'#position'+countPos+'\').remove();return false;"></p> \
        <textarea name="desc'+countPos+'" rows="8" cols="80"></textarea>\
        </div>');
    });

});

這是我的 html 段->

<div class="container">
<h1>Ashiful Islam Prince's Resume Registry</h1>


<h1>Editing Profile for UMSI</h1>
<?php
if(isset($_SESSION['profile_error'])) {
$error = $_SESSION['profile_error'];
 unset($_SESSION["profile_error"]);


 echo '<span class="text-danger">';


   echo $error;


   echo '</span>';
}
?>
<form method="post">
<p>First Name:
    <input type="text" name="first_name" value="<?php
    echo $firstName;
    ?>"
      ></p><br>

<p>Last Name:
    <input type="text" name="last_name" value="<?php
    echo $lastName;
    ?>"</p>

<p>Email:
    <input type="text" name="email" value="<?php
    echo $Email;
    ?>"</p><br>
<span class="text-danger">
    <?php
    if(isset($email_sign_error))
        echo $email_sign_error;

    ?>
</span>


<p>Headline:<br/>
    <input type="text" name="headline" value="<?php
    echo $Headline;
    ?>"</p>


<p>Summary:<br/>
    <textarea name="summary" rows="8" cols="80">
        <?php
        echo $Summary;

        ?>
    </textarea>
<p>Position : <input type="submit"  class="add_position" id="add_position" 
name="addPosition" value="+">

<div class="position_fields" id="position_fields">

</div>


<p>
    <input type="submit" value="Save" name="btn" class="btn btn-primary">
    <input type="submit" name="cancel" value="Cancel">
</p>
</form>
</div>
</div>
</div>

我遇到的問題：在上面的程序中，當用戶單擊添加按鈕時，我可以顯示輸入字段。 但是我想在頁面加載時顯示這些字段意味着不單擊我想打印這些字段的添加按鈕。 我怎樣才能到達目的地？

這是我用於從數據庫中獲取數據的 php 代碼：

<?php
try{
//Need to make a connection
$con=new PDO("mysql:host=localhost;dbname=courseraassignment","root","");


$statement=$con->prepare("select * from position 
                   where profile_id=:profile_id");
$statement->execute(array(
    ':profile_id'=>$_REQUEST['profile_id']
));
foreach($statement as $row){
   echo $row['year'];
   echo $row['description'];
   echo "<br>";
}
}catch(PDOException $e){
echo "error".$e->getMessage();
}
 ?>

從這段代碼中，我從位置表中獲取年份和描述，並希望在頁面加載時將這些值顯示到這些輸入字段中。

Answer 1

下面的代碼在頁面加載和用戶單擊添加按鈕時創建字段，如果有任何錯誤，請嘗試此操作讓我知道

<script type="text/javascript">
$(document).ready(function(){
    var countPos=0;
    var add_button=$('#add_position');
    var wrapper=$('#position_fields');
    window.console && console.log('Document ready called');
   //When the user clicks on the add button then It inserts these input fields
    function addField(event){
       event.preventDefault();
        if ( countPos >=9 ) {
            alert("Maximum of nine position entries exceeded");
            return;
        }
        countPos++;
        window.console && console.log("Adding position "+countPos);
        $(wrapper).append(
            '<div id="position'+countPos+'"> \
        <p>Year: <input type="text" name="year'+countPos+'" value="" /> \
        <input type="button" value="-" \
            onclick="$(\'#position'+countPos+'\').remove();return false;"></p> \
        <textarea name="desc'+countPos+'" rows="8" cols="80"></textarea>\
        </div>');
    }
    $(add_button).click(function(event){
        addField();
    });

    addField();

}); 

和 html 將是這樣的

<div class="container">
<h1>Ashiful Islam Prince's Resume Registry</h1>


<h1>Editing Profile for UMSI</h1>
<?php
if(isset($_SESSION['profile_error'])) {
$error = $_SESSION['profile_error'];
 unset($_SESSION["profile_error"]);


 echo '<span class="text-danger">';


   echo $error;


   echo '</span>';
}
?>
<form method="post">
<p>First Name:
    <input type="text" name="first_name" value="<?php
    echo $firstName;
    ?>"
      ></p><br>

<p>Last Name:
    <input type="text" name="last_name" value="<?php
    echo $lastName;
    ?>"</p>

<p>Email:
    <input type="text" name="email" value="<?php
    echo $Email;
    ?>"</p><br>
<span class="text-danger">
    <?php
    if(isset($email_sign_error))
        echo $email_sign_error;

    ?>
</span>


<p>Headline:<br/>
    <input type="text" name="headline" value="<?php
    echo $Headline;
    ?>"</p>


<p>Summary:<br/>
    <textarea name="summary" rows="8" cols="80">
        <?php
        echo $Summary;

        ?>
    </textarea>
<p>Position : <input type="button"  class="add_position" id="add_position" 
name="addPosition" value="+">

<div class="position_fields" id="position_fields">
     <?php foreach($your_data as $count => $data){ ?>
           <div id="position'+count+'">
               <p>Year: <input type="text" name="year'+count+'" value="" />
                 <input type="button" value="-" onclick="$(\'#position'+count+'\').remove();return false;"></p>
                   <textarea name="desc'+count+'" rows="8" cols="80"></textarea>
           </div>
        <?php } ?>
</div>


<p>
    <input type="submit" value="Save" name="btn" class="btn btn-primary">
    <input type="submit" name="cancel" value="Cancel">
</p>
</form>
</div>
</div>
</div>