i have this problem:
I've created into my form a part of it where users can choose to insert from 0 to 10 row.
Each row contains 3 input.
Html code is:
<div class="form-row">
<div class="form-group col-md-3">
<label for="inputCity">Mesi a carico</label>
<select name="mesi_carico[]" id="inputState" class="form-control">
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputState">Min 3 anni?</label>
<select name="min_3_anni[]" id="inputState" class="form-control">
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputZip">% Detr. Spettante</label>
<select name="perc_carico[]" id="inputState" class="form-control">
<option value="100">100%</option>
<option value="50">50%</option>
</select>
</div>
</div>
Here my JSCode
$(document).ready(function() {
var max_fields = 10;
var wrapper = $(".container1");
var add_button = $(".add_form_field");
var x = 1;
$(add_button).click(function(e) {
e.preventDefault();
if (x < max_fields) {
x++;
$(wrapper).append('<div><div class="form-row">
<div class="form-group col-md-3">
<label for="inputCity">Mesi a carico</label>
<select name="mesi_carico[]" id="inputState" class="form-control">
<option value="12">12</option>
<option value="11">11</option>
<option value="10">10</option>
<option value="9">9</option>
<option value="8">8</option>
<option value="7">7</option>
<option value="6">6</option>
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
<option value="1">1</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputState">Min 3 anni?</label>
<select name="min_3_anni[]" id="inputState" class="form-control">
<option value="No">No</option>
<option value="Si">Si</option>
</select>
</div>
<div class="form-group col-md-3">
<label for="inputZip">% Detr. Spettante</label>
<select id="inputState" class="form-control">
<option value="100">100%</option>
<option value="50">50%</option>
</select>
</div>
</div>Delete</div>'); //add input box
} else {
alert('You Reached the limits')
}
});
$(wrapper).on("click", ".delete", function(e) {
e.preventDefault();
$(this).parent('div').remove();
x--;
})
});
Unfortunately, it doesn't work.
Where is the issue?
And, I need to transfer the value array like array[0] array[1] array [2] ecc ecc... I'm not sure to do it.
Thanks for your help.
Related
I am new to jQuery/JS and I have this problem: You can run my code and see that count is not correct:
$('.form-control').change(function() {
countTotal();
});
$('.form-control').change(function() {
countTotal();
});
function countTotal() {
var level1 = parseInt($(".form-control :selected").val(), 10);
var level2 = parseInt($(".form-control :selected").val(), 10);
var total = level1 * level1;
$(".form-group > #riz").val(total);
$(".form-group > #riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input id="riz">
</div>
My HTML has to stay the same, I have to find some way to jQuery work in this example and keep the HTML structure the same. If you have any idea how to solve this, feel free to comment or share code ideas.
I appreciate your help!
There is multiple problems with your code.
First, you are using the same id multiple times. ID must be unique.
Second, think this is wrong var total = level1 * level1; should be var total = level1 * level2;
Third, you don't need to use :selected in $(".form-control :selected").val(), since $(".form-control").val() will always take the value of the selected option, if your element is a select.
Now I have changed both your html and jquery so it will work to your requirement.
Demo
$('.form-control').change(function() {
countTotal($(this));
});
function countTotal(ele) {
var level1 = parseInt(ele.val() || 0, 10);
var level2 = parseInt(ele.siblings(".form-control").val() || 0, 10);
var total = level1 * level2;
ele.closest(".form-group").next().find(".riz").val(total);
ele.closest(".form-group").next().find(".riz").attr("disabled", true);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.4.3/jquery.min.js"></script>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
<hr>
<div class="form-group">
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
<div class="form-group">
<input class="riz">
</div>
I'm trying to update the value of selectbox option after click. It should subtract the selected value to itself.
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
</div>
<div class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
standardRoom function
function standardRoom()
{
$('#selectBoxStandard option').val(Number($("#selectBoxStandard").val()) - Number($("#selectBoxStandard option").val()));
}
If the selected value is 3 after click the remaining value should update to:
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</div>
To remove last childs from #selectBoxStandard based on option value:
$('button').on('click', standardRoom);
function standardRoom() {
$('#selectBoxStandard').find("option:nth-last-child(-n+" + $('#selectBoxStandard').val() + ")").remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="pull-left col-xs-12 col-sm-4 col-md-4">
<label for="rooms" style="color:black">No. of rooms: </label>
<select required tabindex="10" id="selectBoxStandard" name="n_rooms">
<option value="0">0</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
</select>
<button>Update</button>
</div>
This will work but could probably be done a bit easier or better:
function standardRoom(){
var last_option = $('#selectBoxStandard option:last-child').val();
var selected_option = $('#selectBoxStandard').val();
$("#selectBoxStandard option").each(function() {
if($(this).val() > (last_option - selected_option)){
$(this).remove();
}
});
}
add this js
let total = 7
function changed(){
let selBox = document.getElementById('selectBoxStandard');
let value = selBox.value;
//remove all options
while(selBox.children.length > 0) selBox.removeChild(selBox.children[0]);
//add new options according to value;
for(let i = 0;i<7-value+1;i++){
selBox.innerHTML += `<option value="${i}">${i}</option>`
}
//resets value
selBox.value = value;
}
add onchange on ur select
<select onchange="changed()" required tabindex="10" id="selectBoxStandard" name="n_rooms">
if you want to change on btn click use this
<div onclick="changed()" class="button-style-1" style="padding-bottom:80px" style="padding-bottom:40px"><a href="javascript:standardRoom()" ><i class="fa fa-calendar"></i><span class="mobile-visibility">BOOK
</span></a></div>
I have a very basic html document with two drop downs. When specific values in the drop down menus are selected I would like it to display a certain price in a text area below.
I have the drop downs setup, but I can't find a way to show specific prices for the drop down selections.
Any hints or tips would be greatly appreciated!
Here is my html.
<div class="form-group">
<label class="col-md-4 control-label" for="current">select</label>
<div class="col-md-5">
<select id="current" name="current" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label" for="desired">select</label>
<div class="col-md-5">
<select id="desired" name="desired" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
<option value="11">11</option>
<option value="12">12</option>
<option value="13">13</option>
<option value="14">14</option>
<option value="15">15</option>
<option value="16">16</option>
</select>
</div>
</div>
create text field with id is price
<script src="http://code.jquery.com/jquery-1.11.3.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#current").on('change',function(){
$("#price").val($(this).val());
// you can see values in console also
console.log("Price :"+$(this).val());
});
});
try this one
I have this JQuery Mobile Form, which sends the inputs to a MySQL Database. I would like to validate all fields as required. However, it does not work and I cannot find the error.
Here is the first part of the form. I put "required" on the input fields.
<form id="form-haftpflicht" method="post">
<div data-role="fieldcontain">
<fieldset data-role="fieldcontain">
<label for="versicherungsbeginn"><b>Versicherungsbeginn</b></label>
<input type="date" name="versicherungsbeginn" id="versicherungsbeginn" value="" required />
</fieldset>
<fieldset data-role="fieldcontain">
<label for="erwachsene" class="select"><b>Anzahl Erwachsene:</b></label>
<select name="erwachsene" id="erwachsene" data-role="none" required>
<option value="standard" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</fieldset>
<fieldset data-role="fieldcontain">
<label for="kinder" class="select"><b>Anzahl Kinder:</b></label>
<select name="kinder" id="kinder" data-role="none" required>
<option value="standard" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="9">9</option>
<option value="10">10</option>
</select>
</fieldset>
</div>
And here is my script with the API
$(document).ready(function () {
$("#store-haftpflicht").click(function () {
$("#form-haftpflicht").submit();
});
$("#form-haftpflicht").submit(function (event) {
event.preventDefault();
$("#ajax-loader").css("display", "block");
$.ajax({
url: 'http://app.lovanet.ch/app/store_haftpflicht.php',
data: $(this).serialize(),
method: 'POST',
success: function (data, status) {
$("#ajax-loader").css("display", "none");
},
error: function () {
output.text('Keine Prämien gefunden.');
}
});
});
});
A select is considered empty (and then invalid if the field is required) if the selected option has an empty value (""), but yours have a value ("standard").
To fix the problem with validation, just replace the "standard" value in the first option for a "":
<select name="kinder" id="kinder" data-role="none" required>
<option value="" data-placeholder="true">-- Bitte wählen --</option>
<option value="1">1</option>
<option value="2">2</option>
So I have "add" and "delete" buttons that will respectively add/delete input fields. I also have a "preview" button ( using anchor tags) that will send the user to the next page. Upon clicking the preview button, I want to collect all information given and re-displayed on the next page.
I'm totally un aware of how to collect this dynamic information (user will add/delete BEFORE hitting preview, so the amount of input is unknown). How can I pass all this?
Here is what my code/markup looks like (Sorry if it is too many lines of code, I just want to give you as much information as possible):
JavaScript for deleting and adding fields:
<script>
$(document).ready(function() {
$(".add").on('click', function() {
var linehtml = $('.line').html();
var total = $('.line').length;
var dele = (total - 1);
$('#linecont').append('<div class="line"><hr />'+linehtml+'</div>');
return false;
});
$(".del").on('click', function() {
var linecont = $("#linecont");
var total = linecont.find('.line').length;
var dele = (total - 1);
if(total === 1) {
return false;
}
$('.line').eq(dele).remove();
return false;
});
});
</script>
HTML:
<div align="center">
Add Line
Delete Line
<div style="width: 40%; margin:0 auto">
<label>Campaign Name</label>
<input type="text" placeholder="Campaign Name:" />
</div>
</div>
<div id="linecont">
<div class="line">
<div class="row">
<div class="large-6 columns">
<label>Status:</label>
<select>
<option value="New">New</option>
<option value="Changed">Changed</option>
</select>
<label>Product:</label>
<select>
<option value="Mobile">Mobile</option>
<option value="Social">Social</option>
<option value="Online">Social</option>
</select>
<label>Model:</label>
<select>
<option value="CPC">CPC</option>
<option value="CPI">CPI</option>
<option value="CPM">CPM</option>
<option value="CPA">CPA</option>
<option value="CPD">CPD</option>
</select>
<label>Unit Rate:</label>
<input type="text" placeholder="Just type amount">
</div>
<div class="large-6 columns">
<label>URL Link:</label>
<input type="text" placeholder="URL Link" />
<label>Targeting Info:</label>
<input type="text" placeholder="Target Info">
<label>Total Budget:</label>
<input type="text" placeholder="Total Budget">
<label>Daily Budget:</label>
<input type="text" placeholder="Daily Budget">
</div>
</div>
<div style="width: 40%; margin:0 auto">
<label>Total Units:</label>
<input type="text" placeholder="Total Units">
</div>
<div class="row">
<div class="small-2 columns">
<label>Start Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
<div class="small-2 columns">
<label>End Month:</label>
<select>
<option value="Jan">Jan</option>
<option value="Feb">Feb</option>
<option value="March">March</option>
<option value="April">April</option>
<option value="May">May</option>
<option value="June">June</option>
<option value="July">July</option>
<option value="Aug">Aug</option>
<option value="Sept">Sept</option>
<option value="Oct">Oct</option>
<option value="Nov">Nov</option>
<option value="Dec">Dec</option>
</select>
</div>
<div class="small-2 columns">
<label>Day:</label>
<select>
<option value="1">1</option>
<option value="2">2</option>
<option value="2">3</option>
<option value="3">4</option>
<option value="4">5</option>
<option value="4">6</option>
<option value="5">7</option>
<option value="6">8</option>
<option value="7">9</option>
<option value="8">10</option>
<option value="9">11</option>
<option value="11">12</option>
<option value="12">13</option>
<option value="13">14</option>
<option value="14">15</option>
<option value="15">16</option>
<option value="16">17</option>
<option value="17">18</option>
<option value="18">19</option>
<option value="19">20</option>
<option value="21">21</option>
<option value="22">22</option>
<option value="23">23</option>
<option value="24">24</option>
<option value="25">25</option>
<option value="26">26</option>
<option value="27">27</option>
<option value="28">28</option>
<option value="29">29</option>
<option value="30">30</option>
<option value="31">31</option>
</select>
</div>
<div class="small-2 columns">
<label>Year:</label>
<input type="text" placeholder="Type in Year" />
</div>
</div>
</div>
</div>
<hr>
<div class="panel" style="width:98%; margin:0 auto">
<h5>Terms and Conditions</h5>
<p>I.</p>
<p>II.</p>
<p>III.</p>
<p>IV.</p>
</div>
<hr>
<div align="center">
Preview
</div>
If the information doesn't need to be secure, just use the url to pass parameters:
How to get the value from the GET parameters?
1) on your onclick function, you collect the information and create a string that is going to be the new url (with the parameters)
2) use window.location = newUrl; to access the link
3) in the new page, parse the URL to get the info
You can use localStorage variable to pass values between pages
eg. page 1:
localStorage.setItem("key","value");
page 2:
var value=localStorage.getItem("key");