使用 onchange 事件更改数据输出答案

【问题标题】：changing data output with onchange event使用 onchange 事件更改数据输出
【发布时间】：2015-08-12 00:05:51
【问题描述】：

我有一个选项框，其中列出了我网站中某些内容的用户。然后我有两个输入框。一个代表胜利，另一个代表失败。我正在尝试创建一个 onchange 事件，以便每当从选项框中选择某个用户时，php 都会输出该用户信息。截至目前，输出没有改变。我的 onchange 事件有什么问题？

function myFunction() {
    var wins_var = document.getElementById('wins');
    var losses_var = document.getElementById('losses');
}

用输入输出数据和html的PHP

if ($stmt = $con->prepare("SELECT * FROM team_rankings WHERE user_id=user_id")) {

    $stmt->execute();
    $stmt->bind_result($ranking_id, $ranking_user_id, $ranking_firstname, $ranking_username, $ranking_division, $ranking_wins, $ranking_losses); 

    //var_dump($stmt);

    if (!$stmt) {
        throw new Exception($con->error);
    }

$stmt->store_result();
    echo "<select name = 'member' onchange='myFunction()'>";
    while ($row = $stmt->fetch()) {

    echo "<option value = '{$ranking_user_id}' data-wins = '{$ranking_wins}' data-losses = '{$ranking_losses}'";
    echo ">{$ranking_firstname}</option>";
    }
    echo "</select>";


    }   else {
        echo "<p>There are not any team players yet.</p>";
        }
}
catch (Exception $e)
{
    echo "Error: " . $e->getMessage();
}?><br><br>

        <label>Wins
            <input type="text" value="<?php echo $ranking_wins; ?>" id="win">
        </label>
        <label>Loss
            <input type="text" value="<?php echo $ranking_losses; ?>" id="losse">
        </label>

【问题讨论】：

基本上你想要做的就是用 Ajax 将数据发送到你的 php 脚本。然后，Php 可以将请求的数据回显给您的 Ajax 调用，这反过来将使用所需的信息更新您的网站。简而言之：Ajax sends username to PHP -> PHP queries database for info -> PHP echos result back to Ajax -> Ajax updates the website with the result.
不幸的是，我不能在这里给你一个很好的例子，因为它不能回答你的问题。但是，如果您在创建此文件时需要更多部门帮助，请随时单击我的个人资料并向我发送电子邮件。由于 SO 规则，通过那里我可以为您提供比这里更好的支持。
我已经给你回复了。如果你真的想了解这个，我认为我们最好在 SO chat 上见面。进行现场交流会是最有益的。
虽然在这种情况下有点烦人，因为它需要一定数量的 cmets 才能打开一个问题进行聊天。
让我们continue this discussion in chat。

标签： javascript php jquery ajax

【解决方案1】：

您在正确的路线上，您不需要执行任何 Ajax 来实现您在问题中提出的问题。

主要问题是，在您的 Javascript 中，您获得了对输赢的两个输入的引用，但您实际上并没有为它们分配任何值。

假设您使用的是 jQuery（正如您对其进行标记），那么将它用于 onchange 绑定和值分配会容易得多。

首先，您只需要确保您的“成员”选择有一个 ID，而不是（或）作为名称，并且您不需要“onchange”，因为我们将其与 jQuery 绑定：

echo "<select id = 'member'>";

然后，您的 Javascript 只需要如下所示：

$(document).ready(function() {
   $("#member").change(function() {
        myFunction();
   });
   myFunction();
});

function myFunction() {
       $selectedOption = $("#member option:selected");
       $("#wins").val($selectedOption.data("wins"));
       $("#losses").val($selectedOption.data("losses"));    
}

最初的$(document).ready() 函数将onchange 绑定设置为调用myFunction()，第二个myFunction() 调用只是确保在初始页面加载时为默认选择的选项填充输赢输入。

这里是 JS 小提琴：http://jsfiddle.net/fa0kdox7/

哦，是的，最后，您的输赢输入只需如下所示：

<label>Wins
    <input type="text" value="" id="wins">
</label>
<label>Loss
    <input type="text" value="" id="losses">
</label>

请注意，我更正了他们 ID 中的几个拼写错误。

【讨论】：