duanhe8280 2017-01-13 15:18
浏览 101
已采纳

使用Php添加/删除表单字段

I have a form which gives the ability for the user to add additional fields form to the form and it selects data from the database for the select/options.

It works ok but not entirely correct and am wondering if somebody wouldn't mind casting an eye on the code to see if can be done in a much cleaner way.

The main issue being that the select isn't sending the correct value across to the action script.

HTML output of the form:

<?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>

So the above renders out my simple form. The second part the JQuery that handles the facility to add additional select fields.

<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>

Now as can be seen it isn't the neatest of solutions combining the jQuery with the Php however I am not sure how else I would separate it out? So what is happening is when I do a var_dump($_POST) I see that the generated select passes ["teamName"]=> array(1) { [0]=> string(3) "211" where it should be passing ["teamId"]=> array(1) { [0]=> string(3) "211"

I am fully aware it is open to SQL injection but for now I am just trying to make this little part work.

update - team table scehema

enter image description here

  • 写回答

1条回答 默认 最新

  • dongmeixian9665 2017-01-13 15:50
    关注

    Main.php File

    <!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 File

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

    In this example getData file data was static but you have write query to get dropdown list data and pass in success response.

    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论

报告相同问题?

悬赏问题

  • ¥50 易语言把MYSQL数据库中的数据添加至组合框
  • ¥20 求数据集和代码#有偿答复
  • ¥15 关于下拉菜单选项关联的问题
  • ¥20 java-OJ-健康体检
  • ¥15 rs485的上拉下拉,不会对a-b<-200mv有影响吗,就是接受时,对判断逻辑0有影响吗
  • ¥15 使用phpstudy在云服务器上搭建个人网站
  • ¥15 应该如何判断含间隙的曲柄摇杆机构,轴与轴承是否发生了碰撞?
  • ¥15 vue3+express部署到nginx
  • ¥20 搭建pt1000三线制高精度测温电路
  • ¥15 使用Jdk8自带的算法,和Jdk11自带的加密结果会一样吗,不一样的话有什么解决方案,Jdk不能升级的情况