如何在javascript中生成从图像单选按钮到提交按钮的表单链接

How to generate form links from image radio buttons to submit button in javascript

本文关键字：提交 单选按钮 按钮 链接 表单 图像 javascript      更新时间：2023-09-26

我需要知道如何制作它，以便从单选图像生成到表单中下一个按钮的链接。我有原始代码，当检查所有三个问题或每个问题的单选按钮时，它会生成一个链接，然后按钮就可以点击了。我添加了图片，它们是可点击的，但链接正在生成到下一个按钮，以便可以点击。如果你能帮忙，请使用详细的例子，因为我是javascript的新手。

以下是图像单选按钮的代码：http://jsfiddle.net/P74tn/1/

文档的HTML：

<form name="quiz" id='quiz'>
<h4>What carrier do you have?</h4>
<div class="radio" id="form">
  <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="AT&T"><img 
width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" /></div>
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Other">  
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" />
</div>
    <div style="list-style: none;" onclick=tryToMakeLink(); name="q1" value="Unlocked">   
<img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-image.jpg" />  
</div>
</div>
<br /><br /><br />
<h4>What is your phones capicity?</h4>
<div class="radio" id="form">
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2" 
value="8GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q2"  
value="16GB"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
</div>
<br /><br /><br />
<h4>What color is your phone?</h4>
<div class="radio" id="form">
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3"   
value="Black"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
    <div style="list-style: none;" type="radio" onclick=tryToMakeLink(); name="q3"   
value="White"><img width="50px" height="50px" src="http://wepriceit.webs.com/ipad-5-
image.jpg" /></div>
</div>

<br>
<div id=linkDiv>
 <input type=button disabled=disabled value=Next>
</div>
</form>

你的JS fiddle中有很多错误，我会尽可能多地列出：

  • id应该是唯一的，这里几个div具有相同的id"form"。您应该重命名它们，例如id="form_carrier"、id="form_color"等。

  • 您使用的是jQuery和vanilla JS的奇怪混合：要么使用jQuery处理程序格式（即$('.radio div').on('click', function() {});），要么使用内联JS（即onclick="tryToMakeLink();"）。请注意，在内联JS的情况下，JS代码必须用引号括起来。

  • 获取选择结果的选择器尝试获取<input>元素，而在HTML代码中，您使用的是<div>；按照编码，选择器不会选择任何内容。

  • :checked选择器仅适用于<input>元素；您不能使用它，因为您使用的是<div>元素。在这里，由于您将class active设置为任何选定的div，因此可以使用class选择器。

您的最终选择器看起来像：var q1=$('div[name="q1"].active');

  • 如果选择器不匹配任何元素，它不会返回null，而是返回一个空数组：document.querySelector('input[name="q3"]:checked')永远不会为null。您应该将您的支票替换为：q1.length === 0

  • 不能使用q1.value，因为值是节点的属性。您可以使用jQuery函数q1 = q1.attr('value')

  • 与其更改div的innerHTML，不如简单地更新输入元素

我用你原来的小提琴制作了一个叉子，向你展示如何让它发挥作用：http://jsfiddle.net/rCXT5/1/

相关文章：