In my form I have several checkboxes. All selected checkbox values should be written in firebase database. However, cannot manipulate the checkboxes. My code does not take the checkbox values. It does not appear on firebase. My form looks like this [![Form][1]][1]
[1]: https://i.stack.imgur.com/8FEN4.png
HTML Code
<td>
<label>
<input class="paint" id = "paint" value="Anti-Fungus Paint" type="checkbox" unchecked> Anti-Fungus Paint
</label>
<label>
<input class="paint" id = "paint" value="Emulsion Paint" type="checkbox" unchecked> Emulsion Paint
</label>
<label>
<input class="paint" id = "paint" value="Anti-Corrosive Paint" type="checkbox" unchecked> Anti-Corrosive Paint
</label>
<label>
<input class="paint" id = "paint" value="All in one Paint" type="checkbox" unchecked> All in one Paint
</label>
</td>
Javasript
document.getElementById('formBid').addEventListener('submit',function(e){
e.preventDefault();
var id=Date.now(); //generating a unqiue id
set(ref(db,'quotes/' + id),{
paint:document.querySelectorAll('input[id="paint"]:checked'),
});
alert('Quote Sent To Client');
formBid.reset();
first, you should difference the id of each checkbox, the id should be unique to make it works.
I usually use getElementById to get each value because it's easier for me.
Related
Hi I have three radio input fields with same name but different ng-models:
<label>
<input type="radio"name="deliveryAddress"
ng-model="CC.OrderDetailsModel.IsNewDeliveryAddress">
Save address to profile for use on future orders
</label>
<label>
<input type="radio"name="deliveryAddress"
ng-model="CC.OrderDetailsModel.ExistingDeliveryAddressUpdate">
Update Existing Delivery Address
</label>
<label>
<input type="radio"name="deliveryAddress"
ng-model="CC.OrderDetailsModel.UseForThisOrderOnly">
Use address only for this order
</label>
I want to make when input is check that has value true otherwise false
Of this three ng-model only one can have true value. Something like this:
CC.OrderDetailsModel.IsNewDeliveryAddress: false,
CC.OrderDetailsModel.ExistingDeliveryAddressUpdate: false,
CC.OrderDetailsModel.UseForThisOrderOnly: true
As you explained in comments if you want to keep your logic, you can add a ng-change event on your inputs to set values:
<label>
<input type="radio" name="deliveryAddress"
ng-model="CC.OrderDetailsModel.IsNewDeliveryAddress"
ng-change="change(CC.OrderDetailsModel.IsNewDeliveryAddress)">
Save address to profile for use on future orders
</label>
<label>
<input type="radio" name="deliveryAddress"
ng-model="CC.OrderDetailsModel.ExistingDeliveryAddressUpdate"
ng-change="change(CC.OrderDetailsModel.ExistingDeliveryAddressUpdate)">
Update Existing Delivery Address
</label>
<label>
<input type="radio" name="deliveryAddress"
ng-model="CC.OrderDetailsModel.UseForThisOrderOnly"
ng-change="change(CC.OrderDetailsModel.UseForThisOrderOnly)">
Use address only for this order
</label>
The change() function will set variables to false and then the selected one to true:
$scope.change = function(changed) {
CC.OrderDetailsModel.IsNewDeliveryAddress = false;
CC.OrderDetailsModel.ExistingDeliveryAddressUpdate = false;
CC.OrderDetailsModel.UseForThisOrderOnly = false;
changed = true;
}
I would suggest to use only one variable for all your radio button, as adviced by Angular for input[radio]:
<input type="radio" name="deliveryAddress" ng-model="deliveryAddress" value="newDeliveryAddress"/>
<input type="radio" name="deliveryAddress" ng-model="deliveryAddress" value="existingDeliveryAddressUpdate"/>
<input type="radio" name="deliveryAddress" ng-model="deliveryAddress" value="useForThisOrderOnly"/>
Here is just change the value set in ng-model. You can then do your treatment based on this value.
Try it on Plunker
I'm having problems getting the radio button value when the form is submitted. I thought that when the form is submitted it would get the final selection that user made but it appears it doesn't recognize which one is selected.
On initial load: This is inside my form
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
in my submit handler
$(".aboutmeQuestions").on("submit", function(e){
e.preventDefault();
var values = {};
var $inputs = $(".aboutmeQuestions :input").not(":submit");
$inputs.each(function(){
values[this.name] = {answer : $(this).val()};
});
//I thought the above would get the radio buttons but I think it got the last choice as the selected one no matter what was chosen. so I tried below because I thought that the checked attribute would change automatically.
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
In my EJS:
<div id="question1">
<label> <%=aboutUser.question1.question%> </label>
<div class = "radioButtons">
<span>Mostly on-line stores <input type="radio" name="<%=aboutUser.question1.name%>" value="on-line" <% if(aboutUser.question1.answer == "on-line"){%> checked <%}%>> </span>
<span>mostly physical stores <input type="radio" name="<%=aboutUser.question1.name%>" value="physical" <% if(aboutUser.question1.answer == "physical"){%> checked <%}%>> </span>
<span> About both equaly <input type="radio" name="<%=aboutUser.question1.name%>" value="both" <% if(aboutUser.question1.answer == "both"){%> checked <%}%> ></span>
</div>
</div>
I tested it out. After clicking on nothing and pressing the submit button I get for values object, question5[answer]: maybe" question1[answer]: "both" that should of been equal to nothing. It is always like that no matter what I click. I don't like that pleas help me fix it. I didn't think I have to use a change method.
Ps I save this data to DB and the inputs should be populated with answers so when I reload the page <span>
About both equaly<input name="question1" value="both" checked="" type="radio">
</span>. it shouldn't have been checked since I didn't select anything.
First, remove the checked attribute from all the checkboxes unless there is ONE that you want to be pre-selected and in that case add it to just that ONE.
There is no need to loop through the radio buttons to see which was checked. Just use the :checked pseudo-class. Change this:
$("input[type='radio']").each(function(){
console.log("this ",this);
if($(this).attr("checked")){
values[this.name] = {answer : $(this).val()};
}
})
to this:
var checkedRad = $("input[type='radio']:checked");
values[this.name] = {answer : checkRad.value};
or, if you don't need a reference to the checked radio button after getting its value::
values[this.name] = {answer : $("input[type='radio']:checked")};
$("input[type=radio]").on("click", function(e){
console.log($("input[type='radio']:checked").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div id="question1">
<label> Do you shop mostly on-line or at physical stores? </label>
<div class="radioButtons">
<span>
Mostly on-line stores
<input name="question1" value="on-line" type="radio">
</span>
<span>
mostly physical stores
<input name="question1" value="physical" type="radio">
</span>
<span>
About both equaly
<input name="question1" value="both" type="radio">
</span>
</div>
</div>
This question already has answers here:
How can I know which radio button is selected via jQuery?
(40 answers)
Closed 7 years ago.
I have two radio buttons with the same name but different values. I have to check before I submit my form that value selected id correct otherwise give message to user.
Here is my HTML code:
<td>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label><br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
</td>
Here is my JQuery that i tried to use:
var directed = $('input[name=directed]').each(function(){
alert($(this).val())
});
This code gave me all values for elements with the same name, I just need selected value. After that I have to check if that value is valid before submitting the form. If anyone know how to get just selected value please let me know. Thanks.
You can just use the :checked selector and val(): like this:
var directed = $('input[name=directed]:checked').val();
$('button').click(function() {
var directed = $('input[name=directed]:checked').val();
alert(directed);
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
<span><input type="radio" name="directed" value="1" id="directed_yes"></span>
<span>Yes</span>
</label>
<br>
<label>
<span><input type="radio" name="directed" value="0" id="directed_no"></span>
<span>No</span>
</label>
<br /><br />
<button>Get value</button>
I have a search page that uses a form and checkboxes to display results. When the page reloads with the new results, I want to display something like this at the top of the page so users can easily remove one of their selections:
X Blue X Red X Black
My checkboxes look like this:
<input type="checkbox" name="color[]" id="color_white" value="white">White
<input type="checkbox" name="color[]" id="color_blue" value="blue" checked="checked">Blue
<input type="checkbox" name="color[]" id="color_red" value="red" checked="checked">Red
<input type="checkbox" name="color[]" id="color_orange" value="orange">Orange
<input type="checkbox" name="color[]" id="color_purple" value="purple">Purple
<input type="checkbox" name="color[]" id="color_black" value="black" checked="checked">Black
How do I go about getting the selected checkboxes, and then duplicating them at the top of the page so a user can just click on the X to make it "uncheck?"
Click events and form submission is done in jquery, so I'm assuming that this can be done that way too. Can anyone help? Thank you!
I would suggest adding a blank div at the top
<div id="checked"></div>
And then on load create a button for each checked input
$(function(){
$('input[type=checkbox]').each(function(){
if($(this).attr('checked')=='checked'){
$('#checked').append('<input id="'+$(this).attr('id').substring(6)+'" type="button" value="'+$(this).attr('id')+'">')
}
});
$('input').on('click',function(){
var i='color_'+$(this).attr('id');
$('#'+i).prop('checked','');
$(this).remove();
});
});
If a button is clicked remove the check and remove itself.
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();