I have searched through all of SOF and couldn't find any topic that matches my problem.
I have written an HTML form that I will use PHP to process later, but I have some options in the form that a user can choose. Here is the HTML code
<label for="FIELD6">Model Type: </label><br>
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" checked onclick="doMath()" />Normal Model<br>
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath()" data-clicked="no" />Workshop Model
<p id="total"></p>
So the user can choose between a Normal and Workshop Model. I am trying to set it so that when the user checks the workshopmodel radio button, it adds to the total price (specified in paragraph tags). Here is my attempt at my barely-known language, jQuery:
function doMath() {
var basePrice = 15;
var baseModel = 0;
var customModel = 5;
var modelTotal = ;
function workshopModel() {
if(getElementById("workshopmodel").click(function() {
modelTotal = basePrice + customModel;
}
}
function defaultModel() {
if(getElementById("basemodel").click(function() {
modelTotal = total basePrice + baseModel;
}
}
}
$("#total").html('<font color="black">Total Price:</font><font color="#09ff00">' + workshopModel() + '');
So I am trying to make it add to the basePrice in real time, and then print it in place of the ID marked "total" every time the user makes a change in selection (in real-time). So if the user chooses workshopmodel, the script will add 15 and 5, resulting in 20, and if they choose basemodel, the script will add 15 and 0, resulting in 15. I left the variable modelTotal undefined as it should be defined later on in the script. Can anyone help me out with this?
This should work how you want. Also, does not require jQuery.
function doMath() {
var basePrice = 15;
var baseModel = 0;
var customModel = 5;
var modelTotal;
if (document.querySelector('input[name="FIELD6"]:checked').value == "Normal Model") {
modelTotal = basePrice + customModel;
}
if (document.querySelector('input[name="FIELD6"]:checked').value == "Workshop Model") {
modelTotal = basePrice + baseModel;
}
console.log(modelTotal);
document.getElementById('total').innerHTML = '<span style="color:black">Total Price:' + modelTotal + '</span>';
}
<label for="FIELD6">Model Type:</label>
<br>
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" onclick="doMath()" />Normal Model
<br>
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath()" />Workshop Model
<div id="total"></div>
Here is a working example of what I think you are asking for.
<label for="FIELD6">Model Type:</label><br>
<input type="radio" id="basemodel" name="FIELD6" value="Normal Model" checked onclick="doMath(this)" />Normal Model<br>
<input type="radio" id="workshopmodel" name="FIELD6" value="Workshop Model" onclick="doMath(this)" data-clicked="no" />Workshop Model
<p id="total"></p>
<script type="text/javascript">
function doMath(ele) {
var total = 15;
if($(ele).attr('id') === 'workshopmodel') {
total += 5;
}
$("#total").html('<font color="black">Total Price:</font><font color="#09ff00">' + total);
}
</script>
Related
function increasePrice(checkbox) {
var increase = parseInt(checkbox.value);
var price_inputs = document.getElementsByClassName("price-input");
var price_span = document.getElementsByClassName("price");
for (var i = 0; i < price_inputs.length; i++) {
var price = price_inputs.item(i);
var newValue = parseInt(price.value);
if (checkbox.checked) {
var newValue = newValue + increase;
} else {
var newValue = newValue - increase;
}
price_span.item(i).innerHTML = newValue;
price.value = newValue;
}
};
<h1>Holiday Tour</h1>
<form role="form" action="" method="post" class="f1">
<label><input onclick="increasePrice(this)" type="checkbox" value="500" > Chennai Trip (Rs.500/-)</label>
<label><input class="price-input" type="radio" name="optradio" value="4700">
1 PERSON - <b>Cost Rs.<span class="price">4700</span>/- </b>
</label>
</form>
<p>how to display above checked amount to the below field</p>
<p><label><input type="radio" name="optradio">
Full Payment <b>Cost Rs /-</b>
</label></p>
<p><label><input type="radio" name="optradio">
Advance Payment <b>Cost Rs /-</b>
</label></p>
<p>Tour Package : </p>
i am not able to display the checked radio button value to the full amount field. i have 10 tour package and trip details when some one click the particular trip corresponding trip amount and the tour name will display
To solve this problem, I created a new Javascript function to update the full price radio button and label. You can use a similar method for the advance payment. I would actually just call the update advance payment method every time updateFullPayment is called so that they stay in sync that way.
function updateFullPayment(radio) {
var value = parseInt(radio.value)
var full_payment = document.getElementById("full-price");
var full_payment_radio = document.getElementById("full-price-radio");
full_payment.innerHTML = value;
full_payment_radio.value = value;
};
I also updated your Javascript function to call mine and pass in the currently selected price so that the full price is always updated.
function increasePrice(checkbox) {
var increase = parseInt(checkbox.value);
var price_inputs = document.getElementsByClassName("price-input");
var price_span = document.getElementsByClassName("price");
for (var i = 0; i < price_inputs.length; i++) {
var price = price_inputs.item(i);
var newValue = parseInt(price.value);
if (price_inputs.item(i).checked) {
var selectedPrice = price_inputs.item(i);
}
if (checkbox.checked) {
var newValue = newValue + increase;
} else {
var newValue = newValue - increase;
}
price_span.item(i).innerHTML = newValue;
price.value = newValue;
}
updateFullPayment(selectedPrice);
};
HTML now looks like this. Clicking on a price radio button will call the update function I created.
<h1>Holiday Tour</h1>
<form role="form" action="" method="post" class="f1">
<label><input onclick="increasePrice(this)" type="checkbox" value="500" > Chennai Trip (Rs.500/-)</label>
<label><input onclick="updateFullPayment(this)" class="price-input" type="radio" name="optradio" value="4700">
1 PERSON - <b>Cost Rs.<span class="price">4700</span>/- </b>
</label>
</form>
<p>how to display above checked amount to the below field</p>
<p><label><input type="radio" name="optradio" id="full-price-radio">
Full Payment <b>Cost Rs<span id="full-price"></span>/-</b>
</label></p>
<p><label><input type="radio" name="optradio">
Advance Payment <b>Cost Rs /-</b>
</label></p>
<p>Tour Package : </p>
I have to generate multiple input fields dynamically for each time user clicks "add" button and I was successfully able to get them. Each contact should have this radio input field in different different name so I've created a name in an array form.
Here's what I have so far and I wonder how I'm supposed to get the radio value for each person:
var options = '';
var count = 0;
var maxfields = 4;
$('button#add').click(function() {
options = '<p>Visit Type:
<label class="radio-inline">
<input type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Student" required>Student</label>
<label class="radio-inline">
<input type="radio" class="c_visittype' + count +'" name="c_visittype[]" value="Visitor" required>Visitor</label> </p>';
if(count < maxfields){
count++;
$(options).fadeIn("slow").appendTo('.companion');
return false;
}
});
$('.c_visittype' + count).on('click', function(){
$('input:radio[name="c_visittype"]').attr('checked', 'checked');
});
Each person should get a choice of either 'student' or 'visitor' and I have to get this value for multiple persons whenever more person fields created.The reason why I put field's name as an array is to iterate it in the next page by php.
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<script>
$( document ).ready(function() {
var options = '';
var count = 0;
var maxfields = 4;
$('button#add').click(function() {
var options = '<p style="display: none">Visit Type:<label class="radio-inline"> <input type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Student" required>Student</label> <label class="radio-inline"><input type="radio" class="c_visittype' + count +'" name="c_visittype' + count +'[]" value="Visitor" required>Visitor</label> </p>';
if(count < maxfields){
count++;
$('.companion').append(options);
$(".companion p:last").fadeIn();
}
});
});
</script>
<button id="add">add</button>
<div class="companion">
</div>
$('input[name=c_visittype[]]:checked').val();
That's how you access the value of a checked radio button with jQuery.
var inputValues = [];
$('.c_visittype:checked').each(function() {
inputValues.push($(this).val());
});
// Your code using inputValues
For update on changes:
$(function() {
$('.c_visittype').click(function(){
// Insert code here
}
)});
Make sure to move the numbering from the class attribute to the name attribute (like it was, everything was part of the same set of options). Also, put the whole string on 1 line.
I am trying to create a calculator to calculate the price of selected objects in this form. But the problem I am facing, is my lack of skill within Javascript.
Currently I have created a very simple setup, but it is still alot of job to be done to make it work, or at least that is what I believe.
Then comes my question, I want it to be able to calculate depending on currently selected objects, and amount of days one wish to stay.
As of right now, the only thing I've got going is the very last textbox, there it displays the objects selected on the checkboxes. What I want it to do is to be able to display every object selected into it together with a total price.
example: "You wish to order [selectDestination] for [days] with [selectRom] single rooms and [selectRom2] double rooms. Wish/wish not to rent equipment depending on what is clicked on in checkboxes. For total [endPrice]"
I know I am asking for a lot here. Any help is more than welcome. But if anything seem unclear or too broad to ask about. Please leave a comment below and I'll respond and try to make it more obvious what I am asking for.
JSFIDDLE
https://jsfiddle.net/sa6bLukq/1/
var select = document.getElementById("selectDestinasjon");
var options = [{
"place": "Konsberg",
"price": "$20"
}, {
"place": "Trysil",
"price": "$30"
}, {
"place": "Beitostølen",
"price": "$40"
}];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt.place;
el.value = opt.price;
select.appendChild(el);
}
var select = document.getElementById("selectRom");
var select2 = document.getElementById("selectRom2");
var options = ["1", "2", "3"];
for (var i = 0; i < options.length; i++) {
var opt = options[i];
var el = document.createElement("option");
el.textContent = opt;
el.value = opt;
var el2 = document.createElement("option");
el2.textContent = opt;
el2.value = opt;
select.appendChild(el);
select2.appendChild(el2);
}
function myFunction() {
var coffee = document.forms[0];
var txt = "";
var i;
for (i = 0; i < coffee.length; i++) {
if (coffee[i].checked) {
txt = txt + coffee[i].value + " ";
}
}
document.getElementById("order").value = "You wish to order: " + txt;
}
<div>
<form action="">
<br><b>Where do you want to go</b>
<br>
<select id="selectDestinasjon">
<option>Choose a destination</option>
</select>
<br><b>Pick a booking date</b>
<br>
<input type="date">
<br><b>Amount of days you wish to stay</b>
<br>
<input type="number">
<br><b>How many single rooms? </b>
<br>
<select id="selectRom">
<option>How many single rooms?</option>
</select>
<br><b>How many double rooms?</b>
<br>
<select id="selectRom2">
<option>How many double rooms?</option>
</select>
<br>Skipass 200kr:
<input type="checkbox" name="coffee" value="Skipass">
<br>Ski Equipment 1000kr:
<input type="checkbox" name="coffee" value="Ski Equipment">
<br>
<input type="button" onclick="myFunction()" value="Confirm order">
<br>
<input type="text" id="order" size="50">
</div>
<div id="totalPrice"></div>
</form>
I try something, with what i understood. My english is limited, so maybe i miss-understood something. But there is my solution :
First add "id" and "data-price" attribute to each element, for select them easily, then set a data-price for calcul tour total-price.
I also change your "order" field to textarea for better display.
<div>
<form action="">
<br><b>Where do you want to go</b>
<br><select id="selectDestinasjon">
<option>Choose a destination</option>
</select>
<br><b>Pick a booking date</b>
<br><input type="date" id="date">
<br><b>Amount of days you wish to stay</b>
<br><input type="number" id="number" data-price="20">
<br><b>How many single rooms? </b>
<br><select id="selectRom" data-price="12">
<option>How many single rooms?</option>
</select>
<br><b>How many double rooms?</b>
<br><select id="selectRom2" data-price="15">
<option>How many double rooms?</option>
</select>
<br>Skipass 200kr:<input type="checkbox" id="skipass" value="Skipass" data-price="45">
<br>Ski Equipment 1000kr:<input type="checkbox" id="equipment" value="Ski Equipment" data-price="100">
<br>
<input type="button" id="myb" value="Confirm order">
<br>
<textarea id="order" cols="35" rows="7"></textarea>
</form>
<div id="totalPrice"></div>
</div>
Then the Javascrip/Jquery :
I kept your select initialiation, I just remove the "$" to price on you option.
And i rewrite "myFunction" for calculationg total, and write on a single string, every selected item :
$("#myb").click(function() {
var price = 0;
var txt = "";
txt += "You wish to order "+$("#selectDestinasjon option:selected").text();
price = $("#selectDestinasjon").val();
txt += " the "+$("#date").val();
txt += " for "+$("#number").val()+" days";
price *= $("#number").val();
txt += " with "+$("#selectRom option:selected").text()+ " single rooms";
price += $("#selectRom").data("price")*parseFloat($("#selectRom option:selected").text());
txt += " and "+$("#selectRom2 option:selected").text()+ " double rooms.";
price += $("#selectRom2").data("price")*parseFloat($("#selectRom2 option:selected").text());
if ($("#skipass").prop("checked") && $("#equipment").prop("checked") ) {
txt += " Wish a skipass and equipment to rent.";
price += $("#skipass").data("price")+$("#equipment").data("price");
} else if ($("#skipass").prop("checked") ) {
txt += " Wish a skipass.";
price += $("#skipass").data("price");
} else if ($("#equipment").prop("checked") ) {
txt += " Wish to rent equipment.";
price += $("#equipment").data("price");
} else {
txt += " Wish not to rent equipement.";
}
$("#order").val(txt);
$("#totalPrice").text(price+"$");
})
You can try this solution on JSFiddle
One more problem, please help with printing out 3 spans elements at the same time as checking input. I'm beginner in JQuery.
In general, I have price calculator, which gets price(value in first input) of checked elements, multiplies it by quantity(value in second input) and gives total amount.
HTML
<li class="price">
<input type="checkbox" class="option" value="5000" />
<input class="price-count" type="number" min="1" value="1" />
<span class="price-name">Shirt</span>
<span class="price-price">5000</span>
<span class="price-uname">pieces</span>
</li>
<li class="price">
<input type="checkbox" class="option" value="9000" />
<input class="price-count" type="number" min="1" value="1" />
<span class="price-name">Trousers</span>
<span class="price-price">9000</span>
<span class="price-uname">square meter</span>
</li>
....there are 30 LI elements
JavaScript
$('.option, .price-count').change(function() {
var sum = 0;
$('.option:checked').each(function() {
sum += $(this).val() * $(this).next('.price-count').val();
$('#checked-elements').html($(this).next('.price-name').innerHTML);
});
$('#total').html(sum);
});
Please help to print out every checked element with name, quantity and unit of measure, separated by commas and using JQuery library.
I have added code to parse the values of the checked items and print them out as a comma-separated list below the total:
$('.option, .price-count').change(function() {
var sum = 0;
var selected = $('<ul></ul>');
$('.option:checked').each(function() {
var amount = $(this).val() * $(this).next('.price-count').val();
sum += amount;
var li = $(this).closest('li');
var name = li.find('.price-name').html();
var qty = li.find('.price-count').val();
var unit = li.find('.price-uname').html();
selected.append($('<li>'+ name + ', ' + qty + ', ' + unit + '</li>'));
});
$('#total').html(sum);
$('#selected-items').html(selected);
});
Check out this jsfiddle: http://jsfiddle.net/voveson/7vtvfofj/2/
To do what you require you can append a tag to the DOM which reads the price-name, price-count and price-uname elements related to the checkbox and formats them in to a string. Try this:
$('.option:checked').each(function () {
var amount = $(this).val() * $(this).next('.price-count').val();
sum += amount;
$('#checked-elements').html($(this).next('.price-name').innerHTML);
$('<p />', {
text: $(this).siblings('.price-name').text() + ' x ' + $(this).siblings('.price-count').val() + ' ' + $(this).siblings('.price-uname').text()
}).appendTo($items);
});
Example fiddle
I have this html:
<input type="radio" name="r1" value="v1"><input name="asd1" title="text1" id="asd1"><br>
<input type="radio" name="r2" value="v2"><input name="asd2" title="text1" id="asd2"><br>
<input type="button" name="but1">
<textarea rows=6 cols=80 name="conclus" id="idConclus">
</textarea><br><br>
Is there a way on js to fill textarea with titles and values of inputs by selecting some of them and clicking a button?
e.g.: "text1 - value1, text2 - value2" etc.
thanks for material.
mmm... Felix King, in your examples the button updates the form. and if i need to put one testfield 1, then put some text in textarea manually, and then again textfield 2 and so on? i mean, without updating the textarea?
getElementById is your friend :-)
<script>
getValues = new function() {
var myTextArea = document.getElementById('idConclus');
var radio1 = document.getElementById('asd1');
var radio2 = document.getElementById('asd2');
myTextArea.value = radio1.title + ' - ' + radio1.value + ' ,'
+ radio2.title + ' - ' + radio2.value;
}
</script>
<input type="radio" name="r1" value="v1">
<input type="text" name="asd1" title="text1" id="asd1"><br>
<input type="radio" name="r2" value="v2">
<input type="text" name="asd2" title="text1" id="asd2"><br>
<input type="button" name="but1" handler = getValues>
I suggest you read about JavaScript and forms.
Assuming you have this HTML:
<form name="data">
<input name="asd1" title="text1" id="asd1"><br>
<input name="asd2" title="text2" id="asd2"><br>
<input type="button" name="but1" value="update">
<textarea rows=6 cols=80 name="conclus" id="idConclus"></textarea>
</form>
you can do this:
var inputs = ['asd1', 'asd2'];
var form = document.data;
var button = form.but1;
var textarea = form.conclus;
button.addEventListener('click', function() {
var text = Array();
for(var i = 0, length = inputs.length; i < length; i++) {
var input = form[inputs[i]];
text.push(input.title + " - " + input.value);
}
textarea.value = text.join(' ');
}, false);
See a live example here: http://jsfiddle.net/6kbtH/
Update:
If you want to control which values are put into the textbox, I would use checkboxes, give them the same name and the name of the input as value like so:
<input type="checkbox" name="take" value="asd1"><input name="asd1" title="text1" id="asd1">
<input type="checkbox" name="take" value="asd2"><input name="asd2" title="text2" id="asd2">
Then you can loop with nearly the same code over those values:
var form = document.data;
var inputs = form.take;
var button = form.but1;
var textarea = form.conclus;
button.addEventListener('click', function() {
var text = Array();
for(var i = 0, length = inputs.length; i < length; i++) {
if(inputs[i].checked) {
var input = form[inputs[i].value];
text.push(input.title + " - " + input.value);
}
}
textarea.value = text.join(' ');
}, false);
Live example: http://jsfiddle.net/sJdqb/
Note: You have to take care of cross-browser issues regarding attaching the event listener yourself if you don't use a JavaScript library. The examples I gave will work in Firefox and WebKit-based browsers.