如何使用单选按钮重定向到下一页而不提交按钮?

时间:2016-11-27 06:01:18

标签: javascript php

此代码提供了提交按钮

脚本

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="../css/screen.css" type="text/css"     media="screen, projection" />
<link rel="stylesheet" href="../css/print.css" type="text/css" media="print" />
<!--[if IE]><link rel="stylesheet" href="../css/ie.css" type="text/css" media="screen, projection"><![endif]-->
<link href="../css/highlight.css" rel="stylesheet" type="text/css" media="screen" />
<script src="https://code.jquery.com/jquery-3.1.1.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
/* <![CDATA[ */
$(document).ready(function(){
$.getJSON("https://coinmap.org/api/v1/venues/",function(data){
    $.each(data.post, function(i,post){
        content += '<p>' + post.id + '</p>';
        content += '<p' + post.name+ '</p>';
        content += '<br/>';
        $(content).appendTo("#posts");
    });
});   
});
/* ]]> */
</script>
</head>
<body>
    <div class="container">
            <div class="span-24">
                   <h2>Check out the following posts:</h2>
                    <div id="posts"></div>
            </div>
    </div>
</body>
</html>

html表单

<script type="text/javascript">
function get_action(form) {
    form.action = document.querySelector('input[name = "x"]:checked').value;;
}

1 个答案:

答案 0 :(得分:1)

  1. 不要在class=""class = ""
  2. 之间混合您的代码风格
  3. div cant有必要的
  4. id必须是唯一的
  5. 使用jQuery
  6. &#13;
    &#13;
    $(document).ready(function(){
    // debug output
        console.log('Document ready');
        $('#submit1').click(function(event){
    	event.preventDefault();
    	var redirect = $('input[name=x]:checked', '#quoted').val();
    	alert (redirect);
    	location.href = redirect;
        });
    })
    &#13;
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <body>
    	<form id="quoted">
    		<input id="poster" type="text" name="poster" required="required" placeholder="Credited Individual."><br>
    		<textarea class="actual_quote" name="actual_quote" required="required" placeholder="Write the question here!"></textarea><br><br><br>
    		<div class = "checkboxes" required="required">
    			<h3 style = "margin-top:-20px;">Please select one catagory that the quote falls into.</h3>
    			<label for="x"><input type="radio" name="x" value="stupid.php" checked="checked" />    <span>stupid</span></label><br>
    			<label for="x"><input type="radio" name="x" value="stupider.php"/> <span>stupider</span>    </label><br>
    			<label for="x"><input type="radio" name="x" value="stupidest.php"/>    <span>stupidest</span></label>
    		</div>
    		<input id="submit1" type="button"><br>
    	</form>
      </body>
    &#13;
    &#13;
    &#13;