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();
Related
I am trying to use "+" and "-" buttons to allow the user to add or subtract the number of possible choices for each question in a multiple choice quiz creation app.
The max number of choices per question is 4, and the minimum is 2.
The issue I am coming up against is that after adding a choice, the subtract button cannot read the value of the last radio button.
Also, the values of the radio buttons are there because they are used in other parts of the application, not just for this functionality. Therefore it is important that the radio button choices are consecutive, starting with 0.
Thank you in advance for any tips.
Here is a Codepen, but the code I am using is also below: http://codepen.io/anon/pen/zKdzZv?editors=1010
HTML:
<div id="q-container">
<div class="qelem">
<h4>Question 1.)</h4>
<input type="text" class="question" style="width:400px"
placeholder=" Who was the 2nd president of the United States?">
<br>
<br>
<ul style="list-style:none;" class="choices">
<li><input type="radio" name="rad" value="0"><input type="text" class="choice" placeholder=" John Hancock"></li>
<li><input type="radio" name="rad" value="1"><input type="text" class="choice" placeholder=" Adam Smith"></li>
<li><input type="radio" name="rad" value="2"><input type="text" class="choice" placeholder=" John Adams"></li>
</ul>
<br>
<div class="btn-group btn-group-xs choiceAmt" role="group">
<button type="button" class="btn" id="add"><small><span class="glyphicon glyphicon-plus"></span></small></button>
<button type="button" class="btn" id="sub"><small><span class="glyphicon glyphicon-minus"></span></small></button>
</div>
</div>
</div>
JavaScript:
$("#add").click(function(){
var num;
var lastRadioVal = $(this).parents(".qelem").find("input:radio").last().val();
console.log("lastRadioVal = " +lastRadioVal);
num = lastRadioVal+1;
$(this).parents(".qelem").children(".choices").append(
'<li><input type="radio" name="rad" value="'+num+'">
<input type="text" class="choice"></li>'
);
if(lastRadioVal = 3){
$(this).prop('disabled',true);
}
if(lastRadioVal > 1){
$("#sub").prop('disabled',false);
}
console.log("lastRadioVal = " +lastRadioVal);
});
$("#sub").click(function(){
var lastRadioVal = $(this).parents(".qelem").find("input:radio").last().val();
console.log("lastRadioVal = " +lastRadioVal);
$(this).parents(".qelem").find("li").last().remove();
lastRadioVal--;
if(lastRadioVal = 1){
$(this).prop('disabled', true);
}
$("#add").prop('disabled', false);
console.log("lastRadioVal = " +lastRadioVal);
});
Why call a convoluted (and low performance) scanning selector like this? Perhaps you have a reason?
If it was me I would just add IDs to the buttons and simply call them directly.
$('#radioid').value();
something along those lines. Does that help? Finding parents/children and scanning down the dom till you find something should IMHO be avoided at all costs. Sometimes it's useful but really it creates a maintence nightmare when in a year pages get refactored and someone not aware of your dom scanning code changes the HTML and then your code starts running against their HTML and the fun of jquery truly begins.
does that help at all?
Using IDs will save your life in jQuery.
Instead of finding the last val of the radio elements, I called .length on children of the .choices ul, stored that in a variable on each button click, and used if statements, and it works as it should.
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
});
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'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/
Sorry for the ambiguous title, but it's quite hard to condense what I'm trying to do into a few words. Here's exactly what I'm trying to do:
I want to have a series of groups of checkboxes. One would be gender, with checkboxes for Male and Female, one would be Region, with checkboxes for North, East, South and West and so on.
The aim is to allow the user to select say, Male or Female, but as soon as they put a check in a checkbox of another group e.g. any of the Region checkboxes, all of their previous 'checks' from all other groups are removed.
The point is to only allow the user to select from one group of checkboxes at a time.
I can only think of checking which checkboxes have been marked on click using javascript, but was wondering if there was a simpler way which I may be missing.
I've also thought that maybe a hidden radio button for each group could work.
If anyone has a more elegant solution I'm eager to hear it.
Its been a long time since I've done any pure Javascript, libraries like jQuery make this kind of thing so easy. Anyway, something a bit like the following might work, you'd need to test it in a few browsers and tweak to what you need.
<form name="theForm">
<input type="checkbox" id="male" name="theGroup" onClick="clearGroup(this);">male
<input type="checkbox" id="female" name="theGroup" onClick="clearGroup(this);">female
<br />
<input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
<input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
<input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
<input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>
<script>
function clearGroup(elem) {
var group = document.theForm.theGroup;
for (var i=0; i<group.length; i++) {
if (group[i] != elem) {
group[i].checked = false;
}
}
}
</script>
Here is a working example to play around with.
You could do the equivalent thing in jQuery as simply as
$('input:checkbox').click(function() {
$(this).siblings(':checked').attr('checked', false);
});
and you have no browser compatibility issues to worry about.
Managed to figure it out with a little help from fearofawhack planet. Seems really simple now.
Heres a link to the JSFiddle http://jsfiddle.net/aeeN4/
if you have different groups you can use this code below.
<script>
function clearGroup(elem) {
//alert(elem.name);
var group = document.getElementsByName(elem.name);
for (var i=0; i<group.length; i++) {
if (group[i] != elem) {
group[i].checked = false;
}
}
}
</script>
<form name="theForm">
<input type="checkbox" id="male" name="theGroup2" onClick="clearGroup(this);">male
<input type="checkbox" id="female" name="theGroup2" onClick="clearGroup(this);">female
<br />
<input type="checkbox" id="north" name="theGroup" onClick="clearGroup(this);">north
<input type="checkbox" id="south" name="theGroup" onClick="clearGroup(this);">south
<input type="checkbox" id="east" name="theGroup" onClick="clearGroup(this);">east
<input type="checkbox" id="west" name="theGroup" onClick="clearGroup(this);">west
</form>