Question

我需要在我的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>

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

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();
});

Answer 1

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

<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

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;
});

希望有所帮助：）

Answer 2

我想我会使用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) ;

}

详细了解localStorage here。

单击提交时存储输入无线电选择

2 个答案: