We Keep Coding

How to make checkbox items returned hyperlinks

I got it to return what is checked, but I can't figure out how to get the values returned to be hyperlinks as well so you can actually click "housing" and it will open a new tab for that page.
My html for the checkboxes:
<form id="resources">
<label><input type="checkbox" value="Housing" name="rsc">Housing</label><br/>
<label><input type="checkbox" value="Library" name="rsc">Library</label><br/>
<label><input type="checkbox" value="Parking" name="rsc">Parking</label><br/>
</form>
<button type="button">Show Resource(s)</button>
jQuery:
$(document).ready(function() {
$("button").click(function(){
var resource = [];
$.each($("input[name='rsc']:checked"), function(){
resource.push($(this).val());
});
alert("Click selections for more info: " + resource.join(", "));
});
});

Use window.location
$(document).ready(function() {
$("button").click(function(){
var resource = [];
$("input[name='rsc']:checked").each(function(){
resource.push($(this).val());
});
window.location = 'http://yourserver.com?q='+resource.join('+');//change the url to your case
});
});
or if you want the data to be presented in the same page use ajax

I think this post will help:
How to redirect to another webpage in JavaScript/jQuery?
Maybe, something like this:
$(document).ready(function() {
$("button").click(function() {
var resource = [];
$.each($("input[name='rsc']:checked"), function() {
resource.push($(this).val());
});
window.location.href = "http://" + resource;
});
});

jQuery button click registering previous clicks

I have a form with multiple buttons that submit to it that differ by value. After I click a button, and then click a second button, the function operates on them both instead of just the second button. Is there a way to prevent this behavior?
This is somewhat related to a question I asked here: Why does function only work on second click? but the solution isn't valid if there a multiple buttons as it just registers the first button from the list of buttons.
JS:
$(document).ready(function () {
$(':button').click(function (){
var myval = $(this).attr("value");
$('#post-form').on('submit', function(event) {
event.preventDefault();
console.log("form submitted!");
console.log(myval);
//var cbtn = $("button");
//var btnval = cbtn.val();
//console.log(cbtn);
document.getElementById('gbimg').style.display = 'none';
document.getElementById('rgimg').style.display = 'none';
create_post(myval);
});
});
function create_post(btnval) {
console.log("create post is working!");
$.ajax({
HTML:
<form action="/create_post/" method="POST" id="post-form">
<div class="col-sm-4" id="toprow">
<h4 style="font-family:verdana"> Models </h4>
<img src='{% static 'images/USAcomplete2.png' %}' class="img-responsive thumbnail" id='gbimg' >
<div class="btn-toolbar">
<button type="submit" name="model" value="test" class="btn btn-default">test</button>
<button type="submit" name="model" value="test2" class="btn btn-default">test2</button>
<button type="submit" name="model" value="test3" class="btn btn-default">test3</button>
</div>
</div>
</form>

You need to prevent the form from submitting before the user clicks the button.
$(document).ready(function () {
$('#post-form').on('submit', function(event, myval) {
event.preventDefault();
console.log("form submitted!");
console.log(myval);
//var cbtn = $("button");
//var btnval = cbtn.val();
//console.log(cbtn);
document.getElementById('gbimg').style.display = 'none';
document.getElementById('rgimg').style.display = 'none';
create_post(myval);
});
$(':button').click(function (){
var myval = $(this).attr("value");
$('#post-form').trigger('submit', myval);
});
Update
Sorry, I think this code should work. The above code would run twice, since a button click would be considered a form submit as well.
$(document).ready(function () {
$('#post-form').on('submit', function(event) {
event.preventDefault();
});
$(':button').click(function (){
var myval = $(this).attr("value");
console.log("form submitted!");
console.log(myval);
//var cbtn = $("button");
//var btnval = cbtn.val();
//console.log(cbtn);
document.getElementById('gbimg').style.display = 'none';
document.getElementById('rgimg').style.display = 'none';
create_post(myval);
});

What is happening here is that you are binding the submit event to #post-form a second time when a second button is clicked, as the binding happens inside the button clicking event callback.
The best way to prevent this is to move this
$('#post-form').on('submit', function(event) {
...
});
outside of your button click event.

how to pass the variable in jquery click event function

I want to Pass the variable with click event in jquery
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
}
please help me
html
<input type='submit' name='action' id='edit' />

You forgot the closing paranthesis.
Your javascript code should look like:
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});

You have to initialize click even once document is loaded. Also you have syntax error in your code.
Try this one:
$(document).ready(function() {
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
});
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var get=3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
});
</script>
</head>
<body>
<input type='submit' name='action' id='edit' />
</body>
</html>

HTML button
<button id='my_button' type='button' data-id='1' data-values='1' value='6' data-whatever='20'>My button</button>
Jquery
$('#my_button').bind('click', function() {
var value = $(this)val();
var whatever = $(this).data('whatever');
var id = $(this).data('id');
var values = $(this).data('values');
console.log(value);
console.log(whatever);
console.log(id);
console.log(values);
});
Open Firefox > Inspect Element > Console Tab.
Load the codes
Click the button
See response

Initiate everything after document is ready.
$(document).ready(function() {
var get = 3;
$('#edit').click(function(event){
alert('You are getting:' + get);
});
});
also don't use event handlers until you need it.

try:
$(document).ready(function() {
var get=3;
$('#edit').on('click', function(event){
alert('You are getting:' + get);
}
});
html:
<input type="button" id="edit" />

You can do it like this:
$(document).ready(function() {
var get = 3;
$("#edit" ).bind("click", { key: get }, function(event){
// event.data.key will have value of get
});
});

Can you try like this,
<script type="text/javascript">
function test(ev) {
var id = $(ev).attr('id');
alert(id);
}
</script>
<input id="btn" type="button" value="click" OnClick="test(this);" />

try this.
html:
<input type="button" id="edit"><br/>
jquery:
$(document).ready(function(){
var get = 3;
$("#edit").on('click',function(){
alert("Value is: " + get);
//parameter value
});
});

Disabling input tags and focusing on submit button

I have a code here for disabling the radio on a form and focusing on the submit button right after the timer expires. But this code seems not to work. Can you tell me what's wrong with my code or if you have any alternative with this? I'm using jquery timeTo plugin as my timer ..
<script type="text/javascript">
$(document).ready(function() {
$('#countdown').timeTo(5000, disablefocus();
});
});
function disablefocus(){
$(document).ready(function() {
$('input[type=radio]').attr('disabled', true);
$('#submitWidget').focus();
});
</script>
---->
<div id='countdown'></div>
<form>
<input type='radio' name='radio1' value='father'>
<input type = 'submit' id ='submitwidget' value='submit'/>
</form>

you add extra curly braces for timeTo function and miss the closed curly braces for disableFocus function.
$(document).ready(function() {
$('#countdown').timeTo(5000, disablefocus);
function disablefocus(){
$('input[type=radio]').attr('disabled', true);
$('#submitWidget').focus();
}
});
or another way
$('#countdown').timeTo(5000, function() { disablefocus(); });

$(document).ready(function() {
$('#countdown').timeTo(20, function() {
disablefocus();
});
function disablefocus(){
var message = $('#confirmMessage');
var goodColor = "#66cc66";
$('input[type=radio]').attr('disabled', true);
$('#submitWidget').focus();
message.css("color" , goodColor);
message.html("Press me now!");
}
});

Submitting form after using e.preventDefault();

I have a form that I am stopping from submitting with e.preventDefault(). (I've also tried return false).
I would manually tell the form to submit after a short delay, using the code:
$('form').delay(2000).submit();
Unfortunately, e.preventDefault() seems to disable the form from submitting even if it explicitly submitted using the submit() function.
Any idea how I can combine these intentions? I'd like to show a loading screen for a couple of seconds.
Thanks!

$("form").on('submit.blocker', function (e) {
setTimeout(function () {
$("form").off('submit.blocker').trigger('submit');
}, 2000);
e.preventDefault();
});

Try this.
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function ()
{
var okToSubmit = false;
$('form').submit(function (e)
{
if ( ! okToSubmit)
{
e.preventDefault();
var $form = $(this);
setTimeout(function ()
{
okToSubmit = true;
$form.submit();
}, 2000);
}
});
});
</script>
<form action="somewhere">
<input type="text" name="something" />
<input type="submit" />
</form>
Above code is tested.

$('form').on('submit', function(e) {
if (!e.isTrigger) {
setTimeout(function() {
$("form").trigger('submit');
}, 2000);
e.preventDefault();
}
});

you may want to try this it works for me:
<form name="demo" action="111" onSubmit="fun();return false">
<input type="text" name="name1" />
<input type="submit" />
</form>
and in the javascript
fun()
{
var x= document.forms["demo"];
setTimeout(x.submit(),2000);//time in milliseconds
}