Alright, I am going to try to ask this clearly as I can.
I am creating a drop-down menu that will upon selection of an option show:
Shipping Total dynamically update for User Experience
Change the 'value="CHANGETHISINFORMATION"' value in the textbox dynamically
Here is where my code is at:
// Pre populated array of data
var myData = new Array();
myData[''] = '';
myData['Light Oak 6" x 6" Set|65.05|0606'] = '$50.00';
var setTotal = new Array();
setTotal[''] = '';
setTotal['Light Oak 6" x 6" Set|65.05|0606'] = '15.00';
document.setSelect.selector.onchange = updateText;
function updateText() {
var obj_sel = document.setSelect.selector;
var shipTot = document.setSelect.shippingTotal.value;
var totTot = document.setSelect.setTotal.value;
shipTot = myData[obj_sel.value];
totTot = ("item-AI SWDO|" + (myData[obj_sel.value] + setTotal[obj_sel.value]) + "|SoftWoods - Dark Oak|NA|0");
}
HTML:
<h1>Dark Oak</h1>
<br>
<form action="/qs3/cart.php" method="get" onSubmit="return doOptionCheck(this);" id="setSelect" name="setSelect">
<select id="selector" name="OPTION|1|AI SWDO">
<option value="" selected>Choose your set size</option>
<option value='Light Oak 6" x 6" Set|65.05|0606'>
6' x 6' Set - $65.05
</option>
</select>
<br><br>
Shipping Estimate: <input type="text" value="" id="shippingTotal" name="shippingTotal" disabled>
<br><br>
QTY: <input type="text" name="item-AI SWDO|CHANGETHISINFORMATION|SoftWoods - Dark Oak|NA|0" id="setTotal" size="3" value="1">
<input type="submit" name="add_to_cart2" value="Add to Cart!">
</form>
Now this cart is archaic to say the least. Perl with other script engines were used. So I am having to make due until we upgrade our site to a better cart.
I was able to originally* make the shipping box value physically change, it was only after I tried toying with the inner-value on the 'Qty:' box that made things stop working.
EDIT: Fixed my last sentence.
Can't you use datatable for this? http://www.datatables.net/ If I understand correctly, you want some element to update the total/shipping price?
Not sure why you want to change an element name field...
Related
I'm doing a website that allow user to add new group to the existing group. In the existing group it already have three fixed group which are It, cleaning, accountant, so my idea was letting user to add group name by clicking submit and their input field will be sent to
empty's <p> tag (eg： nurse, doctor.. and so on differentiate which a coma ,). Other than that, after I able to get the existing and new added group, I need to dynamically add the full groups to a drop down list. (eg: It, cleaning, accountant, nurse, doctor).
I know stackoverflow is not a code writing service, but I do make own research before posting this question and I couldn't found any useful resources. So anyone who willing to guide me will be much appreciate. Thanks in advance
Current template:
Expected Output:
Full code:
<!DOCTYPE html>
<html>
<body>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<h1>Drop Down List</h1>
<label for="group">Choose a group:</label>
<select name="group" id="group">
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</body>
</html>
You need to use JavaScript.
First, you use addEventListener() to listen when the user clicks the submit button. Then, we get the value of the input and separate it by commas with input.value.split(','). Then, we loop through the values, create a new <option> tag and add it to the <select> tag.
Also, you have two elements with id="group", so you need to change one of them. I changed the <select> to id="group-select".
const submit = document.querySelector('button');
const input = document.querySelector('input');
const select = document.querySelector('select');
const myP = document.querySelector('p#myP');
submit.addEventListener('click', function(e)
{
const values = input.value.split(',');
if (myP.innerText == '')
{
myP.innerText = values;
}
else
{
myP.innerText += ', ' + values;
}
for (let i in values)
{
const new_option = document.createElement('option');
new_option.value = values[i];
new_option.innerText = values[i];
select.appendChild(new_option);
}
});
<!DOCTYPE html>
<html>
<body>
<h1>Existing Group</h1>
<p>IT, Cleaning, Accountant</p>
<h1>Add New Group</h1>
<p id="myP"></p>
<input type="tel" id="group" name="group" placeholder="enter group name">
<br><br>
<button type="button" class="btn btn-primary btn-sm">Submit</button>
<h1>Drop Down List</h1>
<label for="group">Choose a group:</label>
<select name="group" id="group-select">
<option value="IT">IT</option>
<option value="Cleaning">Cleaning</option>
<option value="Accountant">Accountant</option>
</select>
</body>
</html>
In this case, you will need to use some javascript depending on your requirements to add the extra node as follows:
Pure JS:
var result = document.getElementById("group");
var tag = document.createElement("option");
tag.setAttribute("value",result.value)
var text = document.createTextNode(result.value);
tag.appendChild(text);
var element = document.getElementById("groupSelect");
element.appendChild(tag);
Keep in mind you have 2 elements with the same ID (group), which will cause most of your JS to crash. Also note that you can also use Jquery which might be a bit easier as well
I would like to know how to create a button that shows one final result based on the radio buttons chosen.
For example if 'Male is selected and if 'bmi is under 18.5' then answer is "light training needed". Can anybody help pls?
<form>
Gender:<br/>
<input type="radio" name="Gender" value="Male"/>Male
<input type="radio" name="Gender" value="Female"/>Female
<br/>
<span id="genderresult"></span>
<br/>
Body Mass Index:<br/>
<select id="bmi" onchange="showChange()">
<option value="under 18.5"><18.5</option>
<option value="18.5 to 24.9">18.5-24.9</option>
<option value="25 to 29">25-29</option>
<option value="over 30">30+</option>
</select>
<br/>
<span id="bmiresult"></span>
</form>
<script>
var radioButtons = document.querySelectorAll('input[type=radio]');
var genderresult = document.getElementById("genderresult");
var bmiresult = document.getElementById("bmiresult");
radioButtons.forEach(r=>{
r.onclick = function(e){
genderresult.innerHTML = "You are "+r.value;
}
});
function showChange(){
var bmi = document.getElementById("bmi").value;
bmiresult.innerHTML = "Your body mass index is "+bmi;
if(bmi=="over 30"){
bmiresult.innerHTML += "<br/>Consider losing weight";
}
}
</script>
Okay, maybe i can provide one solution. You wanna do first of all a selection from wherever and after that you wanna choose a choice from radio buttons section. Okay, you can use a listener that only wait when you choose one of the radio button that you selected. I mean, if write something and after that you select the radio button you know that the variable in which you wrote, have something and you can select a choice.
Let me be more clear. I mean that you have a text field and after that you have a radio button.
If you don't write something and you select one of the raddio button choices you display an errot but if you wrote before and it was saved in a variable that already is not undefined then you can select raddio button and manipulatr the output.
First of all, thank you very much for supporting me in: Change Dropdown values based on input in textfield
Now I need to extend this feature.
Here is the code for changing the drop down menue based on a text field value (Thank you very much, Rion Williams):
https://jsfiddle.net/q5s24th2/
Now I would like to add more persons for which I can also enter the textfield value so that the drop down menu changes its content. Here I have created something to add more people:
https://jsfiddle.net/xsnLc48o/
<p id="maintable">1:
<input name="Year1" type="text" value="" />
<select name="Results1">
<option selected="selected" value="">please choose:</option>
<option value="300" data-under-18="100" data-over-18="300">300.-</option>
<option value="500" data-under-18="200" data-over-18="500">500.-</option>
<option value="1000" data-under-18="300" data-over-18="1000">1000.-</option>
<option value="1500" data-under-18="400" data-over-18="1500">1500.-</option>
<option value="2000" data-under-18="500" data-over-18="2000">2000.-</option>
<option value="2500" data-under-18="600" data-over-18="2500">2500.-</option>
</select>
<input name="Additional1" type="checkbox" title="Option" value="1" />Option
</p>
<p>
<input type="button" value="+ Add Person" id="addRows" />
</p>
Unfortunately for the added persons the drop down feature does not work (I have tried several things).
If anybody has an idea how to do it, I would be very happy.
Maybe there is a much better possibility than using the addRows/append feature.
Thank you in advance.
Best regards,
Andy
You could accomplish this by creating a function that would clone one of your existing rows and append it to content. It may be best to consider using a table to more easily organize your content :
<table id="maintable">
<tr class='person-row'>
<td class='person-number'>...</td>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</table>
And then adjusting your "add rows" function to clone the first row and then store a counter of the number of current users so that you can append that to the name attribute as expected :
// When you add a new user
$("#addRows").click(function(){
// Determine the next users number
var nextUser = $('.person-row').length + 1;
// Clone the first row
var nextUserRow = $('#maintable tr:first').clone();
// Update your attributes
$(nextUserRow).find('.person-number').text(nextUser + ':');
$(nextUserRow).find('.person-year').attr('name','Year' + nextUser).val('');
$(nextUserRow).find('.person-value').attr('name','Results' + nextUser);
$(nextUserRow).find('.person-additional').attr('name','Additional' + nextUser);
// Set the defaults for the row
$(nextUserRow).find('select option:not(:first)').each(function() {
var valueToUse = $(this).attr('data-over-18');
$(this).val(valueToUse).text(valueToUse + '.-');
});
// Append the row
$("#maintable").append(nextUserRow);
});
You can see a working example of this in action here and demonstrated below :
I am using a plugin for my crowdfunding plateform which is working fine and is helping me a lot as I am not quite confortable with coding yet.
However I'd like to tweak a JavaScript function. When a customer chooses how much he wants to contribute, the customer can either decide the amount or the reward level he wants
Here is basically how the form is made:
<form action="" method="POST">
<div class="form-row inline left twothird">
<label for="level_select">Contribution Level
<span class="dropdown ">
<select name="level_select" class="dropdown__select">
<option value="1" data-price="5.00">Reward 1</option>
<option value="1" data-price="15.00">Reward 2</option>
<option value="1" data-price="25.00">Reward 3</option>
</span>
</label>
</div>
<div class="form-row inline third total">
<label for="total">Total</label>
<input type="text" class="total" name="total" id="total" value="">
</div>
<div class="form-row submit">
<input type="submit">
</div>
From there I want to bind levels with the amount entered by the user.
Currently, it is partially working as changing the amount depending on the selected level is pretty easy. Where I'm stuck is with changing the selected option depending on the input.
In the plugin I found the following lines which seems to be what I'm interested in:
jQuery(document).bind('price_change', function(event, price) {
jQuery('input[name="total"]').val(price);
var levelIndex = jQuery('select[name="level_select"]').prop('selectedIndex');
var levelPrice = jQuery('select[name="level_select"] option').eq(levelIndex).data('price');
if (price < levelPrice) {
jQuery('input[name="total"]').val(levelPrice);
}
});
Based on this I started to tweak it a bit but with my fairly low knowledge of jQuery here is where I am at the moment:
jQuery(document).ready(function() {
jQuery(document).bind('price_change', function(event, price) {
var price = jQuery('input.total').val();
var levelIndex = jQuery('select[name="level_select"]').prop('selectedIndex');
var levelPrice = jQuery('select[name="level_select"] option').eq(levelIndex).data('price');
var nextLevel = jQuery('select[name="level_select"] option').eq(levelIndex + 1);//got to check if exist, else NULL
if (nextLevel){var nextLevelPrice = jQuery('select[name="level_select"] option').eq(levelIndex + 1).data('price');}
var prevLevel = jQuery('select[name="level_select"] option').eq(levelIndex - 1);//got to check if exist, else NULL
if (prevLevel){var prevLevelPrice = jQuery('select[name="level_select"] option').eq(levelIndex - 1).data('price');}
while (prevLevel!=NULL && price < levelPrice) {
jQuery('input[name="total"]').val(prevLevel);
}
while (nextLevel != NULL && price < nextLevelPrice){
jQuery('input[name="total"]').val(nextLevel);
}
});
Am I on the right track or is their an easier way to proceed?
Thank you for your attention, any advice appreciated
Main goal: I would like to create a dynamic form-building tool that allows the user to select certain options that, when chosen, enable subsequent inputs to occur.
An example of what I am describing:
Text Entry: Put in a Chapter Name.
Choose to add question
Choose Question type (mult. choice, check box, etc.)
Type in question.
Choose to add new question. If so, repeat ques. steps.
Choose to add new Chapter. If so, repeat add ques. options.
Submit whole content from above, and export (with the ultimate goal of being parsed/prepared into format for use, as per these guidelines (but that's for much later).
Example of what I have done so far: JS Fiddle
Note: Example is incomplete. Stopped because I realize I am building a mess and assume there is an easier/better way to do this.
Thanks in advance for any assistance that can be offered - I hope I was clear!
Kuan
Caveat: I am relatively new to programming/etc. That said, I feel I have searched quite a bit and there appears to be not much in regards to this specifically (the difficulty being primarily the nested nature of the questions, within the chapters).
JS Fiddle code:
<title>Dynamically build FT survey</title>
<script language="javascript">
function addChap(name) {
var element = document.createElement("li");
element.innerHTML = name;
var foo = document.getElementById("currentChapList");
//Append the element in page (in span).
foo.appendChild(element);
// Update drop down select lists
updateSelect();
}
function delChap() {
var foo = document.getElementById("currentChapList");
var allChildNodes = foo.childNodes;
var lastElem = allChildNodes.length - 1;
foo.removeChild(allChildNodes[lastElem]);
// Update drop down select lists
updateSelect();
}
function updateSelect() {
// First delete everything in the Chapter selection list
var currentChaps = document.getElementById("chapOptions");
var newFoo = document.getElementById("currentChapList");
for (i = 0; i < currentChaps.children.length; i++) {
currentChaps.remove(currentChaps.children[i]);
}
// Then re-add the remaining components from Chapter list
for (i = 0; i < newFoo.children.length; i++) {
nfCont = newFoo.children[i].innerHTML;
nfElem = document.createElement("option");
nfElem.innerHTML = nfCont;
currentChaps.appendChild(nfElem);
}
}
function addAns() {
//Create an input type dynamically.
var element = document.createElement("input");
var foo = document.getElementById("lastAns");
foo.appendChild(element);
}
function addQues() {
var allQues = document.getElementById("questionSubSect");
var newQues = document.createElement("div");
newQues.innerHTML = allQues.innerHTML;
//Append the element in page (in span).
allQues.appendChild(newQues);
}
</script>
</head>
<body>
<b>Current Chapter Index</b>
<br>
<ol id="currentChapList">
</ol>
<input type="text" style="width:400px" value="Enter Chapter Name" id="newChapName"/><br>
<input type="button" value="Add Chapter" onclick="addChap(newChapName.value)"/>
<input type="button" value="Delete Last Chapter" onclick="delChap()"/>
<br>
<br>
<b>Dynamically add element in form.</b>
<br>
Select the element and hit Add to add it in form.
<br>
<br>
<b>Chapter Builder</b>
<br>
<form>
Chapter Select:
<select id="chapOptions"></select>
<br>
<div id="questionSubSect">
<br>
Question ID:
<input type="text" style="width:400px" value="Enter Question"/>
<br>
Question:
<input type="text" style="width:400px" value="Enter Question"/>
<br>
Question Type:
<select name="element">
<option value="text">Checkbox</option>
<option value="text">Multiple Choice</option>
<option value="text">Open Text</option>
<option value="number">Open Number</option>
<option value="text">Ordered List</option>
<option value="image">Picture</option>
<option value="text">True or False</option>
</select>
<br>
Other open answer option:
<select name="element">
<option value="text">False</option>
<option value="text">True</option>
</select>
<br>
<br>
<span id="lastAns"></span>
<br>
<input type="button" value="Add Answer Option" onclick="addAns()"/>
<br>
<br>
</div>
<span id="lastQues"></span>
<input type="button" value="Add New Question" onclick="addQues()"/>
</form>
</body>
I have done some investigation about dynamic form. Here are some excellent open-source solutions. They usually do it in this way:
describe form structure as JSON in the backend.
then use one of the following libraries to render JSON to form in the frontend.
jsonform/jsonform
React JSONSchema Form (React) (demo)