I was going through a text book and got caught up with a problem in an example.
Here's my html:
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !(this.checked);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
If you click the "reversed check" button first, the "check all" and "check none" buttons won't work when you click them. Then I changed the codes under the click Event of button "reversed checked" to jQuery functions. Here's the revised js codes:
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").attr("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").attr("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
$(this).attr("checked", !($(this).attr("checked"))); //here's the changed part!!!
});
});
})
In this case, if you manually check any checkbox, any of the three buttons won't work on that specific checkbox.
I suspect there's might be a subtle conflict between native HTML-JS attributes and jQuery functions.
I'd really appreciate some of you guys telling me the mechanism that leads to this malfunction. Thanks!
Don't set the attribute, set the property. (Which is what this.checked = ... is doing.) That is, use jQuery's .prop() method not .attr().
$(function(){
$("#checkAll").click(function(){
$("[name=items]:checkbox").prop("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("[name=items]:checkbox").prop("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("[name=items]:checkbox").each(function(){
this.checked = !(this.checked);
});
});
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script type="text/javascript" src="jquery-3.2.1.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
try this...
$(function(){
$("#checkAll").click(function(){
$("input[name=items]").prop("checked", true);
console.log("check all");
});
$("#checkNo").click(function(){
$("input[name=items]").prop("checked", false);
console.log("check none");
});
$("#checkRev").click(function(){
$("input[name=items]").each(function(){
this.checked = !(this.checked);
});
});
})
<!DOCTYPE html>
<html>
<head>
<title>practice</title>
<link rel="stylesheet" type="text/css" href="practice.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<form>
<label for="items">你最喜欢的运动是：</label><br>
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br>
<input type="button" id="checkAll" value="Check All">
<input type="button" id="checkNo" value="Check None">
<input type="button" id="checkRev" value="Reversed Check">
<input type="button" id="submit" value="Submit">
</form>
<script type="text/javascript" src="practice.js"></script>
</body>
</html>
Related
In Code B, all checked checkbox items will be posted to server side when I click submit button, the server side will handle all checked checkbox items and recreate web page to return client side.
I hope to do the same thing in Code A, and more I hope the client side can display a Delete prompt information before post when I click the button btnDelete.
How can I write code to post all checked checkbox items to server side using javascript or jquery ?
Code A
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="js/jquery1.10.2.min.js?isassets=1" type="text/javascript"></script>
<script type="text/javascript">
function DeleteFile() {
if (confirm("Do you want to delete selected images?")) {
...
}
}
</script>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
</form>
<input type="button" name="btnDelete" value="Delete Selected Images" onclick="DeleteFile()" />
</div>
</body>
</html>
Code B
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
</head>
<body>
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type='submit' name='submit' value='Delete Selected Images'/>
</form>
</div>
</body>
</html>
You can add an event listener to the submit event and call the event.preventDefault() method when confirm() returns false.
JavaScript
document.querySelector('#myform').addEventListener('submit', event => {
if (!confirm('Do you want to delete selected images?')) {
event.preventDefault();
}
});
HTML
<div id="container">
<form action='' method='post' enctype='multipart/form-data' id="myform">
<input id="a1" name="subBox1" type="checkbox" value="\SD\1.jpg"/>1.jpg <br/>
<input id="a2" name="subBox2" type="checkbox" value="\SD\2.jpg"/>2.jpg <br/>
<input id="a3" name="subBox3" type="checkbox" value="\SD\3.jpg"/>3.jpg <br/>
<input id="a4" name="subBox4" type="checkbox" value="\SD\4.jpg"/>4.jpg <br/>
<input type="submit" name="btnDelete" value="Delete Selected Images" />
</form>
</div>
JS Fiddle demo.
I have a button and on the click of it, I want to have the value of product_id which is its sibling but following code isn't working. It is giving me undefined. Fiddle Html is mostly fixed i can't give any classes
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>prev demo</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<form class="commerce-add-to-cart commerce-cart-add-to-cart-form-3" action="/drupal_commerce/" method="post" id="commerce-cart-add-to-cart-form-3" accept-charset="UTF-8">
<div>
<input type="hidden" name="product_id" value="3">
<input type="hidden" name="form_build_id" value="form-WLgRLYXPHDHNkH-vTSrERT4DGaqutn88pAlta_eJNig">
<input type="hidden" name="form_token" value="UhnJe2M-N6lxx2LdqBvWm6EUbB7gD0Uv3r3OaTc_s1Q">
<input type="hidden" name="form_id" value="commerce_cart_add_to_cart_form_3">
<div id="edit-line-item-fields--2" class="form-wrapper"></div>
<input type="hidden" name="quantity" value="1">
<input class="button01 form-submit" type="submit" id="edit-submit--3" name="op" value="Add to cart">
</div>
</form>
<script>
$('.commerce-add-to-cart input[type="submit"]').on('click', function(event){
console.log($(this).prev('input[name=product_id]').val())
});
</script>
</body>
</html>
I need to be able to auto-submit form post data and not have the page redirect like in my current code. Everything I come across on the subject involves jquery and ajax. I just can't get a working version using any of their examples.
Here is my current working page that redirects:
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
</head>`
<body>
<form name="actionBalance" method="post" action="action.php">
<input type="hidden" name="name" value="value2">
<input type="hidden" name="name2" value="value2">
<input type="hidden" name="name3" value="value3">
</form>
</body>
<script>document.actionBalance.submit()</script>
</html>
You need to call jquery post method with your form data like this.
$(document).ready(function() {
$.post( "action.php", $('form[name=actionBalance]').serialize() );
});
$(document).ready(function() {
$.post("action.php", {name: "value", name2: "value2", name3: "value3"});
});
Try this one, it should be working:
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
</head>
<body onload="document.createElement('form').submit.call(document.getElementById('actionBalance'))">
<form id="actionBalance" name="actionBalance" method="POST" action="action.php">
<input type="hidden" name="name1" id="name1" value="value1" />
<input type="hidden" name="name2" id="name2" value="value2" />
<input type="hidden" name="name3" id="name3" value="value3" />
<input type=hidden name="submit" id="submit" value="Continue"/>
</form>
</body>
</html>
Another option is put an iframe, so when page loads, then iframe load your payload (your form with the javascript that you put in your question) and the form will be submit.
I think you are looking for this solution with redirect right after submit:
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script>
$(document).ready(function(){
$('form').submit();
});
</script>
</head>
<body>
<form name="actionBalance" method="post" action="action.php">
<input type="hidden" name="name" value="value2">
<input type="hidden" name="name2" value="value2">
<input type="hidden" name="name3" value="value3">
</form>
</body>
</html>
Try to replace your whole script with this and let me know if this is what you wanted :-)
EDIT: If you need only that piece of script then jquery could be an overkill because it is huge library. So here is pure javascript for you :
<!DOCTYPE html>
<html>
<head>
<title>Does it work?</title>
</head>
<body>
<form name="actionBalance" method="post" action="action.php">
<input type="hidden" name="name" value="value2">
<input type="hidden" name="name2" value="value2">
<input type="hidden" name="name3" value="value3">
</form>
<script type="text/javascript">
var form = document.getElementsByName('actionBalance')[0];
form.submit();
</script>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
</body>
</html>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
function showValues() {
alert(this.value);
}
$( "input[type='checkbox']" ).on( "click", showValues );
</script>
it work like below picture in ie10 when you click the "check1" text
but it not working in ie8
Move the <script> tags inside the <body>.
I think you want to register your clicks on the labels instead of the checkboxes too (since you are not actually displaying the checkboxes). Try this:
function showValues() {
alert($("#"+$(this).attr("for")).val());
}
$("label").on("click", showValues);
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script>
$(document).ready(function(){
function showValues() {
alert(this.value);
}
$( "input[type='checkbox']" ).on( "click", showValues );
});
</script>
</head>
<body>
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
</body>
</html>
Where is $(document).ready();
there are several items within the code
that result in 'browser guesses' as to what you actually want.
Like having both check boxes having the same name
they are NOT radio buttons so the names should be unique
A input attribute ID="..." is for CSS definitions, not for input identification
<input type="checkbox" name="check" style="display:none;" value="check1" id="ch1">
<label for="ch1">check1</label>
<input type="checkbox" name="check" style="display:none;" value="check2" id="ch2">
<label for="ch2">check2</label>
To greatly help the browser, the code should look more like:
<label>
check1
<input type="checkbox" name="check1" style="display:none;" value="check1" />
</label>
<label>
check2
<input type="checkbox" name="check2" style="display:none;" value="check2" />
</label>
The code given below does not work.
<html>
<head>
<script type="text/javascript">
function dosomething(ID){
var name = document.getElementById(ID).value;
alert(name);
}
</script>
</head>
<body>
<input type="text" id="name1" /><input type="button" value="click" onclick="dosomething("name1")" />
<br /><br />
<input type="text" id="name2" /><input type="button" value="click" onclick="dosomething("name2")" />
</body>
</html>
Your issue is with the quotes not used properly, console should show you the syntax error.
<input type="button" value="click" onclick="dosomething("name1")" />
to
<input type="button" value="click" onclick="dosomething('name1')" />
Fiddle