get data-attr from a form input checkbox using JS - javascript

If someone puts a checkmark, I want to get the data-price attribute. Nothing is appearing in the console.log. I tried using .prop('checked'), .data('checked'), and .attr('checked'). I am assuming something is wrong with the Syntax?
This articleGet data-price jquery code as below does not seem to work:
$(document).ready(function(){
if $('#pizzaOption').click(function() {
var price=$(this).data('price');
console.log(price);
});
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
Used this article to no success. https://medium.com/js-dojo/check-if-a-checkbox-is-checked-with-jquery-2843f97d4954 Code is below:
<script type= text/javascript>
$(document).ready(function() {
if ($('input[type=checkbox]').attr('checked') {
var price=$(this).data('price');
console.log(price);
}
}
</script>

You have lots of mistake in your code.
$(document).ready(function(){ {
if $('#pizzaOption').click(function() {
var price=$(this).data('price');
console.log(price);
});
You have { { in callback function of $(document).ready() and it is not closed with }); And you have if in your click event which results syntax error.
In your second code
<script type= text/javascript>
$(document).ready(function() {
if ($('input[type=checkbox]').attr('checked') {
var price=$(this).data('price');
console.log(price);
}
}
</script>
You have checked the attr('checked') but there is no event binded on it and will always result false because no checkbox is checked onload event and $(this).data('price'); is undefined because data-price on the parent element of the clicked checkbox.
And you have click event on '#pizzaOption' according to your question you need to bind the click event on checkbox here is an example:
$(document).ready(function(){
$('#pizzaOption>input[type="checkbox"]').click(function() {
var price=$(this).closest("#pizzaOption").data('price');
console.log(price);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
Another example:
$(document).ready(function(){
$('#pizzaOption>input[type="checkbox"]').click(function() {
if ($(this).is(':checked')) {
var price=$(this).closest("#pizzaOption").data('price');
console.log(price);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="" id="pizzaOption" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>

<form action="" id="pizzaOptions" data-price="5">Large Pizza <br>
<input type="checkbox" value="sausage">Sausage<br>
<input type="checkbox" value="pepperoni">Pepperoni<br>
<input type="checkbox" value="mushrooms">Mushrooms<br>
<input type="submit" value="Submit">
</form>
<script>
// wait until document is ready
$(document).ready(function(){
// For every checkbox checked inside form
$('#pizzaOptions input[type="checkbox"]').click(function(){
// display value
console.log($(this).val())
// now if you want to get the price you should
console.log($('#pizzaOptions').attr('data-price'))
})
})

Related

Extract from JS to url

But I would be interested in how I can send this result from the js as a get
<form method="GET" action="order2.php">
<input type="checkbox" name="obj" price="5" value="1" >5
<input type="checkbox" name="obj" price="15" value="2">15
<input type="checkbox" name="obj" price="20" value="3">20
<input type="submit" value="send">
<div id="test"></div>
<script type="text/javascript">
$(":input").change(function() {
var values = $('input:checked').map(function () {
return $(this).attr('price');;
}).get();
var total = 0;
$.each(values,function() {
total += parseFloat(this);
});
$("#test").text(total);
});
</script>
</form>
When I select inputs 1 and 2 so that the result is in url order2.php?price=20
$(":input").change(function() {
var values = $('input:checked').map(function () {
return $(this).attr('price');;
}).get();
var total = 0;
$.each(values,function() {
total += parseFloat(this);
});
$("#test").text(total);
$('form').attr('action', 'order2.php?price=' + total);
console.log ( $('form').attr('action') ) ;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
But I would be interested in how I can send this result from the js as a get
When I select inputs 1 and 2 so that the result is in url order2.php?price=20
<form method="GET" action="order2.php">
<input type="checkbox" name="obj" price="5" value="1" >5
<input type="checkbox" name="obj" price="15" value="2">15
<input type="checkbox" name="obj" price="20" value="3">20
<input type="submit" value="send">
<div id="test"></div>
</form>
From your description that when you select option 1 and 2, you have the sum of the options as the price. I'll break this down into steps:
You have to sum the selected options
Construct your query param
Use Ajax to make your get request
This guides through how to do Ajax tutorial for post and get.
Hope this helps...
When a form submits, it will append all of it's inputs to the query string or post data (depending on the request type). A very simple way to add another field parameter called price with the sum is just to add a hidden input and update that dynamically with the sum.
Notice that I remove the name attribute from the checkboxes. I did this so that they wouldn't be send on the form submission.
I also replaced your forEach with a reduce() as it is more functional and you can chain it with the map()
$("#myform input").change(function() {
var total = $('input:checked').map(function () {
return $(this).attr('price');
}).get().reduce(function(sum, value) {
return sum + parseFloat(value);
}, 0);
$(".price").val(total);
$(".price").html(total);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myform" method="GET" action="order2.php">
<input type="checkbox" price="5" value="1" >5
<input type="checkbox" price="15" value="2">15
<input type="checkbox" price="20" value="3">20
<input type="hidden" name="price" class="price"/>
<input type="submit" value="send">
</form>
<span class="price"></span>

Clear form using a checkbox

I am trying to use a checkbox to clear a form but I do not want the reset to clear the checkbox itself. The code I am using is as follows:
<input name="no_cage" id="no_cage" type="checkbox" value="1" onclick="this.form.reset();">
When I click on the checkbox it clears the form fine but unfortunately, also clear itself too.
The checkbox also updates a db with a 1 if checked or a 0 if unchecked. So I need it within the form and it needs to be able to toggle between checked and unchecked.
There are two ways to do this:
Create a javascript function to reset the form and then check the checkbox again to true.
Using JQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).on('change', '#no_cage', function() {
if(this.checked) {
document.getElementById("client").reset();
this.checked = true;
}
});
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" value="1"> CLEAR
</form>
Using Javascript:
<script type="text/javascript">
function clearform(){
if (document.getElementById("no_cage").checked == true){
document.getElementById("client").reset();
document.getElementById("no_cage").checked = true;
}
}
</script>
<form id="client">
<input type="text">
<input id="no_cage" type="checkbox" onclick="javascript:clearform();"> CLEAR
</form>
OR,
keep the checkbox out of the form
<script type="text/javascript">
function clearform(){
document.getElementById("client").reset();
}
</script>
<form id="client">
<input type="text">
</form>
<input id="no_cage" type="checkbox" value="1" onclick="javascript:clearform();"> CLEAR
I don't know if you want it this way, but I change the code that if checkbox is checked than clear form else it won't. Here the code
<form id ="myForm" name = "test">
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
<input type ="text"/>
</form>
<input name="no_cage" id="no_cage" type="checkbox" onclick="resetForm()">
<script type="text/javascript">
function resetForm()
{
if (document.getElementById("no_cage").checked == true)
{
document.getElementById("myForm").reset();
}
}
</script>
<form id="myForm">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br><br>
<input type="checkbox" id="box"onclick="myFunction()" value="Reset form">reset
</form>
<script>
function myFunction() {
document.getElementById("myForm").reset();
document.getElementById("box").checked = true;
}</script>
hope it helps

JQUERY: Change value from text input having a checkbox selected

I need to change the value of a text input only if a checkbox is selected. Both inputs (text and checkbox) have the same class:
<label for="text_to_apply">Write your text: </label>
<input type="text" id="text_to_apply" name="text_to_apply" value="">
<button type="button" id="btn_apply">Change</button>
<form id="theform">
<input type="text" value="1" id="one1" class="one"><input type="checkbox" id="one1_" class="one"><br>
<input type="text" value="1" id="one2" class="one"><input type="checkbox" id="one2_" class="one"><br>
<input type="text" value="1" id="one3" class="one"><input type="checkbox" id="one3_" class="one"><br>
<input type="text" value="1" id="one4" class="one"><input type="checkbox" id="one4_" class="one"><br>
<input type="text" value="2" id="two1" class="two"><input type="checkbox" id="two1_" class="two"><br>
</form>
</div>
<script>
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('.one input:checked')) {
$('#theform').find('.one:text').attr('value', mytext);
}
});
</script>
</body>
I am running out of ideas. Please Help!
Thanks!!
If I got your question right - it will look like this:
$('#btn_apply').click(function() {
if ($('#yourCheckboxId').is(':checked')){
$('#inputId').val('some text you want');
}
});
Here is fiddle http://jsfiddle.net/Goodluck/2XBcK/
Try
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
$('#theform').find('input:checked').each(function(){
$(this).prev().val(mytext);
});
});
DEMO
There is no :text in jQuery that I'm aware of. Presuming your HTML stays the same, you can use the .prev() method to target the input before each input:checked.
$('#btn_apply').click(function() {
var mytext = $('#text_to_apply').val();
if ($('#theform').find('input:checked')) {
$('#theform').find('input:checked').prev('input').attr('value', mytext);
}
});
Fiddle: http://jsfiddle.net/willthemoor/5qmH8/

how to get the value of the hidden fields in here after the radio button is clicked

Am trying to get the value of the hidden input fields on every click of a radio button. I have just posted a single div. I have a multiple div with same structure. I have successfully obtained the value of radio button but I want to get the value of hidden input now.
<div class="QA">
<h1> First Question</h1>
<input type="radio" id="check" name="q" value="A">Options 1</input>
<input type="radio" id="check" name="q" value="B">Options 2</input>
<input type="radio" id="check" name="q" value="C">Options 3</input>
<input type="radio" id="check" name="q" value="D">Options 4</input>
<input type="hidden" id="result" value="B" />
<br/>
<div id="result"></div>
</div>
<script>
$(document).ready(function() {
$("input:radio").change(function() {
checkResult(this);
});
});
function checkResult(el)
{
$this=$(el).parent("div.QA");
$this.slideUp();
}
</script>
Maybe you could try removing the hidden input entirely and indicate the correct answer using a data-* attribute. Something like:
<div class="QA" data-answer="B">
Then in your checkResult function you could retrieve this value using
function checkResult(el)
{
$this=$(el).parent("div.QA");
var answer = $this.data("answer");
$this.slideUp();
}
function checkResult(el)
{
$this = $(el).parents("div.QA");
$this.slideUp();
var x = $this.find('#result').val(); //find value of hidden field in parent div
}
Change your markup
multiple id's should not be used. Use class instead.
<input type="radio" id="check" name="q" value="A">Options 1</input>
to
<input type="radio" class="check" name="q" value="A">Options 1</input>
var $hidden=$(el).siblings("input[type='hidden']");
BTW you have lot of elements with same ID, not good
You can get the value of the hidden element by it's id.
var hiddenValue = $("#result").val();
You can use this in hidden function
function checkResult(el)
{
var hiddenValue = $("#result").val();
alert(hiddenValue);
}

Set input fields to the current value of label elements

How can I get the current value of the label elements within function showEditionBlock() and set them to the corresponding input fields? The function will show the "edit" div, but the inputs are not getting the original values of the labels.
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
</head>
<script>
$(document).ready(
function()
{
$("#companyNameText").keyup(
function()
{
$("#companyNameLabel").html(this.value);
});
$("#companyCountryText").keyup(
function()
{
$("#companyCountryLabel").html(this.value);
});
});
function showEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeIn('slow', function(){
$(this).css('display', 'inline');
});
}
function hideEditionBlock(){
//$("div#edit").css('display','block').fadeIn("slow");
$("div#edit").fadeOut('slow', function(){
$(this).css('display', 'none');
});
}
</script>
<body>
<div id="preview">
<fieldset>
<label id="companyNameLabel" class="workExperience">
This is my company
</label>
<label id="companyCountryLabel" class="workExperience">
This is my company Country
</label>
<input type="button" value="edit" onclick="showEditionBlock();"/>
</fieldset>
</div>
<div id="edit" style="display:none;">
<fieldset>
<label>Company Name: </label>
<input type="text" id="companyNameText" />
<label>Company Country: </label>
<input type="text" id="companyCountryText" />
<input type="button" value="Ok" onclick="hideEditionBlock();"/>
</fieldset>
</div>
</body>
</html>
You should assign the innerHTML of the labels to the values of the inputs. In plain ol' Javascript you can do something like:
document.getElementById("companyNameText").value =
document.getElementById("companyNameLabel").innerHTML;
document.getElementById("companyCountryText").value =
document.getElementById("companyCountryLabel").innerHTML;
Using jQuery, this is the same:
$("#companyNameText").val($("#companyNameLabel").html());
$("#companyCountryText").val($("#companyCountryLabel").html());

Categories