天道酬勤,学无止境

How to get value of radio buttons from one html page to another?

问题

我尝试获取位于第一个 html 页面上的底部粘贴的 html 代码的值。 我有另一个 html 页面,应该使用“onclick”按钮生成。 更准确地说,代码应该在下一页中创建按钮。

Case1:选择了 radio-choice-1 - 它应该创建 4 个按钮。

案例 2:选择了 radio-choice-2 - 它应该创建 4 或 9 个按钮。

案例 3:选择了 radio-choice-3 - 它应该创建 9 或 16 个按钮。

案例 4:选择了 radio-choice-4 - 它应该创建 16 个按钮。

我不知道如何获取所选单选按钮的值,然后在另一个页面上生成按钮。

我实际上有一些脚本(game.js):

$(document).ready(function(){
    $('#radio-button-value').click(function(){
        $("input[name='radio-button-gruppe']:checked".val());
    });
});

第一个html页面

     <html>
    <head>
        <meta charset="utf-8" />
        <title>newgame</title>

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>

    <!-- Einstellungen zur Defintion als WebApp -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

    <script src="game.js"></script> 
    </head>
    <body>


    <div data-role="main" class="ui-content">
    <form>
    <fieldset data-role="controlgroup">
  <legend>Choose a mode:</legend>
  <input type="radio" name="radio-choice" id="radio-choice-1" value="choice-1" checked="checked">
  <label for="radio-choice-1">easy</label>

  <input type="radio" name="radio-choice" id="radio-choice-2" value="choice-2">
  <label for="radio-choice-2">medium</label>

  <input type="radio" name="radio-choice" id="radio-choice-3" value="choice-3">
  <label for="radio-choice-3">difficult</label>

  <input type="radio" name="radio-choice" id="radio-choice-4" value="choice-4">
  <label for="radio-choice-4">hard</label>
</fieldset>
<input type="button" id="radio-button-value" name="game" value="create game" class="button" data-theme="b"/>
</form>





  </div>

  <div data-role="footer">

  </div>
</div> 
    </body>
</html>
回答1

我不确定你在寻找什么样的解决方案。 但是如果你不想使用更根深蒂固的东西,比如 php 中的 $_SESSION 变量,你可能正在寻找像 cookie 这样的东西。 这是关于 cookie 的一个很棒的页面。

还可以查看 htmlgoodies.com 上关于使用 javascript 进行变量传递的本教程,了解其他一些想法。

如果你对cookies没问题,你几乎可以使用你已经拥有的东西,只需清理一下jquery。

$(document).ready(function(){
    $('#radio-button-value').click(function(){
        var difficulty = $("input[name='radio-choice']:checked").val();
        document.cookie = "gameDifficulty=" + difficulty + ";path=/";
    });
});

见小提琴

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • How to get value of radio buttons from one html page to another?
    I try to get the value of the at the bottom pasted html code who stands on the first html page. I have another html page, which should be generated with the button "onclick". More precisely the code should create buttons in the next page. Case1: radio-choice-1 is selected - it should create 4 buttons. Case2: radio-choice-2 is selected - it should create 4 or 9 buttons. Case3: radio-choice-3 is selected - it should create 9 or 16 buttons. Case4: radio-choice-4 is selected - it should create 16 buttons. I dont know how to get the value of the selected radio buttons then generate buttons on
  • 如何使用javascript将值从页面传递到另一个页面(How to pass an a value from a page to another using javascript)
    问题 如何使用 javascript 在 html 中将值或数组从一个页面传递到另一个页面。 我不允许使用本地存储或会话只在页面之间传递变量。 我正在从单选按钮发送值。 我打算将结果存储在数组中,因为我正在跟踪用户的答案以在最后显示结果。 如何将数组发送到quiz_5.html ? 我打算继续传递数组而不是使用 cookie 或本地存储,因为我不允许。 下面是我的代码: <div> <form> <input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov <input type="radio" name="radio" value="incorrect" class="secondRow"> Data.Gov <br> <input type="radio" name="radio" value="incorrect" class="firstRow"> Facebook <input type="radio" name="radio" value="incorrect" class="secondRow"> XYZ.net <br> <input type="button" value="Submit & Next Question" onclick="getAnswer4(this
  • 防止分页 jquery 数据表中的多个单选按钮选择(Prevent multiple radio button selections in paginated jquery Datatables)
    问题 我在 Html 中使用带有分页的 Jquery 数据表。 单选按钮在单页中工作正常,但是当它出现在多个页面时无法阻止多选单选按钮,即如果我在页面 1 中选择一个单选按钮,在页面 2 中选择另一个单选按钮,那么两者都被仅在选定模式下。 单选按钮以单选而闻名,但在这里我得到了不同的行为 回答1 我和你有同样的问题。 我为这个问题找到了一个解决方案。 请在下面的完整示例中找到代码详细信息。 <html> <head> <link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css"> <style> table.dataTable tbody>tr.selected, table.dataTable tbody>tr>.selected { background-color: #A2D3F6; } </style> </head> <body> <table id="example"> <thead> <tr> <th>Location </th> <th>Base Location </th> </tr> </thead> <tbody> <tr><td>Pune</td><td><input
  • How to pass an a value from a page to another using javascript
    How do you pass a value or an array from one page to another in html using javascript. I'm not allowed to use local storage or sessions only pass the variable from page to page. I'm sending values from a radio button. I intend to store the results in array as i am keeping track of the users answer to display the result at the end. How do i send an array to quiz_5.html? I intend to keep passing the array instead of using a cookie or local storage as i am not permitted to. Below is My code: <div> <form> <input type="radio" name="radio" value="correct" class="firstRow"> NASA.Gov <input type=
  • 如何使用 JQuery 在 Rails 中的页面重定向上预选单选按钮(How to use JQuery to preselect radio button on page redirect in Rails)
    问题 我有一个 Rails 4.2.6 项目,我正在尝试使用 JQuery 在页面重定向上预先选择一个单选按钮。 从主页 -- static_pages/home.html.erb -- 用户可以选择单击三个按钮之一(选项): <h2>Select the role that best describes you.</h2> <div id="option-1"> <h2><%= link_to "Option 1", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> </div> .... <div id="option-2"> <h2><%= link_to "Option 2", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> </div> <!-- close workout-occasional --> </div> .... <div id="option-3"> <h2><%= link_to "Option 3", new_user_registration_path, class: "btn-block btn-lg btn-success", id: "fitness
  • do something on selecting a radio button
    I want to perform something with the help of jquery when a radio button is selected. Suppose the page has n number of radio button groups <input type="radio" name="group1" value="1" onSelect="jquery ajax" /><br> <input type="radio" name="group1" value="2" onSelect="jquery ajax" /><br> <input type="radio" name="group2" value="1" onSelect="jquery ajax"/><br> <input type="radio" name="group2" value="2" onSelect="jquery ajax" /><br> and so on ... Each onSelect calls the same js function(suppose, jsForAjaxCall(args)) which initiates the jquery ajax call. When ever a radio button is selected or
  • 做一些选择单选按钮的事情(do something on selecting a radio button)
    问题 I want to perform something with the help of jquery when a radio button is selected. 假设页面有 n 个单选按钮组 <input type="radio" name="group1" value="1" onSelect="jquery ajax" /><br> <input type="radio" name="group1" value="2" onSelect="jquery ajax" /><br> <input type="radio" name="group2" value="1" onSelect="jquery ajax"/><br> <input type="radio" name="group2" value="2" onSelect="jquery ajax" /><br> 等等 ... 每个 onSelect 调用相同的 js 函数(假设,jsForAjaxCall(args)),它启动 jquery ajax 调用。 When ever a radio button is selected or deselected I want have a jquery ajax call. 我展示了它供选择。 1)有什么方法可以让这样的javascript调用取消选择单选按钮?
  • 从 JavaScript 传递后无法检索变量(Unable to retrieve a variable after being passed from JavaScript)
    问题
  • 在jQuery中,如何通过其name属性选择元素?(In jQuery, how do I select an element by its name attribute?)
    问题 我的网页中有3个单选按钮,如下所示: <label for="theme-grey"> <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label> <label for="theme-pink"> <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label> <label for="theme-green"> <input type="radio" id="theme-green" name="theme" value="green" />Green</label> 在jQuery中,当单击这三个按钮中的任何一个时,我想获取所选单选按钮的值。 在jQuery中,我们具有id(#)和class(。)选择器,但是如果我想按其名称查找单选按钮,该怎么办,如下所示? $("<radiobutton name attribute>").click(function(){}); 请告诉我如何解决这个问题。 回答1 应该做到这一点,所有这些都在文档中,该文档具有与此非常相似的示例: $("input[type='radio'][name='theme']").click(function() { var
  • Selecting Multiple Radio Buttons With Alert
    Basically, I want create a page that has a quiz like structure and the user can select one option from one question and another from another question. Depending on the answers to each question it would need to alert a certain output. I only have some basic knowledge of Javascript so am using the same theory of using text boxes to select an answer but this time I want to use Radio buttons. This is the HTML code for the page with the radio buttons: <p> <strong>1. This is the first question?</strong><br /> <input type="radio" name="op1" value="anw1">Option 1<br> <input type="radio" name="op1"
  • 广播不同的名称-仅选中一个(radio different names - only check one)
    问题 我在基于xtcommerce的解决方法中使用了许多单选按钮。 这些单选按钮是动态创建的,并为每个组指定了不同的名称,如下所示: <input type="radio" name="id[1]" value="40"> <input type="radio" name="id[1]" value="30"> <input type="radio" name="id[1]" value="20"> <input type="radio" name="id[1]" value="10"> <input type="radio" name="id[2]" value="40"> <input type="radio" name="id[2]" value="30"> <input type="radio" name="id[2]" value="20"> <input type="radio" name="id[2]" value="10"> <input type="radio" name="id[3]" value="10"> .... 现在,我想将这些单选按钮“组合”在一起,以便我一次只能选择一个单选按钮。 现在,默认情况下,将预先选择每个“组”的每个第一个单选按钮(name =“ id [1]”,name =“ id [2]”等),并提交每个单选按钮的每个值。
  • 删除单选按钮中的默认选中值并将其替换为单击的另一个单选按钮(Remove the default checked value in radio button and replace it with the another radio button that is click)
    问题 我只想将单选按钮中的默认检查值更改为用户选择的值。因为无论何时我尝试它仍然在控制台日志中显示默认选中的而不是选中的那个。 我想将默认检查更改为用户在 HTML 中选择的内容。 谁能帮我? 我只是一个新手。 任何帮助,将不胜感激。 谢谢。这是代码。 CSS: html, body { font: 400 small-caps 16px/1.25 Arial; } fieldset { width: fit-content; padding: 0; } legend { font-size: 1rem } details { width: 150px; cursor: pointer; margin: 0 4px -5px 0; padding: 0 0 0 10px; } summary { position: relative; width: 96%; outline: 0.5px ridge grey; } /* Hides <detail>'s default arrow */ details summary::-webkit-details-marker { visibility: hidden; position: absolute; z-index: -1; } /*| Pseudo-<option> All pseudo-<option> are
  • Unable to retrieve a variable after being passed from JavaScript
    I have 3 html pages where 2 pages each have question 1 and question 2. The 3rd page shows the score of the test. I have designed the pages and now i want to keep track of the user scores. I'm not allowed to use local storage, cookies, database or sessions. I am suppose to pass the variable(to track each users answers) from one html page to another without using local storage or sessions, or cookies, and a DB. Now in my external js file, have functions getAnswer1(form) which stores the user answer and passes the array to quiz_2.html file. I found an example online to pass a variable but having
  • HTML 表单、框架与颜色
    目录 HTML 表单和输入 在线实例 HTML 表单 HTML 表单 - 输入元素 文本域(Text Fields) 密码字段 单选按钮(Radio Buttons) 复选框(Checkboxes) 提交按钮(Submit Button) ​ 更多实例 ​ 表单实例 HTML 表单标签 HTML 框架 Iframe - 设置高度与宽度 实例 Iframe - 移除边框 实例 使用iframe来显示目标链接页面 实例 HTML iframe 标签 HTML颜色 HTML 表单和输入 HTML 表单用于收集不同类型的用户输入。 在线实例 创建文本字段 (Text field) 本例演示如何在 HTML 页面创建文本域。用户可以在文本域中写入文本。 创建密码字段 本例演示如何创建 HTML 的密码域。 (在本页底端可以找到更多实例。) HTML 表单 表单是一个包含表单元素的区域。 表单元素是允许用户在表单中输入内容,比如:文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)等等。 表单使用表单标签 <form> 来设置: <form> . input 元素 . </form> HTML 表单 - 输入元素 多数情况下被用到的表单标签是输入标签(<input>)。 输入类型是由类型属性(type)定义的。大多数经常被用到的输入类型如下
  • 如何使用localstorage / ajax jquery从第一页到第二页获取单选按钮值(How to get radio button value from first page to second page using localstorage / ajax jquery)
    问题 目前正在处理本地存储,如果用户在第二页面板中选择第一个单选按钮必须隐藏,则在第一页我有两个单选按钮。 如果用户从第二页验证中选择单选按钮一个文本字段不应该发生我不知道如何使用 localStorage 或 ajax 哪个是最好的 当我看到 SO 我得到了一些东西window.localStorage.setItem("key_name", "stringValue"); 请指导我如何使用它: 第一页代码 <!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-1.11.3.js"></script> <meta charset="utf-8"> <title>First page</title> </head> <body> <form id="first_pge" class="first_pge" action="second.page"> <input type="radio" name="radio" id="first_radio"/> <input type="radio" name="radio" id="second_radio"/> <input type="button" value="submit" id="btn_sub"/> </form </body> <
  • How to use JQuery to preselect radio button on page redirect in Rails
    I have a Rails 4.2.6 project where I'm trying to use JQuery to pre-select a radio button on a page redirect. From the home page -- static_pages/home.html.erb -- a user can choose to click one of three buttons (options): <h2>Select the role that best describes you.</h2> <div id="option-1"> <h2><%= link_to "Option 1", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> </div> .... <div id="option-2"> <h2><%= link_to "Option 2", new_user_registration_path, class: "btn-block btn-lg btn-success" %></h2> </div> <!-- close workout-occasional --> </div> .... <div id="option-3">
  • 未找到 Watir 单选按钮(Watir Radio Button not found)
    问题 我想在 Watir 中设置这个单选按钮,但没有找到它: HTML: <input type="RADIO" style="-moz-user-focus: normal;" tabindex="2421" handlenativeevents="false" value="3G" $9a="$9b" $89="isc_RadioItem_3" id="isc_1HV" name="network"> 红宝石: if BROWSER.radio(:value => '3G').exists? BROWSER.radio(:value => '3G').set end 可能是因为我们的代码包含大写的 RADIO? (由 SmartGWT 生成) 任何解决方法? 回答1 检查 DOM 以查看它是否在框架内或导致问题的某个容器内。 如果您无法按值访问单选按钮,则可以通过其他内容(例如 index.html)来引用它。 找到单选按钮的容器,并通过第 N 个索引引用它。 因此,如果您的按钮是表 1 的表 12 中的第二个按钮,您可以像这样磨练它: BROWSER.table(:index, 1).table(:index, 12).radio(:index, 2) 或者,如果它是页面上的第二个单选按钮(总是),那么...... BROWSER.radio(:index, 2)
  • 在JavaScript中,如何获取具有给定名称的页面中的所有单选按钮?(In JavaScript, how can I get all radio buttons in the page with a given name?)
    问题 就像标题中所说的那样,在JavaScript中获取具有给定名称的页面上所有单选按钮的最佳方法是什么? 最终,我将使用它来确定选择了哪个特定的单选按钮,因此用另一种方式表达问题: 给定JavaScript中的字符串变量,我如何分辨当前选择的那个字符串名称为哪个确切的单选按钮输入元素(如果有)? 我没有使用jQuery。 如果要提供jQuery答案,请继续。 其他人可能会发现它很有用。 但这不会帮助我,我也不会投票。 回答1 您可以使用document.getElementsByName() ,传递单选组的名称,然后遍历它们以checked属性,例如: function getCheckedValue( groupName ) { var radios = document.getElementsByName( groupName ); for( i = 0; i < radios.length; i++ ) { if( radios[i].checked ) { return radios[i].value; } } return null; } 回答2 使用document.getElementsByName()是您所提问题的简短答案。 但是,最好执行以下操作: <form name="formFoo"> Foo: <input type="radio" name=
  • 将多个单选按钮绑定到单个布尔值(Bind multiple radiobuttons to individual booleans)
    问题 背景 我有一个包含三个布尔值的模型 public class PageDataModel { public bool setting1 { get; set; } public bool setting2 { get; set; } public bool setting3 { get; set; } } 如果一个值为真,则其他值必定为假。 在我看来,我正在显示三个单选按钮: 我的观点的剃刀代码: <div class="row"> <div class="radio"> @if (Model.Setting1) { @Html.RadioButtonFor(m => m.Setting1, "Setting1", new { Checked = "checked", Name = "Group"}) } else { @Html.RadioButtonFor(m => m.Setting1, "Setting1", new { Name = "Group"}) } @Html.Label("Setting1") </div> <div class="radio"> @if (Model.Setting2) { @Html.RadioButtonFor(m => m.Setting2, "Setting2", new { Checked = "checked", Name =
  • Oracle Apex:在交互式报告中创建单选按钮的分步方法(Oracle Apex: step by step approach to creating radio buttons in interactive report)
    问题 是否有一个很好的可视化教程来介绍如何在 Apex 4.2 中创建单选按钮的各个步骤? 本教程在 APEX 中创建表单以在交互式报告的查询中设置变量帮助我创建表单,我正在寻找类似的表单。 Within my application, I would like to add a radio button to each row of my interactive report which when selected would take the user to another report combining different tables? 非常感谢任何建议。 谢谢 回答1 您可以使用列链接来选择记录并导航到另一个页面,或者使用单选按钮和页面按钮/链接来执行此操作。 我将使用 DEPT 表上的一个简单报告来演示这两者。 方法一:单选按钮 对于单选按钮,我们可以使用apex_item.radiogroup函数在报告中添加一个附加列,以创建一个值为 DEPTNO 的单选按钮: 默认情况下,出于安全原因,radiogroup 的 HTML 将被转义,这不是您想要的,但很好地说明了它的作用: 我们可以通过将列属性更改为“标准报告列”来解决此问题: 现在我们看到: 单击任何行上的单选按钮选择它并取消选择其他行上的按钮。 要导航到具有选定行的另一个页面