0

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

8
  • Could you please give us the schema for you "teams" table? Commented Jan 13, 2017 at 15:22
  • 1. make the button type="button" 2. NEVER call anything name="submit" in a form. It will break the event handler 3. please post the rendered HTML in a minimal reproducible example by clicking the <> button in the editor Commented Jan 13, 2017 at 15:23
  • Try to use ajax on button click use ajax and get dropdown data and the append .... i think it's works Commented Jan 13, 2017 at 15:24
  • @x3ns I have added it to the question. Commented Jan 13, 2017 at 15:25
  • 1
    @PhpDude: You have <select name="teamName[]"> in your javascript block. Should be <select name="teamId[]"> according to what you want. Commented Jan 13, 2017 at 15:29

1 Answer 1

1

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.

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.