将所选选项保存在 js 中



嘿,伙计们是javascript的新手。我有一个带有html的单选按钮检查选项。我完成的代码

<form action="" id="avi">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<br></br>
<button type="button"  id="bae">save me   </button>
<script>
var c = document.getElementById('bae');
c.onclick = function() {
var m = document.getElementById('avi'); 
return m.checked;
}
</script>

我需要做什么

我需要做的是,当我单击save me button时,我只需要保存单击的收音机的位置...假设如果我单击男性选项并单击保存,我需要在刷新后查看那些单击的单选选项。

这可以在不存储在数据库??..的情况下完成吗我认为这可以用js完成。

谢谢你的帮助

因此,由于大多数评论都指向您使用localStorage的您,因此我们开始:

存储值

 localStorage.setItem(key, value); 
 // i.e.  localStorage.setItem("name", "bob" );

要找回价值,您会这样做

localStorage.getItem(key)
// i.e. localStorage.getItem('name');

所以:

<input id="male" type="radio" name="sex" value="male">Male
<input id="female" type="radio" name="sex" value="female">Female

if(document.getElementById('male').checked){
    localStorage.setItem('sex', 'male');
}
if(document.getElementById('female').checked){
    localStorage.setItem('sex', 'female');
}

// getting the value
if(localStorage.getItem('sex')){
    // if localStorage.getItem('sex') == male, set the male checkbox
    // female if not
}

单选按钮是表单的一部分,表单将发送到服务器,刷新在返回时发生。因此,您将需要服务器端语言来知道在客户端选中了哪个单选按钮,例如 PHP,并且您不需要在数据库中存储任何内容。代码如下:

客户端:我的网页。.PHP

<html>
  <head>
  </head>
  <body>
<?php
// GET FROM SERVER WHAT RADIOBUTTON WAS CHECKED (IN ANY).
$chk = $_SESSION["sex_checked"];
if ( strcmp( $chk,"male" ) == 0 )
     $male = "checked";
 else $male = "";
if ( strcmp( $chk,"female" ) == 0 )
     $female = "checked";
else $female = "";   
?>
    <form action="myscript.php" method="post">
      <input type="radio" name="sex" value="male" <?php echo male; ?> />Male
      <input type="radio" name="sex" value="female"<?php echo female; ?> />Female
      <input type="submit" value="Save me" /> 
    </form >
  </body >
</html>

服务器端:我的脚本。.PHP

<?php
$_SESSION["sex_checked"] = $_POST["sex"]; // SAVE CHECKED RADIOBUTTON.
header( "Location: mywebpage.php" ); // RETURN TO WEB PAGE (REFRESH).
?>

你可以为此使用 cookie。下面是一个一般示例:

<body onload="pageLoad()">
    <form action="" id="avi">
        <input type="radio" name="sex" value="male">Male<br>
        <input type="radio" name="sex" value="female">Female
    </form>
    <br></br>
    <button type="button" id="bae" onclick="save()">save me   </button>
    <script>
        var pageLoad = function () {
            var savedValue = document.cookie.replace(/(?:(?:^|.*;s*)sexs*=s*([^;]*).*$)|^.*$/, "$1");
            if (savedValue === 'male') {
                document.querySelector('#avi input[type="radio"][value="male"]').checked = true;
            }
            else if (savedValue === 'female') {
                document.querySelector('#avi input[type="radio"][value="female"]').checked = true;
            }
        };
        var save = function () {
            var m = document.querySelector('#avi input[type="radio"]:checked');
            if (m)
                document.cookie = "sex=" + m.value;
        }
    </script>
</body>

其他一些需要注意的事项:

  • 您的原始代码实际上没有选择选中的无线电值在单击处理程序中。您正在获取表单的 ID,而不是当前选定的无线电。

  • 您可以在标记中的按钮上有一个处理程序,而不是
    在 JavaScript 中添加处理程序。这
    要容易得多您正在对此进行编码。如果你使用的是jQuery,我会说放弃标记中的处理程序,并将其替换为就绪中的处理程序分配块。

你需要设置并获取值

    function setCookie(name, value, days) { // from http://www.quirksmode.org/js/cookies.html
        if (days) {
            var date = new Date();
            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
            var expires = "; expires=" + date.toGMTString();
        } else var expires = "";
        document.cookie = name + "=" + value + expires + "; path=/";
    }
    
    function getCookie(name) {
        var nameEQ = name + "=";
        var ca = document.cookie.split(';');
        for (var i = 0; i < ca.length; i++) {
            var c = ca[i];
            while (c.charAt(0) == ' ') c = c.substring(1, c.length);
            if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
        }
        return null;
    }
    
    window.onload = function () {
        var gender = getCookie('samplecookie');
        if (gender) {
            if (gender=="male") document.getElementsByName('sex')[0].click(); // or .checked=true; 
            else if (gender=="female") document.getElementsByName('sex')[1].click();
        }
        document.getElementById('bae').onclick = function () {
            var m = document.getElementsByName('sex')[0];
            var f = document.getElementsByName('sex')[1];
            if (m.checked) {
                setCookie('samplecookie', m.value, 30);
            } else if (f.checked) {
                setCookie('samplecookie', f.value, 30);
            }
        }
    }
<form action="" id="avi">
<input type="radio" name="sex" value="male">Male<br>
<input type="radio" name="sex" value="female">Female
</form>
<br></br>
<button type="button"  id="bae">save me   </button>

最新更新