单击提交时存储输入单选选择

Store input radio selections when submit is clicked

本文关键字：单选 选择 输入 存储 提交 单击      更新时间：2023-09-26

我需要在我的js文件中存储为每个无线电名称选择了哪个无线电选项，并存储输入的用户名。这是我的表格

<form id="newPlayer">
                    Username:<br>
                     <input type="text" name="user"/><br>
                    Please Choose a Class: <br>
                    <input type="radio" name="class"/>Archer
                    <input type="radio" name="class"/>Mage
                    <input type="radio" name="class"/>Warrior
                    <br>
                    Please Choose a Race: <br>
                    <input type="radio" name="race"/>Orc
                    <input type="radio" name="race"/>Elf
                    <input type="radio" name="race"/>Human
                    <input type="radio" name="race"/>Worg
                    <br>
                    <input type="submit" value="Submit">
                </form>

编辑：当我尝试将提交按钮定位为点击功能时，它会导致我的页面重新加载，而不是使表单淡出

var userInput;
var classInput;
var raceInput;
$('input[type=submit]').click(function(){
    $('#newPlayer').fadeOut(500);
    userInput = $('input[name="user"]').val();
    classInput = $('input[name="class"]:checked').val();
    raceInput = $('input[name="race"]:checked').val();
});

也许这会有所帮助。首先，您必须在这些输入上输入值

<form id="newPlayer">
    Username:<br>
    <input type="text" name="user"/><br>
    Please Choose a Class: <br>
    <input value="archer" type="radio" name="class"/>Archer
    <input value="mage" type="radio" name="class"/>Mage
    <input value="warrior" type="radio" name="class"/>Warrior
    <br>
    Please Choose a Race: <br>
    <input value="orc" type="radio" name="race"/>Orc
    <input value="elf" type="radio" name="race"/>Elf
    <input value="human" type="radio" name="race"/>Human
    <input value="worg" type="radio" name="race"/>Worg
    <br>
    <input type="submit" value="Submit">
</form>

然后，使用jQuery，一个简单的.val（）就可以完成这项工作：

var class_val = $('input[name="class"]:checked').val();
var race = $('input[name="race"]:checked').val();
var user = $('input[name="user"]').val();

之后，您只需要放入本地存储

localStorage.setItem('class', class_val);
localStorage.setItem('race', race);
localStorage.setItem('user', user);

要在将来访问这些值，请执行此操作

var stored_class = localStorage.getItem('class');
var stored_race = localStorage.getItem('race');
var stored_user = localStorage.getItem('user');

若要在提交时执行操作，请在窗体中添加一个提交事件，如下所示：

$('form').on('submit', function() {
    // Get values
    var class_val = $('input[name="class"]:checked').val();
    ...
    // Store values
    localStorage.setItem('class', class_val);
    ...
    // Avoid form submit
    return false;
});

希望对:)有所帮助

我想我会使用localStorage。例如：

//Make sure to set the selection variable to a object that contains the selections made by the user.
function save() {
    //This will save the current settings as an object to the localStorage.
    localStorage.selections = JSON.stringify(selections) ;
}
function load() {
    if (!localStorage.selections) {
        alart("No saves found.") ;
        return false ;
    }
    selections = JSON.parse(localStorage.selections) ;
}

在此处阅读有关本地存储的更多信息。

相关文章：