javascript - AddShow dynamic form fields depending on select value - Stack Overflow

admin管理员组

文章数量:1317910

I am using Jquery Mobile to create a popup form that displays select statements for the users to select. I am using ajax to make the select statements dynamic. I have gotten the data to display and create a new select statement. It just does not seem to be formatting correctly.

Picture of The Form with before and After

Popup Form Code

<?php
$q = intval($_GET['q']);

include_once('session.php');
include_once('dbConnect.php');

$sql="SELECT Enrollment.c_id, Enrollment.s_id, users.f_name, users.l_name
FROM Enrollment
INNER JOIN users ON Enrollment.s_id = users.s_id
WHERE c_id=$q";

$result = mysqli_query($dbc, $sql);

echo "<label for='selectuser' class='select'>Select user:</label>";
echo "<select name='selectuser' id='selectuser' data-native-menu='false'>";
echo "<option>Choose Users:</option>";
echo "<option value='instructor'>All Instructors</option>";
echo "<option value='students'>All Students</option>";

while($row = mysqli_fetch_array($result))
  {
        $s_id = $row['s_id'];
        $f_name = $row['f_name'];
        $l_name = $row['l_name'];
        echo "<option value='$s_id'>$f_name $l_name</option>";
  }
echo "</select>";
?>

I am using Jquery Mobile to create a popup form that displays select statements for the users to select. I am using ajax to make the select statements dynamic. I have gotten the data to display and create a new select statement. It just does not seem to be formatting correctly.

Picture of The Form with before and After

Popup Form Code

<?php
$q = intval($_GET['q']);

include_once('session.php');
include_once('dbConnect.php');

$sql="SELECT Enrollment.c_id, Enrollment.s_id, users.f_name, users.l_name
FROM Enrollment
INNER JOIN users ON Enrollment.s_id = users.s_id
WHERE c_id=$q";

$result = mysqli_query($dbc, $sql);

echo "<label for='selectuser' class='select'>Select user:</label>";
echo "<select name='selectuser' id='selectuser' data-native-menu='false'>";
echo "<option>Choose Users:</option>";
echo "<option value='instructor'>All Instructors</option>";
echo "<option value='students'>All Students</option>";

while($row = mysqli_fetch_array($result))
  {
        $s_id = $row['s_id'];
        $f_name = $row['f_name'];
        $l_name = $row['l_name'];
        echo "<option value='$s_id'>$f_name $l_name</option>";
  }
echo "</select>";
?>

• javascript
• php
• jquery

Share Improve this question Follow edited Feb 4, 2015 at 14:19 Praxis Ashelin 5,22722 gold badges2121 silver badges4646 bronze badges asked Mar 11, 2014 at 5:26 user3404634user3404634 5866 bronze badges 0

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 11 +300

An easier way to approach this is the following:

HTML

First off, put all of your select boxes in your html from the start:

<select name="selectclass" id="selectclass" data-native-menu="false">
   <option value='default'>Select Class:</option>
   <?php echo $allClassOptions; ?>
</select>
<select name="selectuser" id="selectuser" data-native-menu="false">
   <option value='default'>Select User:</option>
   <?php echo $allUsers; ?>
</select>

It is good practice to provide an alternative for users without javascript (graceful degration).

Javascript

Then, in your javascript file, hide the input fields that should be hidden at the start. Bind an event handler to the change event of the first select field, and use an Ajax call to populate the option fields of the second select field.

var selectElement = $("#selectuser");
selectElement.hide();

$("#selectclass").on("change", function(){
    var selectedClass = this.value;

    if(selectedClass != "default"){
       selectElement.show();

       $.ajax({
           type: "POST",
           url: "getdatabaseresults.php",
           data: {"class": selectedClass },
           success: function(result){
                //remove old options
                selectElement.empty();

                //add new options
                selectElement.append(result);
           }
       });
    };
});

PHP

In your PHP file, handle the Ajax call and return the wanted results:

<?php

if(isset($_SERVER["HTTP_X_REQUESTED_WITH"]) && strtolower($_SERVER["HTTP_X_REQUESTED_WITH"]) == "xmlhttprequest"){
    //this is an Ajax call!

    $selectedClass = $_POST["class"];
    $options = "<option value='default'>Select User:</option>";

    //do whatever you want with the data
    //database calls and whatnot
    $stmt = mysqli_prepare($dbc, "SELECT * FROM users WHERE c_id = ?");
    mysqli_stmt_bind_param($stmt, "s", $selectedClass);
    mysqli_stmt_execute($stmt);
    mysqli_stmt_bind_result($stmt, $row);
    while(mysqli_stmt_fetch($stmt)) {
        $user = $row['username'];
        $options.= "<option value='$user'>$user</option>";
    }
    mysqli_stmt_close($stmt);

    echo $options;
}
?>

This php file can be expanded (with a switch() for example) so it can be used for different ajax calls.

Note: There are many different ways to achieve this, this is just one example.

I believe the problem is that you are not closing your select tag after your loop. Also, it's remended to do only one write at the very end. As such:

<?php
$q = intval($_GET['q']);

include_once('session.php');
include_once('dbConnect.php');

$sql="SELECT Enrollment.c_id, Enrollment.s_id, users.f_name, users.l_name
FROM Enrollment
INNER JOIN users ON Enrollment.s_id = users.s_id
WHERE c_id=$q";

$result = mysqli_query($dbc, $sql);

$text = "<label for='selectuser' class='select'>Select user:</label>";
$text .= "<select name='selectuser' id='selectuser' data-native-menu='false'>";
$text .= "<option>Choose Users:</option>";
$text .= "<option value='instructor'>All Instructors</option>";
$text .= "<option value='students'>All Students</option>";

while($row = mysqli_fetch_array($result))
{
    $s_id = $row['s_id'];
    $f_name = $row['f_name'];
    $l_name = $row['l_name'];
    $text .= "<option value='$s_id'>$f_name $l_name</option>";
}
$text .= "</select>"
echo $text
?>

本文标签： javascriptAddShow dynamic form fields depending on select valueStack Overflow