Solved

Jquery onclick

Posted on 2012-12-24

2 solutions

841 Views

Last Modified: 2012-12-27

Hello All,

I am trying to use jquery/javascript to redirect based on a radio button onclick.

The below is code that I got from another site but it's not working.
Any ideas?

<script type="Javascript">
    $('input[type=radio]').on('click', function(){

        href = $(this).val()+".html";

        $('#form1').attr("action", href)

    })

</script>
<style type="text/css">
.style1 {
				text-align: center;
}
</style>
</head>

<body>
<form method="post">
<table style="width: 20%">
				<tr>
								<td class="style1">
								
												<input name="Radio1" type="radio" />
								</td>
								<td>Uncheck All</td>
				</tr>
</table>

Open in new window

Thanks!

Comment

Question by:Isaac

[X]

Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

Help others & share knowledge
Earn cash & points
Learn & ask questions

Join The Community

9 Comments

LVL 38

Expert Comment

by:Tom Beck

ID: 387184682012-12-24

1.) It is <script type="text/javascript">
2.) Wrap the click event in an onReady event.

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	$('input[type=radio]').on('click',function(){

        href = $(this).val()+".html";

        $('#form1').attr("action", href)

    });
});

Open in new window

LVL 30

Expert Comment

by:IanTh

ID: 387184722012-12-24

see

http://jsfiddle.net/briguy37/EtNXP/

hope it helps

LVL 5

Author Comment

by:Isaac

ID: 387185552012-12-24

Ok.. I should have gone into more details. How do I make this work in SharePoint 2007 using a Centent Editor Webpart. Content editor web parts does not like the form tag, so I had to take it out.

IanTh,

I'm not sure how to use your code because I have about 8 other radio buttons.

Any ideas?

Thanks!

LVL 38

Accepted Solution

by:Tom Beck

Tom Beck earned 400 total points

ID: 387191022012-12-24

A simple redirect from a radio button click would look like this:

<script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js'></script>
<script type="text/javascript">
$(document).ready(function(){
	$('input[type=radio]').on('click',function(){

        window.location = $(this).val();

    });
});

Open in new window

LVL 15

Assisted Solution

by:Insoftservice

Insoftservice earned 100 total points

ID: 387199582012-12-25

Please try out this one
lovetomarry.html

LVL 15

Expert Comment

by:Insoftservice

ID: 387229292012-12-26

Hi did u checked the code provided .

LVL 15

Expert Comment

by:Insoftservice

ID: 387241492012-12-27

What was the issue in my code .
Please specify.

LVL 5

Author Comment

by:Isaac

ID: 387241952012-12-27

There was no issue with your code but I tried tommyboy's first a week ago and it worked. I just forgot to give him the credit. So, I gave you a part just to be fair.

LVL 15

Expert Comment

by:Insoftservice

ID: 387243852012-12-27

ok thanx . wish you all merry xmas !!

Featured Post

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Delegation for dynamic elements using JQuery on()

Article by: Anthony

There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…

jQuery

Create a responsive confirmation popup using HTML, CSS, jQuery and Promises

Article by: Julian

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises

Introduction to jQuery (Part 1)

Video by: Jason

The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

Introduction to jQuery (Part 2)

Video by: Jason

The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…