2017-01-13 5 views
0

У меня есть форма, которая дает пользователю возможность добавлять дополнительную форму формы в форму и выбирает данные из базы данных для выбора/параметров.Добавление/удаление полей формы с помощью Php

Это работает нормально, но не совсем корректно, и мне интересно, может ли кто-нибудь не прочь взглянуть на код, чтобы увидеть, можно ли сделать его более чистым способом.

Основная проблема заключается в том, что select не отправляет правильное значение в сценарий действия.

HTML выход формы:

<?php $dashboardId = $_GET['dashboard_id']; ?> 

<form action="cm.php" method="POST"> 
    <input type="hidden" name="dashboardId" value="<?php echo $dashboardId; ?>"> 


    <div id="exercises"> 
     <div class="team"> 
      <select name="teamId[]"> 
      <?php 
      $sql = "SELECT * FROM teams WHERE dashboard_id = $dashboardId"; 
      $result = $conn->query($sql); 
       if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){ 
         echo '<option value="' . $row["team_id"] . '">' . $row["team_name"] . '</option>'; 
        } 
       } 
      ?>     
      </select> 
      <button class="remove">x</button> 
     </div> 
    </div> 
    <button id="add_exercise">add more</button> 
    <br> 
    <input type="text" name="memberName"> 
    <br> 
    <input type="submit" name="submit" value="Create Member" /> 
</form> 

Так выше делает мою простую форму. Вторая часть JQuery, которая обрабатывает объект для добавления дополнительных полей выбора.

<script type="text/javascript"> 
$('#add_exercise').on('click', function() { 
    $('#exercises').append('<div class="team"><select name="teamName[]"><?php 
      $sql = "SELECT * FROM teams WHERE dashboard_id = $dashboardId"; 
      $result = $conn->query($sql); 
       if($result->num_rows > 0){ 
        while($row = $result->fetch_assoc()){ 
         echo '<option value="' . $row["team_id"] . '">' . $row["team_name"] . '</option>'; 
        } 
       } 
      ?> </select><button class="remove">x</button></div>'); 
    return false; //prevent form submission 
}); 

$('#exercises').on('click', '.remove', function() { 
    $(this).parent().remove(); 
    return false; //prevent form submission 
}); 
</script> 

Теперь, как можно видеть, это не опрятных решений, сочетающих в JQuery с Php однако я не знаю, как еще я бы отделить его? Так что же происходит, когда я делаю var_dump($_POST) я вижу, что генерируемый выберите проходит ["teamName"]=> array(1) { [0]=> string(3) "211", где она должна быть проходной ["teamId"]=> array(1) { [0]=> string(3) "211"

Я полностью осознаю, она открыта для SQL инъекций, но сейчас я просто пытаюсь сделать этот маленький часть произведение.

обновление - команда таблицы scehema

enter image description here

+0

Не могли бы вы предоставить нам схему для таблицы «команд»? – x3ns

+0

1. сделайте кнопку type = "button" 2. НИКОГДА не называйте что-либо 'name =" submit "в форме. Он сломает обработчик событий 3. отправьте отображаемый HTML в [mcve], нажав кнопку '<>' в редакторе – mplungjan

+0

Попробуйте использовать ajax при нажатии кнопки, используйте ajax и получите раскрывающиеся данные и добавьте .... Я думаю, что это работает –

ответ

1

main.php Файл

<!DOCTYPE html> 
<html> 
    <head> 
<meta charset="utf-8"> 
<title></title> 
</head> 
<body> 
<div class="wrapper"> 
    <div> 
    <select class="options" name=""> 
    <option value="1">item_1</option> 
    <option value="1">item_2</option> 
    <option value="1">item_3</option> 
    </select> 
</div> 
</div> 
<button type="button" class="addme" name="button">Add More</button> 
</body> 
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"> </script> 
<script type="text/javascript"> 
$(document).ready(function(){ 
    $('.addme').click(function(){ 
    $.ajax({ 
     url:'getData.php', 
     type:'GET', 
     success:function(result){ 
      console.log(result); 
      $('.wrapper').append(result); 
     } 
    }) 
    }); 
}); 

getData.php Файл

<select> 
<option value='1'>Item1</option> 
<option value='2'>Item2</option> 
<option value='3'>Item3</option> 
</select><br> 

В этом примере данные файла getData были статическими, но у вас есть запрос на запись, чтобы получить данные о выпадающем списке и передать успешный ответ.

Смежные вопросы