I have a checkbox 'JSFiddle' When the user ticks on one of the checkboxes, it opens a new Window, which enables the user to view download a PDF once the checkbox button has been clicked. this then disables the download function so when the user ticks on the checkbox button again it activates the submit button.
The Trouble i am having is when the user clicks on the anything within the terms-blockdiv is downloads the PDF. Initially how i want it when is the user clicks on the text 'terms and conditions' it opens the the PDF, once the PDF is open the text changes to 'i agree with the terms with a tick' that activates the submit button… can this be done
<div class="terms-block">
<input type="checkbox" id="terms-agreed" class="form-terms" name="agreed" value="terms">
<label class="terms-view" for="terms">I agree to the terms and conditions</label>
</div>
$(function() {
var checkboxes = $("#terms-agreed"),
submitButt = $("input[type='submit']");
enableSub(submitButt );
checkboxes.on("click",function() {
enableSub(submitButt );
if (this.checked) window.open('{site_url}downloads/resellers/Standard_Terms_and_Conditions.pdf');
});
});
You should make something like this:
Put a label with text "Terms and conditions" with some id
In a div with some class with css set to display:none put the checkbox and the label with "I agree with terms and conditions".
Put a button with attribute disabled set to true, when user make a click in the "I agree (...)" text this button will change to enabled.
The code may look like this:
$(function() {
$("#btnDownload").attr("disabled",true);
$("#terms_and_conditions").on("click",function(){ /*window.open('{site_url}downloads/resellers/Standard_Terms_and_Conditions.pdf');*/
$("#div_agree").show();
});
$("#terms-agreed").on("click",function(){
if($(this).prop("checked"))
$("#btnDownload").attr("disabled",false);
else
$("#btnDownload").attr("disabled",true);
});
});
.terms_link{
cursor:pointer;
}
#div_agree{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h1>Button should be enabled if at least one checkbox is checked</h1>
<div class="terms-block">
<label id="terms_and_conditions" class="terms_link">Click to see terms and conditions</label><br/>
<div id="div_agree">
<input type="checkbox" id="terms-agreed" class="form-terms" name="agreed" value="terms">
<label class="terms-view" for="terms">I agree to the terms and conditions</label>
</div>
</div>
<br/>
<button type="button" id="btnDownload">Download</button>
Just adjust to your requeriments
I commented the window.open line.
Hope it helps you.
Related
I have a popover icon and 2 radio buttons (yes and no).
I wrote code to show popover data-content text when user clicks on yes and hide data-content text when user clicks on no.
I am showing popover content when user clicks on yes using
$('#element').popover('show');
I am hiding popover content when user clicks on no using
$('#element').popover('hide');
Popover text is showing as expected when user clicks on yes radio button for the first time.
After that when clicks on no radio button and again click on yes radio button then popover text is disappearing within a fraction of second and user doesn't have enough time to read the content present in the popover.
Please help
Try this solution
<div class="container">
popover<br />
<input type="radio" id="answer" name="answer" value="yes"/> Yes
<input type="radio" id="answer" name="answer" value="no"/> No
</div>
<script>
$(document).ready(function(){
$("input[type=radio][name=answer]").on('change', function() {
var radioVal = $(this).val()
if(radioVal=='yes') {
$('[data-toggle="popover"]').popover('show')
} else if(radioVal=='no') {
$('[data-toggle="popover"]').popover('hide')
}
})
});
</script>
Proceed </button>
<input type="checkbox" name="checkbox3" value="yes">
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
I have a checkbox and a button which will take me to next page. But, before I press the button the check box has to be ticked. If not, a label has to be displayed below the check box saying "accept to rules first". Help? Also, it would be great if i can highlight the checkbox to red if i click proceed without checking the checkbox. Can use javascript/jquery.
Try this it works
<form action="page.html">
<input type="checkbox" name="checkbox3" value="yes" required>
By checking the box, I certify that have read the above disclaimers and agree to the rules. </input>
<input type="submit" name ="submit"/>
</form>
To get you started:
<input id="checkboxAgree" type="checkbox" name="checkbox3" value="yes">
function checkAgree()
{
if (document.getElementbyId("checkboxAgree").getAttribute("checked") )//checkbox is checked
{
location.href = "page.html"; //load the next page.
}
else
{
Alert("You need to check the box before you can continue");
}
}
document.getElementById("proceed-button").addEventListener("click", checkAgree ,false);
addEventListener add an onclick event to the button. When clicked this executes the function checkAgree. When the checkbox has the attribute checked it is checked and the ifwill render true. location.href will load page.html.
Please delete the a that surrounds your button.
I am working with JSP and I have a html form in which I have a button at the top which is Process button. Now if I click on that Process button, it shows me a form which has two radio button - TestClient and TestServer.
It also has Submit button in that form.
Here is my jsfiddle
Problem Statement:-
Now what I am trying to do is - As soon as I click on TestClient radio button, I would like to show two text box and one radio button along with label just below that TestClient and TestServer like this -
TestClient TestServer
Name textbox
Id textbox
Sex Male Female
Submit button
In the same way if I am clicking TestServer button - I would like to show three text box and one drop down menu just below the TestClient and TestServer
TestClient TestServer
Address textbox
ClientId textbox
ServerId textbox
Country dropdownbox
Submit button
Is this possible to do using jquery in my current jsfiddle example? If yes, then any jsfiddle example will be of great help to me.
Very do-able. I've just added a quick example with a div for each radio button and some text in them. You can add your own inputs etc.
Hide these divs with CSS by default.
<div class="client" style="display: none">
Client fields here
</div>
<div class="server" style="display: none">
Server fields here
</div>
Then you can do something like this with your jQuery handler:
$('input[name="client"]').click(function() {
if($(this).attr('id') == 'client') {
$('.client').show();
$('.server').hide();
} else {
$('.client').hide();
$('.server').show();
}
});
if you do not want to code the html and show/hide it, but you prefere to generate it with jquery, you can also use this solution:
http://jsfiddle.net/fauv9/1/
<button id="primary">Process</button>
<form method='post'>
<h4>Process</h4>
<fieldset><legend>process</legend>
<input id="client" value="TestClient"type="radio" name="cli_srv">
<label for="client">TestClient</label>
<input id="server" value="TestServer" type="radio" name="cli_srv">
<label for="server">TestServer</label>
</fieldset>
<fieldset id="form_process">
</fieldset>
</form>
<button form="form_process">Submit</button>
and
$("#primary").click(function(){
$("form").show()
});
var form= $('#form_process');
$("#client").click(function(){
form.html(null);
form.append('<label for="cli_name">name</label><input value="name" id="cli_name"><br>')
form.append('<label for="cli_id">id</label><input value="id" id="cli_id"><br>')
// etc...
})
$("#server").click(function(){
form.html(null);
form.append('<label for="cli_name">address</label><input value="address" id="address"><br>')
form.append('<label for="srv_id">id</label><input value=" server id" id="srv_id"><br>')
// etc...
})
I need some help please
This is the html
<div>
<p>match1</p>
teamA <input type="radio" name="match1" onclick="update('ab');" />
teamB <input type="radio" name="match1" onclick="update('ba');" />
<p>match2</p>
teamC <input type="radio" name="match1" onclick="update('ad');" />
teamD <input type="radio" name="match1" onclick="update('dc');" />
</div>
<script>
update(results){.................}
</script>
I have this html so what I want I to know is
How can I disable the radio button once the user clicks on it
because the update() function changes the values when user clicks on radio button
if he keeps clicking like that then values change each time he clicks
or if he clicks on sibling radio button
so please can anyone tell me how to disable radio button
once user clicks on it
like for instance in match1
if user selects teamA radio button then i want to disable both teamA and teamB radio buttons
same for match2 if he clicks then disable the clciked radio and sibling radio aswell
Thanks for reading this can anyone help me please
I can use plain js, jquery or libraries
Use this:
$(":radio").click(function(){
var radioName = $(this).attr("name"); //Get radio name
$(":radio[name='"+radioName+"']").attr("disabled", true); //Disable all with the same name
});
What we're doing, is, when a user clicks a radio button, disable all radios with the same name.
Hope this helps.
Cheers.
Using Javascript, you can use a solution like this:
document.getElementById("IDOfButtonElement").onclick = function(){
document.getElementById("IDOfButtonElement").disabled=true;
}
jsfiddle example
http://jsfiddle.net/nhZXg/
code
$(":radio").click(function(){
$(this).attr('disabled','disabled');
});
this is the general way of doing it.
jQuery("input:radio").attr('disabled',true);
or
jQuery("input:radio").attr('disabled','disabled');
Try this:
this.setAttribute('disabled','disabled');
I suggest you to add label tag around your inputs. It cause when user clicks on the text radio button changes.
<label>teamA <input type="radio" name="match1" onclick="update('ab');" /></label>
onclick="update('ad', this);"
function onclick(word, element){
$(element).attr('disabled', 'disabled');
}
I am having a bit of trouble trying to figure out how to get a certain part of my code to work.
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" onclick="selectAll(document.wizard_form, this);">
<label for="check_all_1" onclick="toggleCheckbox('check_all_1'); return false;">Select All</label>
This is my HTML which works as it should (clicking the text will click the box). The javascript for it is pretty simple:
function toggleCheckbox(id) {
document.getElementById(id).checked = !document.getElementById(id).checked;
}
However I want the onclick to happen for the input when the label is what makes the checkbox to be clicked. At this current time the onClick js does not go. What is one suggestion on how to do this?
I tried to add the onclick of the input to the onclick of the label but that doesn't work.
Any suggestions/solutions would be wonderful.
How about putting the checkbox into the label, making the label automatically "click sensitive" for the check box, and giving the checkbox a onchange event?
<label ..... ><input type="checkbox" onchange="toggleCheckbox(this)" .....>
function toggleCheckbox(element)
{
element.checked = !element.checked;
}
This will additionally catch users using a keyboard to toggle the check box, something onclick would not.
Label without an onclick will behave as you would expect. It changes the input. What you relly want is to execute selectAll() when you click on a label, right?
Then only add select all to the label onclick. Or wrap the input into the the label and assign onclick only for the label
<label for="check_all_1" onclick="selectAll(document.wizard_form, this);">
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All">
Select All
</label>
You can also extract the event code from the HTML, like this :
<input type="checkbox" id="check_all_1" name="check_all_1" title="Select All" />
<label for="check_all_1">Select All</label>
<script>
function selectAll(frmElement, chkElement) {
// ...
}
document.getElementById("check_all_1").onclick = function() {
selectAll(document.wizard_form, this);
}
</script>
jQuery has a function that can do this:
include the following script in your head:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
(or just download the jQuery.js file online and include it locally)
use this script to toggle the check box when the input is clicked:
var toggle = false;
$("#INPUTNAMEHERE").click(function() {
$("input[type=checkbox]").attr("checked",!toggle);
toggle = !toggle;
});
That should do what you want if I understood what you were trying to do.