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...
})
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>
I have a question about button control and form control. So, I wanted to show data inside field of the form according to the button clicked.
For example:
Button 1 clicked -> show the text field inside the form with text like "you clicked button 1".
Button 2 clicked -> show the text field inside the form with text like "you clicked button 2".
Maybe someone here can give an example.
Thank you.
Just Use jquery and capture the all button click event and get the name of clicked button and set the value to msg text filed like this .
$('button').click(function()
{
$('#msg').val("you clicked " +$(this).attr('name'));
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" >
msg : <input type="text" name="msg" id="msg" >
<button name="button1" id="button1" >button1</button>
<button name="button2" id="button2" >button2</button>
<span id="msg"> </span>
</form>
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.
Currently the below piece of code gives me a textbox and an "add" button. While clicking on add button, a new textbox gets generated below the first textbox. clicking on "add" again adds another textbox and so on. But currently the new textbox does not have "add" button. i want an "add" button to each textbox as well. I also want a delete button for each textbox and clicking on it will delete that particular textbox in that row. Also, i want a validation that more than 10 textboxes will not be allowed on the click of "add" button.
Could aNY of you please help !! Coding in both jquery and javascript would be appreciable.
HTML CODE :
<div id="inputs">
Name : <input type='text' name='name'>
<button onclick="getinput()">Add</button>
</div>
Javascript code :
function getinput()
{
var name="<br> <input type='text' name='name'>";
$("#inputs").append(name);
}
you could do something like this : http://jsfiddle.net/yq670z0d/1/
<div id="inputs">
<div class="input">
Name : <input type='text' name='name'/>
<button class="addbox">Add</button>
</div>
</div>
$("#inputs").on('click','.addbox',function(){
if($('.input').length < 10){
$(this).parent().clone().appendTo('#inputs');
}
});
Only jQuery, but quite short. the idea is to copy the div with your input and button, and then add it to your div inputs.
for your delete button, you just have to add a button with a delete class, and in another click listener, call the jQuery function remove() for the specified div. for instance :
<div id="inputs">
<div class="input">
Name : <input type='text' name='name'/>
<button class="removebox">Remove</button>
</div>
</div>
$("#inputs").on('click','.deletebox',function(){
$(this).parent().remove();
});
I have a function using jquery that updates a form when an image is click.
I need to add to that function so that a specified radio button is selected.
How can I select a radio button using jquery please?
UPDATE:
I'll explain further...I have overlayed an image and hid the radio button...so what the user clicks on an image it will check the selected radio.
Here's how each radio looks like:
<label style="display: inline; " for="select_theme_a">
<img src="images/icons/theme1.png" />
<input checked="checked" class="select_control" id="select_theme_a" name="select_theme" type="radio" value="a" onclick="return submitForm();" style="display:none" />
</label>
There's 4 radio buttons .. 4 different images to click on.
Hope this helps
How can I select a radio button using jquery please?
You can use attr method like this:
$('#radio-id').attr('checked', true);
If radio element is inside same parent element as image than you can use this piece of code inside function that handles image click event:
$(this).parent().find(":radio").attr('checked', true);