I have a problem with my select option. I used Contentful model to fetch my data. In the content model, I have given the fields except the select option field. Kindly help me out with this. Here is the code:
products.forEach(product => {
result += `<div class="millet-column">
<div class="img-container">
<img src=${product.image}>
<button class="bag-btn" data-id=${product.id}>
<i class="fa fa-shopping-basket" aria-hidden="true"></i>
Add to Bag
</button>
</div>
<p class="item-name">
${product.title}
</p>
<p class="item-category">
${product.category}
</p>
<br>
<h2 style="float:left;margin-left:3%;margin-top:-2%;"> Rs.</h2>
<div class="total-price">${product.price}</div>
<select id="list" data-price="${product.price}" name="quantity" class="product-select" tabindex="1"
onchange="getSelectValue();">
<option value="250">250 g</option>
<option value="500">500 g</option>
<option value="1000">1 kg</option>
</select>
</div>`
Related
Value showing in span but I need to get value in the input field.
There will also be Product 3, 4, and so on.
The input field name, price, id, class is being populated dynamically from a database so they are the same for different Items.
If one product exists then it's fine however with multiple products and their options the price for the first ID only changes. As an example, if I change the select from Product 2 then the price of Product 1 changes only. How can I get it to stick to its own Product and change the price for that one only?
$(".readers").change(function() {
var productParent = $(this).parent().parent();
var newPrice = parseFloat(productParent.find('.price').attr('data-price'));
productParent.find(".readers option:selected").each(function() {
newPrice += +$(this).attr('data-price')
});
productParent.find(".price").html("£" + newPrice.toFixed(2));
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p><span data-name="product_name">Addon Product</span></p>
<p data-name="product_desc"> Addon product descriptions</p>
<hr class="line">
<div>
<div class="form-group">
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
</div>
<span class="price pull-left" itemprop="price" id="price" data-price="5.99">£5.99</span>
<hr/>
</div>
<div>
<p><span data-name="product_name">2nd Product</span></p>
<p data-name="product_desc">2nd Addon product description</p>
<hr class="line">
<div>
<div class="form-group">
<label>Size: </label>
<select class="product-variants readers form-control input-sm" id="readers" name="product_size">
<option data-price="0" value="Small">Small</option>
<option data-price="40" value="Medium">Medium</option>
<option data-price="60" value="Large">Large</option>
</select>
</div>
<span class="price pull-left" itemprop="price" id="price" data-price="5.99">£5.99</span>
<hr/>
</div>
</div>
I'm working on a project where a user can select options from three sections on a webpage. Red Wine, White Wine, and Rose. Within those sections, they can choose from a drop-down menu that provides different wines within the category of flavor.
For example, Red Wine wine would allow you to choose from three flavors, white wine would allow you to choose from three other flavors, etc.
The issue I'm having is that whatever section I make last, is the only one that changes. If I go to change the wine selection under red it changes the rose section.
HTML
<div class="vl3"></div>
<div class="vl4"></div>
<div class="redwine">Red Wine<br> </div>
<div class="redwineselect">
<form action="purchase.htm" method="post"><br>
Select Your Red...<br><br>
<img src="merlot.png" id="redSelect" height="400px"> <br>
<select name="redList" onchange="displayImage(this);">
<option value="merlot.png">Merlot</option>
<option value="pinot_nior.png">Pinot Noir</option>
<option value="cabernet_red.png">Cabernet</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
` </form>
</div>
<div class="whitewine">White Wine<br></div>
<div class="whitewineselect">
<form action="purchase.htm" method="post"><br>
Select Your White...<br><br>
<img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
<select name="whiteList" onchange="displayImage(this);">
<option value="pinot_grigio.png">Pinot Grigio</option>
<option value="riesling.png">Reisling</option>
<option value="chardonnay.png">Chardonnay</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
<div class="rosewine">Rose Wine</div>
<div class="rosewineselect">
<form action="purchase.htm" method="post"><br>
Select Your Rose...<br><br>
<img src="grenache.png" id="roseSelect" height="400px"><br>
<select name="roseList" onchange="displayImage(this);">
<option value="grenache.png">Grenache</option>
<option value="mourverde.png">Mourverde</option>
<option value="pinot_rose.png">Pinot Rose</option>
</select>
<input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
JavaScript
function displayImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}
function displayImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}
function displayImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}
Try different method names
<div class="vl3"></div>
<div class="vl4"></div>
<div class="redwine">Red Wine<br> </div>
<div class="redwineselect">
<form action="purchase.htm" method="post"><br>
Select Your Red...<br><br>
<img src="merlot.png" id="redSelect" height="400px"> <br>
<select name="redList" onchange="displayRedImage(this);">
<option value="merlot.png">Merlot</option>
<option value="pinot_nior.png">Pinot Noir</option>
<option value="cabernet_red.png">Cabernet</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
` </form>
</div>
<div class="whitewine">White Wine<br></div>
<div class="whitewineselect">
<form action="purchase.htm" method="post"><br>
Select Your White...<br><br>
<img src="pinot_grigio.png" id="whiteSelect" height="400px"><br>
<select name="whiteList" onchange="displayWhiteImage(this);">
<option value="pinot_grigio.png">Pinot Grigio</option>
<option value="riesling.png">Reisling</option>
<option value="chardonnay.png">Chardonnay</option>
</select>
<input type="text" value="" placeholder="Quantity" required size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
<div class="rosewine">Rose Wine</div>
<div class="rosewineselect">
<form action="purchase.htm" method="post"><br>
Select Your Rose...<br><br>
<img src="grenache.png" id="roseSelect" height="400px"><br>
<select name="roseList" onchange="displayRoseImage(this);">
<option value="grenache.png">Grenache</option>
<option value="mourverde.png">Mourverde</option>
<option value="pinot_rose.png">Pinot Rose</option>
</select>
<input type="text" value="" placeholder="Quantity" requried size="8"><br><br>
<button type="submit" class="submit">Purchase</button>
</form>
</div>
function displayRedImage(elem){var image=document.getElementById("redSelect");image.src=elem.value;
}
function displayWhiteImage(elem){var image=document.getElementById("whiteSelect");image.src=elem.value;
}
function displayRoseImage(elem){var image=document.getElementById("roseSelect");image.src=elem.value;
}
Your three functions have the same name, so they are overriding each other. Give each of them a different name and it will work.
I want to add the following div structure whenever the '+' button [the addMore() function] is clicked. Although i am able to add the div structure, but the alignment of the input text are not equal as compared to the hard coded.
html file:
<form class="align-center">
<p class="6u 12u$(medium)">
Start Date: <input type="date" name="startdate" id="startdate" />
End Date: <input type="date" name="enddate" id="enddate" />
</p>
<p>
<div class="6u$ 12u$(xsmall)"><input type="text" name="numParticipants" id="numParticipants" value="" placeholder="Number of Participants"/></div>
</p>
<p>
<div class="row">
<div class="3u 12u$(medium)">
<div class="select-wrapper">
<select>
<option value="">-Select Programme-</option>
<option value="1">Yogalates</option>
<option value="2">Pilates</option>
<option value="3">Kick Boxing</option>
<option value="4">K-Pop Dance</option>
<option value="5">Hip Hop</option>
<option value="6">Jazz Aerobics</option>
<option value="7">Zumba</option>
<option value="8">Fitball</option>
</select>
</div>
</div>
<div>OR</div>
<div class="3u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Customize your own programme" />
</div>
</div>
<div class="2u 12u$(medium)">
<div class="12u$">
<input type="text" value="" placeholder="Venue" />
</div>
</div>
</div>
</p>
<p>
<div class="row" id="newProg">
</div>
<div class="row">
<div class="2u 12u$(medium)">
<a class="button" onclick="addMore()"><div style="font-size: 35px">+</div></a>
<a class="button" style="margin:0 0 0 1em" onclick="removeProg()"><div style="font-size: 35px">-</div></a>
</div>
</div>
<div class="2u 12u$(medium); image right">
Submit
</div>
</p>
</form>
main.js
var counter = 0;
function addMore() {
counter++;
var objNewDiv = document.createElement('div');
objNewDiv.setAttribute('id', 'addProg' + counter);
objNewDiv.setAttribute('class', 'row');
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <input type="text" value="" placeholder="Customize your own programme"/> </div> <div class="3u$ 12u$(medium)"> <input type="text" value="" placeholder="Venue" /> </div> ';
document.getElementById('newProg').appendChild(objNewDiv);
}
Result when page is loaded:
when page loaded
Actual and Expected result:
actual and expected outcome
You have differenc in the class names of the div tags which you are appending in jquery.
Make it same as the Static HTML content, And the expected result will be achieved.
Differences I see is as below.
Static HTML has - <div class="3u 12u$(medium)"> ,Your Jquery HTML has - <div class="5u 12u$(medium)">
Static HTML has - <div class="3u 12u$(medium)">, Your jquery HTML has - <div class="5u 12u$(medium)">
Static HTml has - <div class="2u$ 12u$(medium)">, Your Jquery HTML has <div class="3u$ 12u$(medium)">
Because of the differences in the class names you find the differences in the way its rendered in the UI.
You missed one of your divs in JavaScript inner HTML string. I think it should be like this:
objNewDiv.innerHTML = '<div class="5u 12u$(medium)"> <div class="select-wrapper"> <select> <option value="">-Select Programme-</option> <option value="1">Yogalates</option> <option value="2">Pilates</option> <option value="3">Kick Boxing</option> <option value="4">K-Pop Dance</option> <option value="5">Hip Hop</option> <option value="6">Jazz Aerobics</option> <option value="7">Zumba</option> <option value="8">Fitball</option> </select> </div> </div> <div>OR</div> <div class="5u 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Customize your own programme"/> </div> </div> <div class="3u$ 12u$(medium)"> <div class="12u$"> <input type="text" value="" placeholder="Venue" /> </div> </div> ';
In the program below I am using fee head id and trying to access dynamic data but when I select or click on any element of the first list it does not go to the next list.
After clicking on any element in first list, the element should disappear from first list and display in the second list. I am using a theme which has built-in classes in JS and JSP.
<div class="panel-body">
<div class="form-group">
<div class="col-lg-12">
<div class="leftBox">
<select id="feesHeads" multiple="multiple" class="multiple nostyle form-control" style="height:300px;">
<!-- <option value="1">Spain</option>
<option value="2">Germany</option>
<option value="3">Uruguay</option>
<option value="4" selected="selected">Brazil</option>
<option value="5" selected="selected">England</option>
<option value="6" selected="selected">Portugal</option>
<option value="7">Argentina</option>
<option value="8">Italy</option>
<option value="9">Croatia</option>
<option value="10">Denmark</option>
<option value="11">Russia</option>
<option value="12">Greece</option>
<option value="13">Chile</option>
<option value="14">Côte d'Ivoire</option>
<option value="15" selected="selected">France</option>
<option value="16">Sweden</option>
<option value="17">Switzerland</option>
<option value="18">Republic of Ireland</option>
<option value="19">Australia</option>
</select> -->
<br/>
<span id="box1Counter" class="count"></span>
<div class="dn"><select id="box1Storage" name="box1Storage" class="nostyle"></select></div>
</div>
<div class="dualBtn">
<button id="to2" type="button" class="btn" ><span class="icon12 minia-icon-arrow-right-3"></span></button>
<button id="allTo2" type="button" class="btn" ><span class="icon12 iconic-icon-last"></span></button>
<button id="to1" type="button" class="btn marginT5"><span class="icon12 minia-icon-arrow-left-3"></span></button>
<button id="allTo1" type="button"class="btn marginT5" ><span class="icon12 iconic-icon-first"></span></button>
</div>
<div class="rightBox">
<select id="box2View" multiple="multiple" class="multiple nostyle form-control" style="height:300px;"></select>
<br/>
<span id="box2Counter" class="count"></span>
<div class="dn"><select id="box2Storage" class="nostyle"></select></div>
</div>
</div>
</div><!-- End .form-group -->
</div>
</div><!-- End .panel -->
</div><!-- End .span6 -->
</div><!-- End .row -->
When you click on the firstList's option remove it from there and append it to the secondList. I've created a simple demo that might go with your scenario.
HTML :
First :
<select id="firstList">
<option>Mango</option>
<option>Banana</option>
<option>Apple</option>
</select>
<br />
Second
<select id="secondList"></select>
jQuery :
$("#firstList").on("change", function(){
var selectedItem = $(this).children("option:selected").val();
$(this).children("option:selected").remove();
$("#secondList").append($("<option> </option>").text(selectedItem));
});
jsFiddle
Note : It's just an overview of how you can implement it. But what you want is entirely upto you.
How to style drop downs of drop down select boxes?
I have created a jsfiddle http://jsfiddle.net/CGDhB/
<div class="container">
<div class="salmatWrapper">
<div class="col-sm-12 contents">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/header.png" alt="Energy Unit Conversion Tool" class="img-responsive" />
<div class="form">
<form class="form-horizontal">
<fieldset>
<div class="col-xs-6 left">
<!-- Enter Value-->
<div class="form-group">
<div class="col-xs-12">
<input id="custom1" name="custom1" type="text" placeholder="Enter Value" class="form-control input-md">
</div>
</div>
<!-- Convert From -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom2" name="custom2" class="form-control">
<option value="" class="selectDefaultText">Convert From</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
<!-- Convert To -->
<div class="form-group">
<div class="col-xs-12">
<select id="custom3" name="custom3" class="form-control">
<option value="" class="selectDefaultText">Convert To</option>
<option value="1">Option one</option>
<option value="2">Option two</option>
</select>
</div>
</div>
</div>
<div class="col-xs-6 right">
<!-- Textarea -->
<div class="form-group">
<div class="col-xs-12">
<textarea class="form-control" id="custom4" name="custom4">Result here ...</textarea>
</div>
</div>
</div>
</fieldset>
</form>
</div>
<div class="col-sm-12">
<img src="http://staging.serviceportal.com.au/service05/alinta/images/footer.png" alt="Check our affordable electrity and gas packages!" class="img-responsive" />
</div>
</div>
</div>
</div>
I want the drop downs to look as in below image
Basically I want that little icon and the drop down select boxes to look as that. I am confused with this. A staging link may be viewed from here http://bit.ly/1eNm3jv
You really can't style select. The only thing you can really do is border color and padding as far as I know. Probably font size as well. Like #setek mentioned, gonna have to use some kind of plugin.