Динамическое отображение Html div с выражением php с помощью javascript при нажатии кнопки

Question

, пожалуйста, помогите мне с моей проблемой, прокручивая мою голову для этого, поэтому в основном я хочу динамически добавлять <div> с элементами формы на нем. Я хочу добавить это при нажатии кнопки с помощью javascript. Сначала я работал, пока часть, где мне нужно разместить выражение php в теге <select> в ярлыках и значениях select option, поступает из моей базы данных.

HTML

<div id="file-container" class="container-fluid"> 
    <div class="form-inline thumbnail"> 
    <label class="sr-only">File Name</label> 
    <input type="text" class="form-control input-sm" name="filename[]" placeholder="File name *"> 
    <select class="selectpicker" data-live-search="true" title="Choose Article" name="article[]"> 
    <?php while($row_rsArticles = mysqli_fetch_assoc($rsArticles)){ ?> 
     <option value="<?php echo $row_rsArticles['id']; ?>" ><?php echo $row_rsArticles['name']; ?></option> 
    <?php } mysqli_data_seek($rsArticles, 0);?> 
    </select> 
    <div class="radio"> 
     <fieldset id="group1"> 
      <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="0">Can View</label> 
      <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="1">Can Download</label> 
     </fieldset> 
    </div> 
    <label for="fileinput" class="sr-only">File input</label> 
    <input type="file" class="form-control input-sm" name="fileinput[]"> 
    <button type="button" class="btn btn-danger" id="deletefileinput">Delete</button> 
    </div> 

SQL

mysqli_select_db($connection, $database); 
$query_rsArticles = "SELECT * FROM article order by name asc"; 
$rsArticles = mysqli_query($connection, $query_rsArticles) or die("Error in retrieving article records"); 
$totalRows_rsArticles = mysqli_num_rows($rsArticles); 

JAVASCRIPT

$(function() { 
    var counter = 2; 
    $('#addfileinput').click(function(){ 
     var newDiv = $('<div class="form-inline thumbnail"><label class="sr-only">File Name</label><input type="text" class="form-control input-sm" name="filename[]" placeholder="File name *"><select class="selectpicker" data-live-search="true" title="Choose Article" name="article[]"><?php while($row_rsArticles = mysqli_fetch_assoc($rsArticles)){ ?><option value="<?php echo $row_rsArticles['id']; ?>" ><?php echo $row_rsArticles['name']; ?></option><?php } mysqli_data_seek($rsArticles, 0);?></select><div class="radio"><fieldset id="group'+counter+'"><label class="radio"><input type="radio" class="radio" name="filemode[] id=group'+counter+'" value="0">Can View</label><label class="radio"><input type="radio" class="radio" name="filemode[] id=group'+counter+'" value="1">Can Download</label></fieldset></div><label for="fileinput" class="sr-only">File input</label><input type="file" class="form-control input-sm" name="fileinput[]"><button type="button" class="btn btn-danger" id="deletefileinput">Delete</button></div>').append(newDiv); 
     counter ++; 
    }); 
    }); 

Пожалуйста, голые со мной и Im действительно надеюсь, что вы могли бы помочь.

Благодаря

Answer 1

Я думаю ajax это путь. Попробуйте этот подход ...

HTML

<div id="file-container" class="container-fluid"> 
<div class="form-inline thumbnail"> 
<form id="articles_search"> 
<label class="sr-only">File Name</label> 
<input id= "srch_input" type="text" class="form-control input-sm" name="filename[]" placeholder="File name *"> 
<button class = "btn btn-default" id="articles">Ajax</button> 
     </form> 
<div id="srch"> 

     </div> 
<div class="radio"> 
    <fieldset id="group1"> 
     <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="0">Can View</label> 
     <label class="radio"><input type="radio" class="radio" name="filemode[] id=group1" value="1">Can Download</label> 
    </fieldset> 
</div> 
<label for="fileinput" class="sr-only">File input</label> 
<input type="file" class="form-control input-sm" name="fileinput[]"> 
<button type="button" class="btn btn-danger" id="deletefileinput">Delete</button> 

JAVASCRIPT

$(document).ready(function() { 
    $('#articles').click(function(){ 
    var title = $("#srch_input").val(); 
    $.ajax({ 
    url: 'processing_php_file.php', 
    type: "POST", 
    data: {'title': $("#srch_input").val()}, 
    processData: true, 
    success: function(data){ 
    $('#srch').fadeIn(200).html(data); 
    }, 
    error: function(){ 
    } 
    }); 

    }); 

PHP

Имя файла php должно быть processing_php_file.php.

<?php 
    mysqli_select_db($connection, $database); 
    $query_rsArticles = "SELECT * FROM article order by name asc"; 
    $rsArticles = mysqli_query($connection, $query_rsArticles) or 
    die("Error in retrieving article records"); 
    $totalRows_rsArticles = mysqli_num_rows($rsArticles); 
    while($row_rsArticles = mysqli_fetch_assoc($rsArticles)); 
    echo '<select>'; 
    for ($i=0; $i <sizeof($totalRows_rsArticles) ; $i++) { 

    echo '<option>'; 
    echo $row_rsArticles['id']; 
    echo $row_rsArticles['name']; 
    echo '</option>'; 
    } 
echo '</select>'; 
    ?> 

В этом примере мы запросов к базе данных с помощью AJAX вызова и извлечения данных из базы данных и показывать их на веб-странице без обновления страницы.

Примечание: вам необходимо изменить ваш php в соответствии с вашими потребностями. Я просто использовал предоставленный вами код, так как это просто показать вам подход. Я добавил эхо-часть, чтобы показать результат на вашей веб-странице. Вы можете оптимизировать внешний вид на css.

Надеюсь, это поможет!