I have some multiple radio buttons on a page with a different id. Depending on the choosen value a upload button or a textbox must show up. But because it's 10 times almost the same code (the only difference is a number) I was looking for a solution where I can reuse the code.
Example of two radio groeps:
<input type="radio" name="typePhoto2" id="foto2" value="photo">
<input type="radio" name="typePhoto2" id="video2" value="video">
<input type="radio" name="typePhoto3" id="foto3" value="photo">
<input type="radio" name="typePhoto3" id="video3" value="video">
I known there is a way to use jQuery with a * to select multiple elements, but what I want is to use the value of '*' to provide which number is choosen.
$("[id^=typePhoto]").click(function(){
var value = [number after the id];
})
Is there a way to do this? Otherwise I have to copy paste 10 times the same code with only a number as difference.
You can always reach the id of the current target through the event object,
and then with a little regex you're done:
$("[id^='foto']").click(function(e){
var id = e.currentTarget.id
var value = id.match(/[0-9]$/)[0];
console.log(value)
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="typePhoto2" id="foto2" value="photo">
<input type="radio" name="typePhoto3" id="foto3" value="photo">
You need to fix the selector to target all element with name attribute value starts with typePhoto .then get the current id using clicked element context this and remove static part using .replace():
$("[name^=typePhoto]").click(function(){
var value = this.id.replace("foto","").replace("video","");
});
Working Snippet :
$("[name^=typePhoto]").click(function(){
var value = this.id.replace("foto","").replace("video","");
console.log(value);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="radio" name="typePhoto2" id="foto2" value="photo">
<input type="radio" name="typePhoto2" id="video2" value="video">
<input type="radio" name="typePhoto3" id="foto3" value="photo">
<input type="radio" name="typePhoto3" id="video3" value="video">
You could try:
$('[id*="typePhoto"]')
or
$('input[type="radio"]');
Cheers
A better way to do that would be to give them all the same class. For instance class="photo-button". then you could use:
$(".photo-button").click(function(){...})
Try like this
$( "input[name*='typePhoto']" ).click( function(){
// your code
});
Related
How to get the value field of HTML Control in Javascript?
Instead of picking the Id , I am trying to get the value which is 4875.
<input data-val="true" data-val-required="Required" id="ChangesInTreatYes" name="ChangesInTreat" type="radio" value="4875" /> Yes
<input id="ChangesInTreatNo" name="ChangesInTreat" type="radio" value="4876" /> No
if ($("input:radio[name='ChangesInTreat']:checked").length > 0) {
var isChecked1 = document.getElementById("ChangesInTreatYes").checked;
alert(isChecked1);
}
jQuery makes it simple -- for nearly all form elements, .val() will return the value of the element.
let toggleEl = $("input[name='ChangesInTreat']")
toggleEl.on("change", function(){
console.log($(this).val() );
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input data-val="true" data-val-required="Required" id="ChangesInTreatYes" name="ChangesInTreat" type="radio" value="4875" /> Yes
<input id="ChangesInTreatNo" name="ChangesInTreat" type="radio" value="4876" /> No
To do the same thing with plain old javascript:
let toggleEl = document.querySelectorAll("input[name='ChangesInTreat']")
// Go over each radio button, and add an event handler
toggleEl.forEach(function(element){
element.addEventListener("change", function(){
console.log(this.value)
})
})
<input data-val="true" data-val-required="Required" id="ChangesInTreatYes" name="ChangesInTreat" type="radio" value="4875" /> Yes
<input id="ChangesInTreatNo" name="ChangesInTreat" type="radio" value="4876" /> No
FYI, you are intermixing jQuery and javascript. Would suggest choosing one type and sticking with it.
Get value of radio using javascript by name:
var isChecked1 = document.querySelector("input[name='ChangesInTreat']:checked").value;
Get value of radio using jQuery by name:
var isChecked1 = $("input[name='ChangesInTreat']:checked").val();
I'm trying to build a simple feedback form. The user will answer a series of yes or no questions. If they choose no, then they will be provided with a comment form to include text.
Currently, I'm having problems with retrieving radio button values. I am trying to print them in the console, but nothing happens when I choose the appropriate choice. If the user chooses 'no', it needs to be able to remember the comment that will get submitted.
My JSFiddle is here: http://jsfiddle.net/787x18vx/
HTML
<p>You are providing feedback</p>
<form>
<div id="question-1">
<label for="question-1">Is this correct?</label>
<input type="radio" value="yes" name="choice-1" />Yes
<input type="radio" value="no" name="choice-1" />No
</div>
<div id="question-2">
<label for="question-2">Another question</label>
<input type="radio" value="yes" name="choice-2" />Yes
<input type="radio" value="no" name="choice-2" />No
</div>
<div id="question-3">
<label for="question-3">One more question</label>
<input type="radio" value="yes" name="choice-3" />Yes
<input type="radio" value="no" name="choice-3" />No
</div>
<br />
<button>Send Feedback</button>
</form>
jQuery
var firstInput = 'input[name=choice]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
console.log(firstInputValue);
console.log($('input[name="choice-1"]:checked').val());
console.log($('input[name="choice-2"]:checked').val());
// if value === 'no' show comment form
});
You are using input[name=choice] selector which is not exisiting.
Use input[type=radio] instead.
var firstInput = 'input[type=radio]';
var firstInputValue = $('input[name=choice-1]:checked').val();
$(firstInput).on('click', function() {
console.log(firstInputValue);
console.log($('input[name="choice-1"]:checked').val());
console.log($('input[name="choice-2"]:checked').val());
// if value === 'no' show comment form
});
Fiddle
var firstInput = 'input[name=choice]';
This is looking for something specifically with the name choice, which doesn't appear to be in your html.
There are two quick ways about this.
First, just change your selector:
$('input[type=radio]').on('click', function(){...
This will trigger the function on a click of any radio
Another way is with the wildcard selector:
var firstInput = 'input[name^=choice]';
The ^ should make is so any input with the name starting with choice gets selected.
This method should work, but targeting input[type=radio] is probably a better solution,
You are missing the -1 in your name
var firstInput = 'input[name=choice-1]';
Your selector is trying to get tags with name exactly equals 'choice'. You can search by prefix with the following
var firstInput = 'input[name|="choice"]';
This will get all tags which name starts with 'choice'
I got a piece of HTML:
<input type="radio" name="radioBtn" onChange="rdbtn()" value="100" isprm="true">
<input type="radio" name="radioBtn" onChange="rdbtn()" value="110" isprm="true">
and I want to pass the custom attribute value into a variable. Here is what I tried and does not work:
function rdbtn(){
var radioVal = $(this).val();
var radioPRM = $("input[id=radioVal]:checked").attr('isprm');
...
}
and
$('input[id=radioVal]').data("isprm");
No luck. Do you have any ideas how to make it work? Thanks.
Firstly, isprm is not a valid attribute so your HTML is invalid. If you need to store ancillary data with an element use a data-* attribute:
<input type="radio" name="radioBtn" onChange="rdbtn()" value="100" data-isprm="true">
<input type="radio" name="radioBtn" onChange="rdbtn()" value="110" data-isprm="true">
You can then use data() to retrieve the value:
var radioPRM = $('input[name="radioBtn"]:checked').data('isprm');
You need to prefix data- with custom attributes to work with .data(). Also you have to use name when using attribute value selector since you have not specified id of radio option and use name which you have specified i.e. radioBtn
Use
<input type="radio" name="radioBtn" onChange="rdbtn()" value="110" data-isprm="true">
Then
$('input[name=radioBtn]').data("isprm");
DEMO
I've got a series of radio buttons and a submit button:
<input type="radio" name="selectme_resubmit" id="selectme_resubmit1" value="first" /> <label for="selectme_resubmit1">Resubmit with the original submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit2" value="without" checked /> <label for="selectme_resubmit2">Resubmit without any submitter</label><br>
<input type="radio" name="selectme_resubmit" id="selectme_resubmit3" value="custom" /> <label for="selectme_resubmit3">Resubmit with a custom submitter:</label> <input type="text" name="selectme_custom_submitter" id="selectme_custom_submitter" /><br>
<input type="button" id="selectme_resubmit_button" name="selectme_resubmit2_button" value="Place a submit template" onclick="selectme_act(\'resubmit\')" />
I also have the following javascript (with jquery):
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
However, I get "undefined" in the console, even when I select something... what am I doing wrong?
I tested your code and the selector does work. The only issue I found was that you were escaping the ' character when it was not needed in the onclick event
you miss ready function
$().ready(function(){
var typeofsubmit = $("input[name=selectme_resubmit]:checked").val();
console.log(typeofsubmit);
});
please use ready function before your declaration
and check this link http://jsfiddle.net/FQGuu/
So I have a kind of problem: I need to remove "information" from tag to tag including text between it.
So somewhere in html is:
<input type="radio" rel="1" value="Surname1" name="lastnames">Surname1<br>
<input type="radio" rel="2" value="Name2" name="lastnames">Name2<br>
<input type="radio" rel="3" value="lol" name="lastnames">lol<br>
<input type="radio" rel="4" value="lol2" name="lastnames">lol2<br>
And for example:
var current_id = $('input:checked:radio').attr('rel');
$.get('index.php?delete_by_id='+current_id);
$("input:radio[rel='"+current_id+"']").remove();
So, after the GET to php is sent, I need to delete from the radio list deleted item. With input all ok, but with name next to him I have problems...
PS.
I know, that situation is stupid, but I don't have any time to rewrite it until tomorrow (exams)
Wrap the label with a span element.
<input type="radio" rel="1" value="Surname1" name="lastnames"><span>Surname1</span><br>
<input type="radio" rel="2" value="Name2" name="lastnames"><span>Name2</span><br>
Then while deleting, Get the next span and remove it as well
var item=$('input:checked:radio');
var current_id = item.attr('rel');
$.get('index.php?delete_by_id='+current_id,function(data){
item.remove();
item.next("span").remove();
});
It is always a good practice to keep HttpPost Operations for Delete/Update functions. Otherwise anybody can delete a record from your database if they know the item id, by simply executing your page with those querystrings in the browser.
Not sure exactly what you are trying to do and/or why it is not working, but consider writing the code like this:
var $selected_radio = $('input:radio:checked'); // store element reference
$.get('index.php?delete_by_id=' + $selected_radio.attr('rel'), function() {
// use a callback function to only remove if code succeeds
$selected_radio.remove();
});
EDIT: Looking back I see you want to remove the input along with its label. You just need to fix your HTML to be what it actually should be:
<label>
<input type="radio" rel="1" value="Surname1" name="lastnames"> Surname1
</label>
Which then makes the remove code in jQuery look like:
$selected_radio.closest('label').remove();
I ussually always use a label, to show text that is connected to a radio button:
<input id="radio1" type="radio" rel="1" value="Surname1" name="lastnames"><label for="radio1">Surname1</label><br>
<input id="radio2" type="radio" rel="2" value="Name2" name="lastnames"><label for="radio2>Name2</label><br>
<input id="radio3" type="radio" rel="3" value="lol" name="lastnames"><label for="radio3">lol</label><br>
<input id="radio4" type="radio" rel="4" value="lol2" name="lastnames"><label for="radio4">lol2</label><br>
Then you can do like this in your javascript code:
var current_rel = $('input:checked:radio').attr('rel'),
current_id = $('input:checked:radio').attr('id');
$.get('index.php?delete_by_id='+current_rel);
$('#' + current_id + ', label[for="' + current_id + '"]).remove();