i have hidden variable with default value "on" , i want to change the text of another button from Disable to Enable according to this hidden value , if the hidden field value is "on" the button text is "Disable" and vice verse . i have tried but my solution doesn't work
hidden field
<input name="hiddenV" type="hidden" id="hiddenValue<%=ud.getUserId()%>" value="on" />
button
<input type="button" id="delUserButton<%=ud.getUserId()%>" onclick="openDelDiv(<%=ud.getUserId()%>, '<%=ud.getUserName()%>'); change(this.id);" value="Disable"/>
js function
function change(btn) {
var hiddenValue = document.getElementsByName("hiddenV")[0];
var disButton = document.getElementById(btn);
if (hiddenValue.value === "on")
disButton.value = "Disable";
else
disButton.value = "Enable";
}
OpendelDev() : it's a popup dialog like ( are you sure you want to disable this user) with ok button that causes the page to reload
function openDelDiv(userId, userName) {
$("#userId_delete").val(userId);
$("#userName_delete").text(userName);
$("#delUserDiv").bPopup();
}
but put in mind that the button is placed in for loop inside a jsp page so the id for every button will be different
I think you are actually faking a <input type="radio"/> here.
The goal is then to have an input for each possible value, along with a list of buttons to toggle them. Then, all you have to do is show the buttons you want (ie: show "enable" button if status "disabled" is checked and vice-versa).
<input type="radio" class="input-field" name="status" value="enabled" checked="checked" id="a"/>
<input type="radio" class="input-field" name="status" value="disabled" id="b"/>
<ul class="buttons">
<li>
<label class="enabling" for="a">
<button>Enable</span>
</label>
</li>
<li>
<label class="disabling" for="b">
<span>Disable</span>
</label>
</li>
</ul>
In CSS:
.input-field[value="enabled"]:checked ~ ul.buttons label.enabling,
.input-field[value="disabled"]:checked ~ ul.buttons label.disabling {
display: none;
}
(not actually run & tested, but the spirit is there)
Related
I have a bunch of radio-buttons wrapped into div-s, label-s and others. A simplified version would be this:
<div>
<label for="rb__1">
<input type="radio" name="rb__1" onclick="onRadioButtonClick(event)" value="some_val__1" />
<span style="....">my rb__1</span>
</label>
</div>
<div>
<label for="rb__2">
<input type="radio" name="rb__2" onclick="onRadioButtonClick(event)" value="some_val__2" />
<span style="....">my rb__2</span>
</label>
</div>
<div>
<label for="rb__3">
<input type="radio" name="rb__3" onclick="onRadioButtonClick(event)" value="some_val__3" />
<span style="....">my rb__3</span>
</label>
</div>
Handler:
<script>
function onRadioButtonClick(event) {
/* handler; it may read 'value' of the current radio-button and other things */
}
</script>
I want to add onclick handler to each div as well such that clicking on it would result to the same behaviour: an appropriate radio button would become selected and handled the same way as if a click occured on a radio button itself. And all of this with a smallest amount of copy-paste possible.
I can't simply add onclick on a div because there're things that a handler reads from event and that are specific to a radio button.
And I don't want unneccesary if (clickOnDiv) then... else if (clickOnRadio) then... either.
How to do it in a proper way?
You use id and for attributes. id attribute gives your input type an id and for attribute on label finds any input matching the same name. If their name match, you get the desired result.
Also in a group all radio buttons should have the same value for name attribute otherwise, you will be able to select multiple items.
I am not adding the toggle functionality to the radio button but you can do that using JavaScript.
<input type="radio" id="radio-button" name="radio">
<label for="radio-button" class="radio-btn-1">Radio Button</label>
<input type="radio" id="radio-button-2" name="radio">
<label for="radio-button-2" class="radio-btn-2">Radio Button 2</label>
Instead of using div tag as top level, i would suggest you to use label element.
Value of for property of label and id property of input tag must be same. So when user clicks on label, corresponding radio element will be selected/unselected and an onchange event will be fired.
function onRadioButtonClick(e){
console.log(e.target.value);
}
<label for="rb__1">
<input id="rb__1" type="radio" name="rb__1" onchange="onRadioButtonClick(event)" value="some_val__1" />
<span style="....">my rb__1</span>
</label>
<label for="rb__2">
<input id="rb__2" type="radio" name="rb__2" onchange="onRadioButtonClick(event)" value="some_val__2" />
<span style="....">my rb__1</span>
</label>
To use the div elements as listeners for a click event, you will have to have conditionals to check the event being fired, being three potential elements other than the input => LABEL, SPAN or DIV.
Each of these will have to be handled differently using the event especially if you want separate things that will be relative to the element the event actually is. The div and label we can simply query the input selector as it will be a child, whereas the span we have to target the parent and then get its first child, so the conditional will be different than the proceeding two.
const parent = document.querySelectorAll('.parent')
function selectInput(e) {
$this = e.target;
let input = $this.querySelector('input[type="radio"]')
$this.tagName === "DIV" ?
input.checked === true ?
input.checked = false :
input.checked = true :
null;
$this.tagName === "LABEL" ?
input.checked === true ?
input.checked = false :
input.checked = true :
null;
$this.tagName === "SPAN" ?
$this.parentNode.children[0].checked === true ?
$this.parentNode.children[0].checked = false :
$this.parentNode.children[0].checked = true :
null;
console.log($this.tagName)
}
parent.forEach(div => div.addEventListener('click', selectInput))
<div class="parent">
<label for="rb__1">
<input type="radio" name="rb__1" value="some_val__1" />
<span style="....">my rb__1</span>
</label>
</div>
<div class="parent">
<label for="rb__2">
<input type="radio" name="rb__2" value="some_val__2" />
<span style="....">my rb__2</span>
</label>
</div>
<div class="parent">
<label for="rb__3">
<input type="radio" name="rb__3" value="some_val__3" />
<span style="....">my rb__3</span>
</label>
</div>
I am wanting to create the following using CSS, HTML and JavaScript
Course1 //dropdown selection//
....
Course2 //dropdown selection//
.....
WINNER
(RADIO checked for Course1) OR (RADIO clicked for Course2)
//automatically populated from either Course1 or Course2 depending on Radio checked//
but my dropdown selection and radio selection hamper each other.
When I have the name from the radio the same "winnerselected" the radio works, but the copying from the course1 or course2 doesn't work.
Maybe someone has created code like this somewhere else and knows how to get around it?
Any assistance will be appreciate.
code as follows:
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
Course 1
<input id="myInput" type="text" name="golfcoursename1" placeholder="Golf
Course">
<form autocomplete="off" action="/action_page.php">
<div class="autocomplete" style="width:300px;">
Course 2
<input id="myInput1" type="text" name="golfcoursename2" placeholder="Golf
Course">
</div>
<p>
WINNER
<p>
<input type="radio" id="Course1" name="winnerselected" value="Course1"
onclick="FillWinner(this.form)">
<label for="Course1">Course 1</label>
<input type="radio" id="Course2" name="winnerselected" value="Course2"
onclick="FillWinner2(this.form)">
<label for="Course2">Course 2</label><br>
<input type="text" id="winner" name="Winner" placeholder="Winner">
<p>
</p>
<input type="submit">
</form>
<script>
function FillWinner(f) {
if(f.winnerselected.checked == true) {
f.winner.value = f.golfcoursename1.value;
if(f.winnerselected.checked == true)
f.winner.value = f.golfcoursename2.value;
}}
</script>
First, your HTML is not valid as you have a second form, with no closing tag, nested in the first one. Also, while is is legal to not close a p element, you really should for clarity sake.
Next, remove inline styles and inline JavaScript from your HTML. It just clutters up the code, causes redundancy, and is harder to read and maintain. Instead break your work into HTML, CSS, and JavaScript sections.
It's not clear what you exactly want, but my guess is that whichever radio button is clicked should dictate which textbox value becomes the winner. Based on that, see the comments inline below for a description of how the code works.
.autocomplete { width:300px; }
<!--Make sure the form has the autocomplete function switched off:-->
<form autocomplete="off" action="/action_page.php">
<div class="courses">
<div class="autocomplete">
Course 1 <input id="myInput" name="golfcoursename1" placeholder="Golf Course">
</div>
<div class="autocomplete">
Course 2 <input id="myInput1" name="golfcoursename2" placeholder="Golf Course">
</div>
</div>
<p>WINNER</p>
<p id="radioContainer">
<input type="radio" id="Course1" name="winnerselected" value="Course1">
<label for="Course1">Course 1</label>
<input type="radio" id="Course2" name="winnerselected" value="Course2">
<label for="Course2">Course 2</label><br>
<input type="text" id="winner" name="Winner" placeholder="Winner">
</p>
<input type="submit">
</form>
<script>
// Don't use inline HTML event attributes like onclick.
// Separate your JavaScript from your HTML
// Get references to the element(s) you'll need to work with
// Get all the elements that have a name attribute that starts with "golfcoursename"
const courseNames = document.querySelectorAll("[name^='golfcoursename']");
// Get all the elements that have a name attribute that is exactly "winnerselected"
const radioButtons = document.querySelectorAll("[name='winnerselected']");
const winner = document.getElementById("winner");
// Here's how to set up events in JS
const radCont = document.getElementById("radioContainer").addEventListener("click", fillWinner);
function fillWinner(event) {
// Look at the radiobuttons collection and get the index of the selected radio button from it.
const indexOfTextbox = Array.from(radioButtons).indexOf(event.target);
// Set the value of the winner textbox to textbox with the same index as the clicked radio button
winner.value = courseNames[indexOfTextbox].value;
}
</script>
Here is the Code I written
<form>
<input type="radio" name="cand" value="fr" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');"> Fresher<br><br>
<input type="radio" name="cand" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');"> Experienced<br><br>
<input type="button" onclick="location.href='http://google.com';" value="Next" />
</form>
If suppose user select option 1 (say: freshers) then Link 1 (Fresher form link) Should be open.
or If select option 2 i.e experienced then experienced link should open.
Please Provide Answer with explanation, I am new to HTML and JavaScript.
You need script to update the location.href' . Trigger a function on selecting radio button and update theonclickproperty usingsetAttribute` method
function updateLink(value) {
if (value === "fr") {
document.getElementById("next").setAttribute('onclick', "location.href='www.google.com'")
} else {
document.getElementById("next").setAttribute('onclick', "location.href='www:wikipedia.com'")
}
}
<form>
<input type="radio" name="cand" value="fr" onclick="updateLink(this.value)"> Fresher<br><br>
<input type="radio" name="cand" value="ex" onclick="updateLink(this.value)"> Experienced<br><br>
<input id="next" type="button" onclick="location.href='www.google.com';" value="Next" />
</form>
This demo is just based on your code. Using addEventListener is a better option than using inline event handler.
Do like this.
Try to submit the form and prevent the default behaviour of the form using e.preventDefault()
Then change the input button type with submit
And add the data-link attr for Each input .For applying with window targeted link after submit
How its work
if you submit the form .its find the checked radio button data-link then
apply with window.location.Finaly its redirect the respected url
$('from').on('submit',function(e){
e.preventDefault();
window.location.href = $('input:checked').attr('data-link');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form>
<input type="radio" name="cand" value="fr" data-link="Fresher"onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br>
<input type="radio" name="cand" data-link="Experienced" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br>
<input type="submit"/>
</form>
In the example below I add an attribute to each radio. When the user clicks on the button we fetch that attribute (data-href) and use window.location.href to transfer the user there. You can use value instead, if you find that better. Note that I removed the inline click-function and use an event for it instad.
$('#clickButton').click(function(){
var url = $('input[name=cand]:checked').data('href');
//Goto url
window.location.href = url;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="radio" name="cand" value="fr" data-href="https://www.stackoverflow.com" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br>
<input type="radio" name="cand" value="ex" data-href="https://stackoverflow.com/q/45627889/4949005" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br>
<input type="button" id="clickButton" value="Next" />
</form>
I have a Twitter Bootstrap form that has 6 vertical check boxes. I need to have an input form field each time they select a checkbox. It could be in the form of a popup or maybe something that appears out to the right of the checkbox. I figure this is some kind of javascript function but I have no idea how to do so. Any suggestions would be greatly appreciated. Each textbox if selected should have a field that pops up asking them for how many years experience they have in this certain field. This will info will be collected via $_POST variables. So each checkbox popup should have its own unique name so i can post it.
<div class="form-group">
<label class="col-md-4 control-label" for="positionsought">Position Sought</label>
<div class="col-md-4">
<div class="checkbox">
<label for="positionsought-0">
<input type="checkbox" name="positionsought" id="positionsought-0" value="Cutting">
Cutting
</label>
</div>
<div class="checkbox">
<label for="positionsought-1">
<input type="checkbox" name="positionsought" id="positionsought-1" value="Sewing">
Sewing
</label>
</div>
<div class="checkbox">
<label for="positionsought-2">
<input type="checkbox" name="positionsought" id="positionsought-2" value="Upholstery">
Upholstery
</label>
</div>
<div class="checkbox">
<label for="positionsought-3">
<input type="checkbox" name="positionsought" id="positionsought-3" value="Frame Department">
Frame Department
</label>
</div>
<div class="checkbox">
<label for="positionsought-4">
<input type="checkbox" name="positionsought" id="positionsought-4" value="Mill Room">
Mill Room
</label>
</div>
<div class="checkbox">
<label for="positionsought-5">
<input type="checkbox" name="positionsought" id="positionsought-5" value="Cushion">
Cushion
</label>
</div>
<div class="checkbox">
<label for="positionsought-6">
<input type="checkbox" name="positionsought" id="positionsought-6" value="Any">
Any
</label>
</div>
</div>
</div>
Although you already have found an answer, I believe that this would work better for your situation since you say you will have 6 checkboxes. This dynamically creates input fields for each checkbox by their names and removes them when the checkbox is unchecked.
First add this function to each checkbox onclick="dynInput(this);"
<input type="checkbox" name="check1" onclick="dynInput(this);" />
and add this to wherever you would like the inputs to display.
<p id="insertinputs"></p>
Then simply add this javascript function to your head.
<script type="text/javascript">
function dynInput(cbox) {
if (cbox.checked) {
var input = document.createElement("input");
input.type = "text";
var div = document.createElement("div");
div.id = cbox.name;
div.innerHTML = "Text to display for " + cbox.name;
div.appendChild(input);
document.getElementById("insertinputs").appendChild(div);
} else {
document.getElementById(cbox.name).remove();
}
}
</script>
JsFiddle here: http://jsfiddle.net/brL6gy7r/
You can use JavaScript here to do the job. When the checkbox is clicked and checked (because you can also check out.) a dialog will pop-up with all input-fields you want. You can change the dialog part to your desires. but this part is your main function:
$(document).ready(function () {
$('#chkBox').click(function () {
if ($(this).is(':checked')) {
// create input field
} else {
// if checkbox is not checked.. dont show input field
}
});
});
For a full demo on how to do this with a dialog, click this link and observe
http://jsfiddle.net/Runman44/5vy1m233/
Notice that you will need jQuery (and jQuery UI if you want to use the dialog like me)
There is a zero-JavaScript version that is dead simple and works in all major browsers. It takes advantage of the :checked pseudo-class and the adjacency selector. It works with an arbitrary number of checkboxes.
HTML:
<input type="checkbox" />
<input type="text" />
CSS:
input[type=text] {
visibility:hidden;
}
input[type=checkbox]:checked + input[type=text] {
visibility:visible;
}
here is the live demo
If you prefer, you can use display:none and display:inline rather than the visibility property.
The example I've provided assumes that the text field immediately follows the checkbox in the markup, but some variant of sibling/child selectors can be used to select it no matter where it is, as long as it is either a sibling or child (direct or indirect) of the checkbox.
I have 2 seperate fields with 4 radio buttons each.
Field nr1 has radio button unchecked by using jquery, field nr2 has the first radio button checked by default.
What i need is, if in field nr1 a radio button is checked, then it checks the same radio button in field nr2.
Here is how my html looks like:
<p class="form-row form-row-wide validate-required" id="billing_piegadatajs_field"><label for="billing_piegadatajs" class="">Piegādes veids <abbr class="required" title="vajadzīgs">*</abbr></label><br>
<input type="radio" name="billing_piegadatajs" value="Pasta Stacija" class="radio" style="width:10%" checked="checked"><span for="billing_piegadatajs">Pasta Stacija</span><br>
<input type="radio" name="billing_piegadatajs" value="Post24" class="radio" style="width:10%"><span for="billing_piegadatajs">Post 24</span><br>
<input type="radio" name="billing_piegadatajs" value="Kurjerdienests" class="radio" style="width:10%"><span for="billing_piegadatajs">Kurjerdienests</span><br>
<input type="radio" name="billing_piegadatajs" value="Saņemt uz vietas" class="radio" style="width:10%"><span for="billing_piegadatajs">Saņemt uz vietas ( Saldū )</span>
</p>
<br>
<tr class="shipping">
<th>Piegādes izmaksas</th>
<td>
<ul id="shipping_method">
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_flat_rate" value="flat_rate" checked="checked" class="shipping_method">
<label for="shipping_method_0_flat_rate">Pasta Stacijas: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_international_delivery" value="international_delivery" class="shipping_method">
<label for="shipping_method_0_international_delivery">Post 24: <span class="amount">€ 3.50</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_apg_shipping" value="apg_shipping" class="shipping_method">
<label for="shipping_method_0_apg_shipping">DLW Kurjeris: <span class="amount">€ 9.00</span></label>
</li>
<li>
<input type="radio" name="shipping_method[0]" data-index="0" id="shipping_method_0_local_pickup" value="local_pickup" class="shipping_method">
<label for="shipping_method_0_local_pickup">Uz vietas - Saldū (Bez maksas)</label>
</li>
</ul>
</td>
</tr>
I use this jquery to uncheck the field nr1 radio button when page is loaded.
jQuery(document).ready(function(){
jQuery('#billing_piegadatajs_field')
jQuery('#billing_piegadatajs_field').find('input[name="billing_piegadatajs"]').each(function() {
jQuery(this).prop('checked', false);
});
});
Here is a link to jsfiddle
You can acheive this in many many ways
One approach should be considering 2 set of radio
you have 2 sets already :
the first one share the class name 'radio'
the second one share the class name 'shipping_method'
The logic
1) add a click event on all radio of the first set
2) Get the order rank of the one we click on
3) force a click event on the radio button having the same index in the second set
// Track the click on the first set of radio
jQuery('.radio').on('click',function(){
// Get the element index , which one we click on
var indx = jQuery(this).index('.radio');
// Trigger a click on the same index in the second radio set
jQuery('.shipping_method')[indx].click();
})
there is the jsfiddle : http://jsfiddle.net/MMJRk/21/
First you need to find out which box is checked. The following link may help.
In jQuery, how do I select an element by its name attribute?
Then you need to loop through the next check boxes, comparing the value to the value you want for each box. When you find the one you want. Check that one.
Link for how to check box.
How to check a radio button with jQuery ?
Well, i have to admit it is not the most ideal way of getting what you want. But it does the trick: http://jsfiddle.net/veritas87/MMJRk/25/
jQuery('p.form-row input[type=radio]').on('change', function () {
var radioNumber = $(this).index('.radio');
$("ul#shipping_method input[type=radio]:eq(" + radioNumber + ")").prop('checked', true);
});
In short, when a radiobutton changes in p.form-row it will get the index of the clicked radiobutton and it will set the radiobutton in the second list of radiobuttons to checked.
I've updated your jsfiddle and now it works.
Basically, I assigned to each input (and its counterpart), an index using custom data attributes (data-index). I attached an event handler to the first group of inputs, and, based on the index of the checked one, I check the correct radiobutton in the second group:
$('#billing_piegadatajs_field input[type="radio"]').on('change', function() {
if (!this.checked) return;
var index = this.getAttribute('data-index');
$('#shipping_method input[data-index="' + index + '"]').prop('checked', true);
});