JQuery iterating over TextField_Counter

JQuery iterating over TextField_Counter - javascript

Can someone please help with collecting the form data from below. The following mark up is looked for x number of customers although I'm struggling to extract the data from the form successfully.
Many thanks,
James
<h5 id="Customer1">
<span>Customer 1</span>
</h5>
<div class="CustomerWrapper">
<input type="hidden" value="0" id="CustomerType0" name="CustomerType0">
<span class="TitleSelect">
<label for="CustomerTitle0">Title</label>
<select id="CustomerTitle0" name="CustomerTitle0">
<option value="-1"></option>
<option value="1">Mr</option>
<option value="2">Mrs</option>
<option value="3">Ms</option>
<option value="4">Miss</option>
</select>
</span>
<span class="FirstInput">
<label for="FirstName0">First Name</label>
<input type="text" value="" name="FirstName0" id="FirstName0">
</span>
<span class="LastInput">
<label for="LastName0">Surname(s)</label>
<input type="text" value="" name="LastName0" id="LastName0">
</span>
My attempt is faily close as I just need the first and lastnames.
$('.PaxDetails .CustomerWrapper').each(function (index) {
var counter = ++index;
var firstName = "#FirstName" + counter;
var lastName = "#LastName" + counter;
var customerName = $(firstName).val() + ' ' + $(lastName).val();
alert(customerName);
});

Doku: .serialize()
$("<selector to get the form>").serialize();
Edit
If you only need the first and last name then you will have to do it by hand...
var customer = [];
$("div.CustomerWrapper").each(function(i, el) {
customer.push({
"FirstName": $("#FirstName" + i, el).val(),
"LastName": $("#LastName" + i, el).val()
});
});
console.log(customer);
jsfiddle

Related

Google Apps Scripts: Function running twice from .showModalDialog form submit

This is my first post and I have searched for days and can not find a solution for this problem.
I have a custom menu in sheets that pops up a .showModalDialog html. A user fills that out with information and clicks submit. This runs a function in the back end that creates folders/files and adds the user data to various sheets etc.
All this is working I have a Ui.alert that I am using to check the data entered is correct and for some reason the function is being trigger twice and the UI.alert is popping up again as a result. I have a fail safe that checks if one of the fields exists so it doesn't write again but the pop up is a really bad user experience.
Any help would be much appreciated.
Function to create custom menu:
function onOpen() {
SpreadsheetApp.getUi()
.createMenu('TOA - Menu')
.addItem('Add New Account', 'addAccount')
.addItem('Update Brand', 'updateBrand')
.addItem('Go Live', 'goLive')
.addToUi();
}
Function to bring up form:
function addAccount() {
const html = HtmlService.createHtmlOutputFromFile('newAccount')
.setTitle('Add New Account')
.setWidth(1000)
.setHeight(800);;
SpreadsheetApp.getUi()
.showModalDialog(html, 'Add New Account');
}
Code for the form:
<!DOCTYPE html>
<html>
<head>
<base target="_top">
<style>
#itemDisplay {
display: none;
}
#modDisplay {
display: none;
}
#priceDisplay {
display: none;
}
#businessTypeDisplay {
display: none;
}
</style>
</head>
<body>
<h1>
Add New Account
</h1>
<form id="myForm" onsubmit="handleNewAccountFormSubmit(this);">
<div>
<label for="newBrand">Brand:</label>
<input name="newBrand" type="text" placeholder="Brand Name" required>
</div>
<div>
<p>Location</p>
<label for="country">Country:</label>
<select name="country" id="" onchange="" required>
<option value="" disabled selected>Select Country</option>
<option value="US">US</option>
</select>
<label for="state">State/Province:</label>
<input name="state" type="text" placeholder="State or province" required>
<label for="city">City:</label>
<input name="city" type="text" placeholder="City" required>
<div>
<label for="businessType">Business Type:</label>
<select name="businessType" id="businessTypeSelect" onchange="businessOtherDisplay(this.value);" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="americanDiner">American Diner</option>
<option value="pizzaParlor">Pizza Parlor</option>
<option value="coffeeShop">Coffee Shop</option>
<option value="candyShop">Candy Store</option>
<option value="iceCreamParlor">Ice Cream Parlor</option>
<option value="burgerShop">Burger Shop</option>
<option value="otherNon_AmericanDiner">Other non-American Diner (Foreign servings)</option>
<option value="other">Other (not listed above)</option>
</select>
</div>
<div id="businessTypeDisplay">
<label for="businessTypeOther">Business Type Other:</label>
<input name="businessTypeOther" type="text" placeholder="Business type if not listed above">
</div>
<div>
<label for="integration">Integration:</label>
<select name="integration" required>
<option value="" disabled selected>Select Request Reason</option>
<option value="square">Square</option>
<option value="clover">Clover</option>
<option value="cloverPilot">Clover Pilot</option>
<option value="stripe">Stripe</option>
<option value="gPay">GPAY</option>
<option value="others" >Others</option>
</select>
</div>
<label for="menuSource">File Attachment/Source:</label>
<input name="menuSource" type="text" placeholder="Path to menu" required url>
<div>
<p>Do you need an item hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableItemOption" type="radio" value="yes" onclick="showItem()">
<label for="no">No</label>
<input name="disableItemOption" type="radio" value="no" checked onclick="hideItem()">
</div>
<div id="itemDisplay">
<label for="itemDisable">Which item(s) should be disabled?</label>
<textarea id="disabledItem" name="itemDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need a modifier hidden/disabled?</p>
<label for="yes">Yes</label>
<input name="disableModOption" type="radio" value="yes" onclick="showMod()">
<label for="no">No</label>
<input name="disableModOption" type="radio" value="no" checked onclick="hideMod()">
</div>
<div id="modDisplay">
<label for="modDisable">Which modifier(s) should be disbaled?</label>
<textarea id="disabledMod" name="modDisable" cols="40" rows="5"></textarea>
</div>
<div>
<p>Do you need to update a price?</p>
<label for="yes">Yes</label>
<input name="updatePrice" type="radio" value="yes" onclick="showPrice()">
<label for="no">No</label>
<input name="updatePrice" type="radio" value="no" checked onclick="hidePrice()">
</div>
<div id="priceDisplay">
<label for="priceUpdate">Which item/modifier needs a price update?</label>
<textarea id="updatedPrice" name="priceUpdate" cols="40" rows="5" priceUpdate></textarea>
</div>
<div>
<label for="otherUpdates">Any other information needed on the menu?</label>
<input name="otherUpdates" type="text" placeholder="List other instructions here">
</div>
<div>
<label for="specialInstructions">Are there special instructions/notes for this brand?</label>
<input name="specialInstructions" type="text" placeholder="List special instructions here">
</div>
<input id="submitButton" type="submit" value="Submit">
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('submitButton').disabled=true;
google.script.run.withSuccessHandler().processNewAccountForm(formObject);
}
function disableSubmit() {
document.getElementById('submitButton').disabled=true;
document.getElementById('submitButton').value='Sending...';
}
function showItem(){
document.getElementById('itemDisplay').style.display ='block';
document.getElementById('disabledItem').required = true;
};
function hideItem(){
document.getElementById('itemDisplay').style.display = 'none';
document.getElementById('disabledItem').required = false;
};
function showMod(){
document.getElementById('modDisplay').style.display ='block';
document.getElementById('disabledMod').required = true;
};
function hideMod(){
document.getElementById('modDisplay').style.display = 'none';
document.getElementById('disabledMod').required = false;
};
function showPrice(){
document.getElementById('priceDisplay').style.display ='block';
document.getElementById('updatedPrice').required = true;
};
function hidePrice(){
document.getElementById('priceDisplay').style.display = 'none';
document.getElementById('updatedPrice').required = false;
};
function businessOtherDisplay(value) {
if(value === "other") {
document.getElementById('businessTypeDisplay').style.display = 'block';
} else {
document.getElementById('businessTypeDisplay').style.display = 'none';
};
};
</script>
</body>
</html>
And the code to handle the logic
function processNewAccountForm(formObject) {
const ui = SpreadsheetApp.getUi();
const ass = SpreadsheetApp.getActiveSpreadsheet();
const ss = ass.getActiveSheet();
const timestamp = Utilities.formatDate(new Date(), "GMT+8", "MM/dd/yyyy HH:mm:ss");
const userEmail = Session.getActiveUser().getEmail();
const brandName = formObject.newBrand;
// Add alert to check data entered is correct
const response = ui.alert('Please confirm the following information is correct:',
'𝗕𝗿𝗮𝗻𝗱 𝗡𝗮𝗺𝗲: ' + formObject.newBrand +
'\n𝗖𝗼𝘂𝗻𝘁𝗿𝘆: ' + formObject.country +
'\n𝗦𝘁𝗮𝘁𝗲: ' + formObject.state +
'\n𝗖𝗶𝘁𝘆: ' + formObject.city +
'\n𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀 𝗧𝘆𝗽𝗲: ' + formObject.businessType +
'\n𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: ' + formObject.integration +
'\n𝗙𝗶𝗹𝗲 𝗦𝗼𝘂𝗿𝗰𝗲: ' + formObject.menuSource +
'\n𝗗𝗼 𝘆𝗼𝘂 𝗻𝗲𝗲𝗱 𝗮𝗻 𝗶𝘁𝗲𝗺 𝗵𝗶𝗱𝗱𝗲𝗻/𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.disableItemOption +
'\n𝗪𝗵𝗶𝗰𝗵 𝗶𝘁𝗲𝗺(𝘀) 𝘀𝗵𝗼𝘂𝗹𝗱 𝗯𝗲 𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.itemDisable +
'\n𝗗𝗼 𝘆𝗼𝘂 𝗻𝗲𝗲𝗱 𝗮 𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗿 𝗵𝗶𝗱𝗱𝗲𝗻/𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.disableModOption +
'\n𝗪𝗵𝗶𝗰𝗵 𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗿𝘀 𝘀𝗵𝗼𝘂𝗹𝗱 𝗯𝗲 𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.modDisable +
'\n𝗗𝗼 𝘆𝗼𝘂 𝗻𝗲𝗲𝗱 𝘁𝗼 𝘂𝗽𝗱𝗮𝘁𝗲 𝗮 𝗽𝗿𝗶𝗰𝗲?: ' + formObject.updatePrice +
'\n𝗪𝗵𝗶𝗰𝗵 𝗶𝘁𝗲𝗺/𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗿 𝗻𝗲𝗲𝗱𝘀 𝗮 𝗽𝗿𝗶𝗰𝗲 𝘂𝗽𝗱𝗮𝘁𝗲?: ' + formObject.priceUpdate +
'\n𝗔𝗻𝘆 𝗼𝘁𝗵𝗲𝗿 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗻𝗲𝗲𝗱𝗲𝗱 𝗼𝗻 𝘁𝗵𝗲 𝗺𝗲𝗻𝘂?: ' + formObject.otherUpdates +
'\n𝗔𝗿𝗲 𝘁𝗵𝗲𝗿𝗲 𝘀𝗽𝗲𝗰𝗶𝗮𝗹 𝗶𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀/𝗻𝗼𝘁𝗲𝘀 𝗳𝗼𝗿 𝘁𝗵𝗶𝘀 𝗯𝗿𝗮𝗻𝗱?: ' + formObject.specialInstructions
, ui.ButtonSet.YES_NO);
if(response === ui.Button.YES) {
var lock = LockService.getScriptLock();
lock.waitLock(60000);
try {
const brandColumn = ss.getRange('D:D');
const brandValues = brandColumn.getValues();
let i = 1;
// Check for exisiting brand name
for(i=1; i < brandValues.length; i++) {
if(brandValues[i].toString().toLowerCase().trim() == brandName.toString().toLowerCase().trim() && ss.getRange(i+1,5).getValue() == 'New Brand'){
ui.alert("Brand name already created");
return;
}
};
// Create folder and PDF with build instructions
const parentFolder = DriveApp.getFolderById("RemovedfolderID");// how does this work with Shared drives? Create and move?
// const parentFolder = DriveApp.getFolderById("RemovedfolderID"); < ---- Team drive ID (notworking..) My folder -> RemovedfolderID
const newFolder = parentFolder.createFolder(brandName);
const docFile = newFolder.createFile(brandName+'.pdf',
'𝗕𝗿𝗮𝗻𝗱 𝗡𝗮𝗺𝗲: ' + formObject.newBrand +
'\n𝗖𝗼𝘂𝗻𝘁𝗿𝘆: ' + formObject.country +
'\n𝗦𝘁𝗮𝘁𝗲: ' + formObject.state +
'\n𝗖𝗶𝘁𝘆: ' + formObject.city +
'\n𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀 𝗧𝘆𝗽𝗲: ' + formObject.businessType +
'\n𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻: ' + formObject.integration +
'\n𝗙𝗶𝗹𝗲 𝗦𝗼𝘂𝗿𝗰𝗲: ' + formObject.menuSource +
'\n𝗗𝗼 𝘆𝗼𝘂 𝗻𝗲𝗲𝗱 𝗮𝗻 𝗶𝘁𝗲𝗺 𝗵𝗶𝗱𝗱𝗲𝗻/𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.disableItemOption +
'\n𝗪𝗵𝗶𝗰𝗵 𝗶𝘁𝗲𝗺(𝘀) 𝘀𝗵𝗼𝘂𝗹𝗱 𝗯𝗲 𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.itemDisable +
'\n𝗗𝗼 𝘆𝗼𝘂 𝗻𝗲𝗲𝗱 𝗮 𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗿 𝗵𝗶𝗱𝗱𝗲𝗻/𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.disableModOption +
'\n𝗪𝗵𝗶𝗰𝗵 𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗿𝘀 𝘀𝗵𝗼𝘂𝗹𝗱 𝗯𝗲 𝗱𝗶𝘀𝗮𝗯𝗹𝗲𝗱?: ' + formObject.modDisable +
'\n𝗗𝗼 𝘆𝗼𝘂 𝗻𝗲𝗲𝗱 𝘁𝗼 𝘂𝗽𝗱𝗮𝘁𝗲 𝗮 𝗽𝗿𝗶𝗰𝗲?: ' + formObject.updatePrice +
'\n𝗪𝗵𝗶𝗰𝗵 𝗶𝘁𝗲𝗺/𝗺𝗼𝗱𝗶𝗳𝗶𝗲𝗿 𝗻𝗲𝗲𝗱𝘀 𝗮 𝗽𝗿𝗶𝗰𝗲 𝘂𝗽𝗱𝗮𝘁𝗲?: ' + formObject.priceUpdate +
'\n𝗔𝗻𝘆 𝗼𝘁𝗵𝗲𝗿 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻 𝗻𝗲𝗲𝗱𝗲𝗱 𝗼𝗻 𝘁𝗵𝗲 𝗺𝗲𝗻𝘂?: ' + formObject.otherUpdates +
'\n𝗔𝗿𝗲 𝘁𝗵𝗲𝗿𝗲 𝘀𝗽𝗲𝗰𝗶𝗮𝗹 𝗶𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀/𝗻𝗼𝘁𝗲𝘀 𝗳𝗼𝗿 𝘁𝗵𝗶𝘀 𝗯𝗿𝗮𝗻𝗱?: ' + formObject.specialInstructions,
MimeType.PDF);
const fileURL = docFile.getUrl();
// add header row to spreadsheet
// Create Spreadsheet in Brand folder. Activity log.
const name = brandName + " Activity Log";
const id = newFolder.getId();
const resource = {
title: name,
mimeType: MimeType.GOOGLE_SHEETS,
parents: [{id: id}]
};
const fileJson = Drive.Files.insert(resource);
const fileId = fileJson.id;
const lastRow = ss.getLastRow();
const newEntry = [
lastRow,
timestamp,
timestamp,
formObject.newBrand,
'New Brand',
formObject.businessType,
formObject.integration,
'=HYPERLINK("'+formObject.menuSource+'")',
userEmail,
fileURL,
,
,
,
,
formObject.city,
formObject.state,
formObject.country,
fileId
];
const newSheet = SpreadsheetApp.openById(fileId);
const sheetRange = newSheet.getSheetByName("Sheet1").getRange(1,1,1,18);
const headers = [
['𝗜𝗻𝗱𝗲𝘅',
'𝗕𝗿𝗮𝗻𝗱 𝗼𝗿𝗶𝗴𝗶𝗻𝗮𝗹 𝗰𝗿𝗲𝗮𝘁𝗲 𝗱𝗮𝘁𝗲',
'𝗧𝗶𝗺𝗲 𝗜𝗻',
'𝗕𝗿𝗮𝗻𝗱 𝗡𝗮𝗺𝗲',
'𝗥𝗲𝗾𝘂𝗲𝘀𝘁 𝗿𝗲𝗮𝘀𝗼𝗻',
'𝗕𝘂𝘀𝗶𝗻𝗲𝘀𝘀 𝘁𝘆𝗽𝗲',
'𝗜𝗻𝘁𝗲𝗴𝗿𝗮𝘁𝗶𝗼𝗻',
'𝗠𝗲𝗻𝘂 𝗦𝗼𝘂𝗿𝗰𝗲',
'𝗖𝗿𝗲𝗮𝘁𝗲𝗱 𝗯𝘆:',
'𝗠𝗲𝗻𝘂 𝗜𝗻𝘀𝘁𝗿𝘂𝗰𝘁𝗶𝗼𝗻𝘀',
'𝗔𝘀𝘀𝗶𝗴𝗻𝗲𝗱 𝘁𝗼?',
'𝗧𝗶𝗺𝗲 𝗢𝘂𝘁',
'𝗖𝗼𝗺𝗽𝗹𝗲𝘅𝗶𝘁𝘆 𝗥𝗮𝘁𝗶𝗻𝗴',
'𝗚𝗼 𝗹𝗶𝘃𝗲 𝗱𝗮𝘁𝗲 𝗮𝗻𝗱 𝘁𝗶𝗺𝗲',
'𝗖𝗶𝘁𝘆',
'𝗦𝘁𝗮𝘁𝗲/𝗣𝗿𝗼𝘃𝗶𝗻𝗰𝗲',
'𝗖𝗼𝘂𝗻𝘁𝗿𝘆',
'𝗔𝗰𝘁𝗶𝘃𝗶𝘁𝘆 𝗟𝗼𝗴']
];
sheetRange.setValues(headers);
// Add data to last row in main tracker
ss.appendRow(newEntry);
// Copy data to spreadsheet brand
const activitySheet = newSheet.getSheetByName("Sheet1")
activitySheet.appendRow(newEntry);
// Flush changes before releasing lock
SpreadsheetApp.flush();
} catch(e) {
ui.alert("System is Busy, Please try again in a moment.");
return
} finally {
lock.releaseLock();
return
}
} else {
// action to take if info is incorrect? or No is clicked
};
};
I know that multiple triggers have been a known issue as per posts from Cooper and others here and here but I can't seem to be able to adopt them for my solution.
Thanks in advance for any ideas.

These are the changes I'd make to the dialog:
<input id="btn1" type="button" value="Submit" onClick="handleNewAccountFormSubmit(this.parentNode);" />
<input type="button" value="Cancel" onclick="google.script.host.close()">
</div>
</form>
<script>
function handleNewAccountFormSubmit(formObject) {
document.getElementById('btn1').disabled=true;
google.script.run.processNewAccountForm(formObject);
}
I'm not saying that your way is wrong. That's just the way I would try to do it. But realistically it's a fairly large dialog and your just going to have to dig in and figure it out. If I were doing it and I was having a lot of problems I'd probably start with a simpler version and get it to work and then slowly add more features.
This is actually a fairly difficult time two write code in the middle of a transition between two runtimes. I've just noticed that I've lost my content assist in some areas in ES5 but they now work in ES6 so things can be difficult to deal with.

Add off option value in JS and html

I want to add off option value in my page
For example, you come in my shop page and choose a package, I want to add an option field for the Discount and when you enter a text that is available on s.txt you receive a discount offer.
For example, you enter a StackOverflow code and in s.txt:
stackoverflow--20
Then the price will be reduced by %20 and displayed.
My source code follows.
JavaScript:
$("#payBtn").click(function() {
$("#count").html($("#member").val());
var price = $("#member").val();
price = price * 5;
location.href = 'https://zarinp.al/levicoder/' + price;
});
$("#name").keyup(function() {
$("#payerName").html($("#name").val());
});
$("#channelInput").keyup(function() {
$("#channel").html($("#channelInput").val());
});
$("#discount").keyup(function() {
$("#disdis").html($("#discount").val());
});
$("#member").click(function() {
$("#count").html($("#member").val());
var price = $("#member").val();
price = price * 5;
$("#amount").html(price);
});
Html:
<div class="box shadow_box purchase_cm_box" >
<h4>Order</h4>
<hr>
<input type="text" class="form-control" id="name" placeholder="Your name"><br>
<input type="text" class="form-control" id="channelInput" placeholder="Your Id"><br>
<input type="text" class="form-control" id="discount" placeholder="discount code"><br>
<div class="form-group">
<select class="form-control" id="member">
<option value="9000">9000 Value</option>
<option value="2000">2000 Value</option>
</select>
<br>
</div>
</div>
<div class="col-lg-4 col-md-4 col-sm-4 col-xs-12 pull-left" id="leftmenu">
<div class="box shadow_box purchase_cm_box" >
<h4>Factor</h4>
<hr>
Your Name : <label id="payerName">don't entered</label><br>
Your id : <label id="channel"></label><br>
discount code : <label id="disdis"></label><br>
Pay Count
<label id="amount">7,000</label>
$
<br><br>
<button class="getBtn" id="payBtn">Pay</button><br>
<p id="payStatus"></p>
</div>
</div>

I tried not to officially answer this question because I am unsure what LeVi needs. But as a result of our conversation in the comments, I was asked to provide code.
Here's my best guess of what LeVi is asking:
let inputCode = "stackoverflow";
let savedCode = "stackoverflow--20"; // derived from file s.txt
let splitSavedCode = savedCode.split('--'); // this will return ['stackoverflow', '20']
if( inputCode == splitSavedCode[0] ) {
// edited after further discussion in comments
let discountPercentage = splitSavedCode[1] / 100;
let discountAmount = price * discountPercentage;
$('#discount').val(discountAmount);
}

add input type select with options in Javascript

I am creating a order form and i am new programming. the idea is that the customer can add new box to order a new product with the quantity. with this code i can create a box with products but i didn't get to put a quantity box beside of the product box. I would like to create one for the products and another one for quantity and when the customer click on New Product create a new product list and a quantity list or a quantity field to enter the value.
I tryed copie the document.create... and change the div, but i don`t know how to direct to another choices. I appreciate if you guys can help-me. Thank you.
JavaScript
var choices = [
"Product1",
"Product2",
"Product3"];
function addInput(divName) {
var newDiv = document.createElement('div');
var selectHTML = "";
selectHTML="<select>";
for(i = 0; i < choices.length; i = i + 1) {
selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";}
selectHTML += "</select>";
newDiv.innerHTML = selectHTML;
document.getElementById(divName).appendChild(newDiv);
var Div = document.createElement('div');
var selectHTML = "";
selectHTML="<select>";
for(i = 0; i < choices.length; i = i + 1) {
selectHTML += "<option value='" + choices[i] + "'>" + choices[i] + "</option>";}
selectHTML += "</select>";
Div.innerHTML = selectHTML;
document.getElementById(divName).appendChild(Div);
HTML
<form class="new" method="post" action="phppage">
<fieldset id="products"> <legend> PRODUCTS </legend>
<select name="tProduct" id="cProduct">
<optgroup label="GALLON BAG">
<option>Product1</option>
<option>Product2</option>
<option>Product3</option>
</optgroup>
</select>
<label for="cQuantity">Quantity:<span style="color:red">*</span></label> <input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>
<div id="dynamicInput"></div>
<input type="button" value="New Product" onclick="addInput('dynamicInput');" />

My suggest is that you wrap the element you wanna clone in a div, and clone it when user click the button then put it under dynamicInput
function addInput(divName) {
var copy = document.getElementById('forclone').cloneNode(true);
document.getElementById(divName).appendChild(copy);
}
document.getElementById('button').onclick = function(){
addInput('dynamicInput');
}
<form class="new" method="post" action="phppage">
<fieldset id="products"> <legend> PRODUCTS </legend>
<div id = 'forclone'>
<select name="tProduct" id="cProduct">
<optgroup label="GALLON BAG">
<option>Product1</option>
<option>Product2</option>
<option>Product3</option>
</optgroup>
</select>
<label for="cQuantity">Quantity:<span style="color:red">*</span></label> <input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>
</div>
<div id="dynamicInput"></div>
<input type="button" value="New Product" id = 'button' />

i would like to say thank you to Z.better because i used the idea that he posted so solve this problem i only made some changes. Follow below the script that worked with me. I am using now. I am sharing this because if someone have this doubt this is the solution.
<script>
function addInput(divName) {
var copy = document.getElementById('forclone').cloneNode(true);
document.getElementById(divName).appendChild(copy);
}
</script>
and
<form class="new" method="post" action="phppage">
<fieldset id="products"> <legend> PRODUCTS </legend>
<div id = 'forclone'>
<select name="tProduct" id="cProduct">
<optgroup label="GALLON BAG">
<option>Product1</option>
<option>Product2</option>
<option>Product3</option>
</optgroup>
</select>
<label for="cQuantity">Quantity:<span style="color:red">*</span></label> <input type="number" name="tQuantity" id="cQuantity" placeholder="Qnt" min="0" max="9999" required/>
</div>
<div id="dynamicInput"></div>
<input type="button" value="New Product" onclick="addInput('dynamicInput');" />
Thank you guys, this website is amazing.

jQuery on change don't return attribute value

Have problem to display select on change attribute id.
PHP:
<form action="" class="form-inline">
<div class="form-group">
<select name="kategorijos" id="kategorijos" class="category form-control" onchange="fetch_select_category(this.value);">
<option value=""></option>
FOREACH
</select>
</div>
<div class="form-group">
<fieldset disabled>
<select id="disabledSelect" name="subcategories" class="subcategory form-control" onchange="fetch_select_product(this.value);" required>
<option value="" disabled selected>Select Subcategory</option>
</select>
</fieldset>
</div>
<div class="form-group">
<td><input type="text" name="gramai" class="form-control" value=""></td>
</div>
<div class="form-group" id="kalb">
<input type='text' name='1[]' value="-" disabled>
<input type='text' name='12[]' value="-" disabled>
<input type='text' name='123[]' value="-" disabled>
<input type='text' name='1234[]' value="-" disabled>
</div>
</form>
My jquery code:
$("select").on('change', function() {
var status = $('select').attr('id');
alert(status);
});
var categoryId = 0;
var category = 0;
var product = 0;
var disableId = 0;
$("#add").click(function () {
categoryId = categoryId + 1;
category = category + 1;
product = product + 1;
disableId = disableId + 1;
$("#item").append('<div class="col-xs-12"><form action=""
class="form-inline"><div class="form-group"><select name="kategorijos"
**....... same code as above (php)**
});
When I select the first row it alerts value. But then I add new row with add button, and then change second select the alert don't work, and I don't get the select id. Where can be the problem? Maybe it doesn't work with append html ?

You need to use event delegation for dynamically generated element and also use this instead of 'select' to get the id of dropdown.
$(document).on('change', 'select', function() {
var status = $(this).attr('id');
alert(status);
});

jquery hiddenbox and listbox discount calculation

I want to use jQuery to calculate value from listbox and hidden
<input type="hidden" id="val1" name="albania" value="100000" />
<select class="span6 chosen" id="val2" name="discount" data-placeholder="Choose a Discount" tabindex="1">
<option value="" />
<option value="10" />10
<option value="20" />20
</select>
and I want to write a value in span
<div class="control-group">
<label class="control-label" >Total Value After Discount</label>
<div class="controls">
<span class="help-inline" id="yaz"></span>
</div>
</div>
Basicly I need to calculate discount from the price and show it for the customers. I tried this code:
<script>
$('input["#val2"]').keyup(function() {
var a = $('input["#val1"]').val();
var b = $(this).val();
$("#yaz").text((a * b) / 100 + a);
});
</script>
but it didnt work.

Try This,
$('#val2').change(function() {
var a = $('#val1').val();
var b = $(this).val();
$("#yaz").text((parseInt(a) * parseInt(b)) / 100 + parseInt(a));
});
You should use change event instead of keyup
Example

You Need to use parseInt
$("#yaz").text((parseInt(a) * parseInt(b)) / 100 + parseInt(a));

We Keep Coding

JavaScript is the programming language of the Web.

JQuery iterating over TextField_Counter - javascript

Related

Google Apps Scripts: Function running twice from .showModalDialog form submit

Add off option value in JS and html

add input type select with options in Javascript

jQuery on change don't return attribute value

jquery hiddenbox and listbox discount calculation

Categories

Resources