jQuery, PHP, HTML User Input Question

Page 1 of 1

6 Replies - 597 Views - Last Post: 16 June 2016 - 09:27 AM

#1 fearfulsc2   User is offline

  • D.I.C Regular

Reputation: 19
  • View blog
  • Posts: 371
  • Joined: 25-May 16

jQuery, PHP, HTML User Input Question

Posted 15 June 2016 - 06:19 AM

Hey everyone, I don't know if this is the right thread for me to be posting this in since it's a combination of a few things, but I'm trying to create an interactive page that will eventually submit values to another page.

The page selects some things from a table in a database so that the user can use that as a reference. Also, there is a query to get the count of the number of items in the table so that the user can't ask for a value more than there is available. Afterwards, there will be a number textbox that will ask for a user on how many steps they want to use. They will be bounded to use a number that is 1 up until the count for the number of items in the table.

Once they hit the submit button, I want there to be X amount of dropdown menus with the numbers ranging from 1 to the COUNT of the items from the table. So, I know I have to use two for loops(one for the user input for amount of steps they want and the other for the count of items to be put in the dropdown)

I have never used a user's input on the same page in HTML and javascript/jquery to create such a thing before. Is it possible? This is what I have so far
<html>
        <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>
                <script>
                        $(document).ready(function()
                        {

                        });
                </script>
        </head>

        <body>
                <table>
                <?php
                        echo "<h3>This is the key</h3>";
                        while(mysqli_stmt_fetch($stmt))
                        {
                                echo "<tr>";
                                echo "<td> $CheckListID</td>";
                                echo "<td>$Description</td>";
                                echo "</tr>";
                        }
                        mysqli_stmt_close($stmt);
                        mysqli_close($conn);

                ?>

                </table>
                <br>How many steps do you want for this ticket type?
                <br>Pick a number between 1 and <?php echo $count; ?>
                <form method="GET">
                        <input type="number" id="numOfSteps" name="numOfSteps" min="1" max="<?php echo $count; ?>" />
                        <button type="button" id="numOfStepsButton">Submit</button>
                        <select name="steps" id="steps-select">
                        <?php
                                for($i = 1; $i <= $count; $i++)
                                {
                                        echo "<option value='$i'>$i</option>";
                                }
                        ?>
                        </select>
                </form>
        </body>

</html>


Is This A Good Question/Topic? 0
  • +

Replies To: jQuery, PHP, HTML User Input Question

#2 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3134
  • View blog
  • Posts: 8,931
  • Joined: 15-January 14

Re: jQuery, PHP, HTML User Input Question

Posted 15 June 2016 - 11:24 AM

Instead of putting that in form, have the button run a Javascript function that gets the value in the field and creates the other elements on the page.
Was This Post Helpful? 0
  • +
  • -

#3 fearfulsc2   User is offline

  • D.I.C Regular

Reputation: 19
  • View blog
  • Posts: 371
  • Joined: 25-May 16

Re: jQuery, PHP, HTML User Input Question

Posted 15 June 2016 - 12:10 PM

How would I have Javascript create the drop down menus and give them each a value and name since I will be submitting those values or at least have those values in the order they were picked insert into the table?

I've always used PHP to create HTML elements. I mean, I have created a button and things like that before using javascript but never figured out how to give them values.
Was This Post Helpful? 0
  • +
  • -

#4 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3134
  • View blog
  • Posts: 8,931
  • Joined: 15-January 14

Re: jQuery, PHP, HTML User Input Question

Posted 15 June 2016 - 12:50 PM

You can use document.createElement to create a new element, and document.appendChild to add it to the page. You can set properties like name directly on the element. I believe that select elements in particular also have a way to add new options to the dropdown.

You'll probably want to look up examples or documentation (there's plenty online), but if you're using jQuery then you can pass an empty element to create a new one:

var select = $('<select></select>');

Was This Post Helpful? 0
  • +
  • -

#5 fearfulsc2   User is offline

  • D.I.C Regular

Reputation: 19
  • View blog
  • Posts: 371
  • Joined: 25-May 16

Re: jQuery, PHP, HTML User Input Question

Posted 16 June 2016 - 05:50 AM

I believe they do, but I have a query that selects the values from the table and I put it in the loop to create the options, so the select elements should change when the table changes such as when a value has been added or deleted or even updated.

I guess the hard part is to create a select based on how many select elements the user wants and then give those a unique name and so forth since they will have to have different values since I will then be inserting the values into a table.
Was This Post Helpful? 0
  • +
  • -

#6 fearfulsc2   User is offline

  • D.I.C Regular

Reputation: 19
  • View blog
  • Posts: 371
  • Joined: 25-May 16

Re: jQuery, PHP, HTML User Input Question

Posted 16 June 2016 - 06:41 AM

I have something like this, but I can't stop getting it to append. Is there a way to simply make it show the amount the user enters in the text box without having to prepend? Or do I have to use the prepend function as well?

 <script>
                        $(document).ready(function()
                        {
                                $("#numOfSteps").keyup( function()
                                {
                                        var value = $(this).val();
                                        var select = $('<select></select>');
                                        var option = $('<option></option>');
                                        for(var i = 1; i <= $(this).val(); i++)
                                        {
                                                select = $('<select name=step' + i + '></select>');
                                                $("form").append(select);
                                        }
                                        $("p").text(value);
                                }).keyup();
                        });
                </script>

Was This Post Helpful? 0
  • +
  • -

#7 ArtificialSoldier   User is offline

  • D.I.C Lover
  • member icon

Reputation: 3134
  • View blog
  • Posts: 8,931
  • Joined: 15-January 14

Re: jQuery, PHP, HTML User Input Question

Posted 16 June 2016 - 09:27 AM

You should have a container to hold all of the select elements, and remove everything from the container before the loop.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1