I'm coding with asp.net/ c# and i'm trying to get the id and the quantity of a product using ajax. The problem is that my code only recognize the first item otherwise if i tried to enter the quantity of the third product i get an error saying that I haven't provided any quantity.
here's my code :
<script type="text/javascript">
$(function() {
$('.Sendparams').click(function (e) {
e.preventDefault();
debugger;
// var id = $(this).attr('id');
var quant = $("#quant").val();
var id = $("#id").val();
$.ajax({
type: 'GET',
url: '/ShoppingCart/AddToCart',
data:{ "id": id , "quant": quant },
success: function (response) {
$("#mainContainerCenter").html(response); } });});
});
</script>
<section class="content">
<!-- Small boxes (Stat box) -->
<div class="row">
#foreach (var album in Model.Produits)
{
<div class="col-lg-3 col-xs-6">
#Html.Hidden("id", album.ProduitId, new { #id = "id" })<br/>
#album.Nom_Produit<br />
#album.Categorie.Nom_categorie<br />
#String.Format("{0:F}", album.Prix)<br />
#Html.TextBox("quant", null, new { id = "quant" })<br />
#Html.ActionLink("voila", "AddToCart", "ShoppingCart", new { id = album.ProduitId }, new { #class = "Sendparams" })<br />
</div>
}
</div>
id attribute would be the uniq value. In your case the id is not the uniq, you using the "quant" value for all items (id="quant"). If i correctly understand what you try to do this is code can help: https://jsfiddle.net/9usvg6wv/
$(".item").submit(function( event ) {
$('#clickedid').text(
$(this).find('input[name="id"]').val()
);
$('#clickedquant').text(
$(this).find('input[name="quant"]').val()
);
console.log($(this).find('input[name="quant"]').val());
event.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<form action="" class="item" >
<input type="hidden" name="id" value="1" />
<input type="text" name="quant" value="100" />
<input type="submit" class="" >
</form>
<form action="" class="item" >
<input type="hidden" name="id" value="2" />
<input type="text" name="quant" value="200" />
<input type="submit" class="" >
</form>
<form action="" class="item" >
<input type="hidden" name="id" value="3" />
<input type="text" name="quant" value="300" />
<input type="submit" class="" >
</form>
<form action="" class="item" >
<input type="hidden" name="id" value="4" />
<input type="text" name="quant" value="400" />
<input type="submit" class="" >
</form>
</div>
<div>
Clicked id:<span id="clickedid"></span>; quant:<span id="clickedquant"></span>
</div>
Related
I am creating a menu list with php. I want the user to change name and the discount variable in the list. So here is an image of the list:list with items, so for each list item and subitems, there's a button which must open a popup and pass the variables belonging to that listitem, like names and discount variable into the form input field, so the user can adjust it from the old value. I use javascript to open and close the form, and want it also to put the php variables (obtained from a database) into that form. So here is my piece of code:
javascript:
<script>
function updatepopup(**$name**, $discount){
document.getElementById("updatedata").style.display = "block";
document.getElementById("fnaam").value = **$name**";
document.getElementById("fkort").value = $discount;
}
function closeform(){
document.getElementById("updatedata").style.display = "none";
}
</script>
php:
<ol class='tree'> ";
if ($currLevel == $prevLevel) echo " ";
echo '
<li>
<label for="subfolder2">'.$category['name'].'</label>
<label> '.$category['discount'].'%</label>
<input type="checkbox" name="subfolder2">
<form id="updatedata" method="POST">
<label for="fnaam">Naam: </label>
<input type="text" id="fnaam" name="fnaam" value="'.$category['name'].'">
<label for="fkort">Korting</label>
<input type="number" id="fkort" name="fkort" value="'.$category['discount'].'">
<button id="closebutton" onclick="closeform()">X</button>
<button type= "submit"> </button>
</form>
<button onclick="updatepopup()"><i class="fa-solid fa-pen-to-square"></i></button>
';
if ($currLevel > $prevLevel) { $prevLevel = $currLevel; }
$currLevel++;
createTreeView ($array, $categoryId, $currLevel, $prevLevel);
$currLevel--;
}
}
if ($currLevel == $prevLevel) echo "<li><button>+</button></li></li>
</ol>";
}
?>
So I have read many solutions to pass a string to a javascript function but not a single one would help. I only get something like that done with numbers, but I also want to sent a string into that input field.
So this is what I want to get: what I want
You're trying to mix PHP with JavaScript, which should be avoided if possible. There are other ways to pass PHP values to JavaScript, like setting them as HTML attributes.
My approach would be to create a <form> element for each list item and output your PHP $category values in hidden <input /> elements.
<!-- Start list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2"><?= $category['name']; ?></label>
<span><?= $category['discount']; ?>%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="<?= $category["name"]; ?>"/>
<input type="hidden" name="discount" value="<?= $category["discount"]; ?>" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i></button>
</form>
<!-- Nested list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<!-- Structure for every list item.. -->
</form>
</li>
</ol>
</li>
</ol>
<!-- End list -->
<!-- Form to show/hide & update -->
<form id="updatedata" method="POST">
<label for="fnaam">Naam: </label>
<input type="text" id="fnaam" name="fnaam" value="">
<label for="fkort">Korting</label>
<input type="number" id="fkort" name="fkort" value="">
<button type="button" id="closebutton">X</button>
<button type="submit"> </button>
</form>
Then listen for submit events on these forms. When a form gets submitted, make sure the preventDefault() method on the event is called. This will prevent a reload of the page and allows you to write your own behavior.
Extract the values from the submitted form and pass them to your updatepopup function.
const forms = document.querySelectorAll('.js-update-data');
for (const form of forms) {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = new FormData(event.target);
const name = formData.get('name');
const discount = formData.get('discount');
updatepopup(name, discount);
});
}
const closeButton = document.getElementById("closebutton");
closeButton.addEventListener('click', closeform);
function updatepopup(name, discount){
document.getElementById("updatedata").display = "block";
document.getElementById("fnaam").value = name;
document.getElementById("fkort").value = discount;
}
function closeform(){
document.getElementById("updatedata").style.display = "none";
}
Runnable example
This example runs with pre-filled values. The only job you have is to set the values in the right spot.
const forms = document.querySelectorAll('.js-update-data');
for (const form of forms) {
form.addEventListener('submit', event => {
event.preventDefault();
const formData = new FormData(event.target);
const name = formData.get('name');
const discount = formData.get('discount');
updatepopup(name, discount);
});
}
const closeButton = document.getElementById("closebutton");
closeButton.addEventListener('click', closeform);
function updatepopup(name, discount){
document.getElementById("updatedata").hidden = false;
document.getElementById("fnaam").value = name;
document.getElementById("fkort").value = discount;
}
function closeform(){
document.getElementById("updatedata").hidden = true;
}
form[hidden] {
display: none;
}
<!-- Start list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 1</label>
<span>25%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 1"/>
<input type="hidden" name="discount" value="25" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i>edit</button>
</form>
<!-- Nested list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 2</label>
<span>13%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 2"/>
<input type="hidden" name="discount" value="13" />
<button type="submit"><i class="fa-solid fa-pen-to-square">edit</i></button>
</form>
</li>
</ol>
</li>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 4</label>
<span>80%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 4"/>
<input type="hidden" name="discount" value="80" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i>edit</button>
</form>
<!-- Nested list -->
<ol class='tree'>
<li>
<form class="js-update-data">
<label for="subfolder2">Test 3</label>
<span>50%</span>
<input type="checkbox" name="subfolder2">
<input type="hidden" name="name" value="Test 3"/>
<input type="hidden" name="discount" value="50" />
<button type="submit"><i class="fa-solid fa-pen-to-square"></i>edit</button>
</form>
</li>
</ol>
</li>
</ol>
<!-- End list -->
<!-- Form to show/hide & update -->
<form id="updatedata" method="POST" hidden>
<label for="fnaam">Naam: </label>
<input type="text" id="fnaam" name="fnaam" value="">
<label for="fkort">Korting</label>
<input type="number" id="fkort" name="fkort" value="">
<button type="button" id="closebutton">X</button>
<button type="submit"> </button>
</form>
I have (4) radio buttons and submit button:
<form class="addrecipe-form" method="GET">
<div class="addrecipe-form-header-row">
<div>
<input type="radio" class="recipe-type-button" id="breakfast" name="recipe-type" value="breakfast" />
<label for="breakfast" class="recipe-type-label">breakfast</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="appetizer" name="recipe-type" value="appetizer" />
<label for="appetizer" class="recipe-type-label">appetizer</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="entree" name="recipe-type" value="entree" />
<label for="entree" class="recipe-type-label">entree</label>
</div>
<div>
<input type="radio" class="recipe-type-button" id="dessert" name="recipe-type" value="dessert" />
<label for="dessert" class="recipe-type-label">dessert</label>
</div>
</div>
<button class="addrecipe-button" type="submit" name="recipe-submit"></button>
</form>
Here's the javascript:
var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;
addRecipeForm.addEventListener('submit', function(e) {
e.preventDefault();
recipe_entry = {
type : document.querySelector(".recipe-type-button").value)
}
console.log(recipe_entry.type)
I just can't figure out why I keep getting the first radio button's value instead of the one I'm clicking on. Can someone enlighten me, pls?
The "document.querySelector()" function returns the FIRST occurrence of that matching query selector.
I would use a for loop and "document.getElementsByClassName()" to check each radio button's value, and only save the state if it is selected.
Like this:
addRecipeForm.addEventListener('submit', function(e) {
e.preventDefault();
for(var i=0;i<document.getElementsByClassName("recipe-type-button").length){
if(document.getElementsByClassName("recipe-type-button")[i].checked){
recipe_entry = {
type : document.getElementsByClassName("recipe-type-button")[i].value
}
}
}
console.log(recipe_entry.type)
}
Try..
type: document.querySelector(".recipe-type-button:checked").value
.. to get the selected value.
Full script:
<html>
<form class="addrecipe-form" method="GET">
<div class="addrecipe-form-header-row">
<div>
<input
type="radio"
class="recipe-type-button"
id="breakfast"
name="recipe-type"
value="breakfast"
/>
<label for="breakfast" class="recipe-type-label">breakfast</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="appetizer"
name="recipe-type"
value="appetizer"
/>
<label for="appetizer" class="recipe-type-label">appetizer</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="entree"
name="recipe-type"
value="entree"
/>
<label for="entree" class="recipe-type-label">entree</label>
</div>
<div>
<input
type="radio"
class="recipe-type-button"
id="dessert"
name="recipe-type"
value="dessert"
/>
<label for="dessert" class="recipe-type-label">dessert</label>
</div>
</div>
<button class="addrecipe-button" type="submit" name="recipe-submit">
Magic
</button>
</form>
<script>
var addRecipeForm = document.querySelector(".addrecipe-form");
var recipe_entry;
addRecipeForm.addEventListener("submit", function (e) {
e.preventDefault();
recipe_entry = {
type: document.querySelector(".recipe-type-button:checked").value,
};
console.log(recipe_entry.type);
});
</script>
</html>
I have a query to select the data from my database:
function check_po_kode()
{
$key = $this->input->post('key');
$this->db->select('a.NO, b.quantity, b.satuan, b.harga, b.discount, b.sparepart_kode, b.sparepart_name, c.id as id_sparepart');
$this->db->from('purchase_order a');
$this->db->join('purchase_order_item b', 'a.id = b.purchase_order_id');
$this->db->join('sparepart c', 'c.kode = b.sparepart_kode');
$this->db->where(array('a.NO'=>$key));
$result = $this->db->get()->row_array();
if (count($result) > 0)
{
echo json_encode(array('status'=> 1, 'qty_po'=> $result['quantity'], 'satuan'=> $result['satuan'], 'harga'=> $result['harga'], 'discount'=> $result['discount'], 'sparepart_name'=> $result['sparepart_name'], 'sparepart_kode'=> $result['sparepart_kode'], 'id_sparepart'=> $result['id_sparepart'], 'jmlhSparepart'=> $result['jmlhSparepart']));
}
else
{
echo json_encode(array('status'=> 0));
}
}
I already have the result. I want to then show the data in the page with this AJAX code:
//check purchase order kode
$("#purchase-order-kode").blur(function() {
var key = $(this).val();
$.ajax({
url: '<?php echo base_url('
purchase_order / check_po_kode '); ?>',
type: 'post',
dataType: 'json',
data: {
key: key
},
error: function() { },
success: function(res) {
console.log(res);
if (res.status == 1) {
$("#purchase-order-kode-notif").html("Valid");
$('#form').find('#sparepart_id').val(res.id_sparepart);
$('#form').find('#sparepart_kode').val(res.sparepart_kode);
$('#form').find('#sparepart_name').val(res.sparepart_name);
$('#form').find('#quantity').val(res.qty_po);
$('#form').find('#unit').val(res.satuan);
$('#form').find('#price').val(res.harga);
$('#form').find('#discount').val(res.discount);
$('#button_post').prop('disabled', false);
} else {
$("#purchase-order-kode-notif").html("Invalid Kode!");
$('#button_post').prop('disabled', true);
}
}
});
});
<div class="transport-row form-box" style="display: inline-block; width: 1250px">
<h4>Input Item</h4>
<div style="margin-bottom: 20px"></div>
<div class="row-fluid sparepart-row">
<div class="control-group">
<div class="span4">
<fieldset>
<label>Nama Barang</label>
<input type="hidden" name="sparepart_id[]" id="sparepart_id">
<input type="text" name="sparepart_kode[]" class="stok_barang_id" id="sparepart_kode" placeholder=" Kode" readonly style="width: 100px; padding-bottom:4px;">
<div class="input-append">
<input type="text" name="sparepart_name[]" class="stok_barang_name" id="sparepart_name" readonly placeholder="Sparepart name" title="" style="padding-bottom:4px;">
<span class="add-on">
<i data-title="" ime-icon="icon-time" data-date-icon="icon-search" class="icon-search"></i>
</span>
</div>
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Quantity</label>
<input type="text" name="quantity[]" id="quantity" class="quantity" placeholder="99" style="width:65px;" />
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Unit</label>
<input type="text" id="unit" class="unit" placeholder="Unit" style="width: 65px;" readonly/>
</fieldset>
</div>
<div class="span2 span-harga">
<fieldset>
<label>Price</label>
<input type="text" name="price[]" id="price" class="price" value="" placeholder="999" style="width:160px;" readonly/>
</fieldset>
</div>
<div class="span3 span-harga">
<fieldset>
<label>Discount</label>
<input type="text" name="discount[]" id="discount" class="discount" value="" placeholder="10%" style="width:160px;">
<button class="btn btn-primary" id="add_row">+</button>
</fieldset>
</div>
</div>
</div>
</div>
With the above code I succeed in showing only 1 item in the data. If I run that query with Number PO, there is 2 or 3 items returned. How can I show all data from the AJAX request above?
EDIT :
I already tried with :
//check purchase order kode
$("#purchase-order-kode").blur(function(){
var key = $(this).val();
$.ajax({
url : '<?php echo base_url('purchase_order/check_po_kode'); ?>',
type : 'post',
dataType : 'json',
data : {key:key},
error : function(){
},
success : function(res){
console.log(res);
if(res.status == 1){
$("#purchase-order-kode-notif").html("Valid"); $.each(res,function(index,item){ $('#form').find('#sparepart_id').text(item.id_sparepart), $('#form').find('#sparepart_kode').text(item.sparepart_kode), $('#form').find('#sparepart_name').text(item.sparepart_name), $('#form').find('#quantity').text(item.qty_po), $('#form').find('#unit').text(item.satuan), $('#form').find('#price').text(item.harga), $('#form').find('#discount').text(item.discount);
});
$('#button_post').prop('disabled', false);
}else{
$("#purchase-order-kode-notif").html("Invalid Kode!");
$('#button_post').prop('disabled', true);
}
}
});
});
with above code, i cannot showing any data.
i think something like this could be help:
Object.keys(res).forEach(function(item) {
let field = $('#form').find('#' + item);
if (field) field .val(res[item])
})
if your 'res' is just values of fields, then with this code you can dynamically fill all fields.
here is snippet sample:
const res = {
status: 1,
quantity: "1",
unit: "pcs",
price: "59000000",
discount: "0",
sparepart_name: "SHOCK",
sparepart_kode: "MDBUS",
sparepart_id: "2120"
};
$(function() {
$(document).ready(function() {
Object.keys(res).forEach(function(item) {
let field = $('#' + item);
if (field) field.val(res[item])
})
});
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="transport-row form-box" style="display: inline-block; width: 1250px">
<h4>Input Item</h4>
<div style="margin-bottom: 20px"></div>
<div class="row-fluid sparepart-row">
<div class="control-group">
<div class="span4">
<fieldset>
<label>Nama Barang</label>
<input type="hidden" name="sparepart_id[]" id="sparepart_id">
<input type="text" name="sparepart_kode[]" class="stok_barang_id" id="sparepart_kode" placeholder=" Kode" readonly style="width: 100px; padding-bottom:4px;">
<div class="input-append">
<input type="text" name="sparepart_name[]" class="stok_barang_name" id="sparepart_name" readonly placeholder="Sparepart name" title="" style="padding-bottom:4px;">
<span class="add-on">
<i data-title="" ime-icon="icon-time" data-date-icon="icon-search" class="icon-search"></i>
</span>
</div>
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Quantity</label>
<input type="text" name="quantity[]" id="quantity" class="quantity" placeholder="99" style="width:65px;" />
</fieldset>
</div>
<div class="span1 span-qty">
<fieldset>
<label>Unit</label>
<input type="text" id="unit" class="unit" placeholder="Unit" style="width: 65px;" readonly/>
</fieldset>
</div>
<div class="span2 span-harga">
<fieldset>
<label>Price</label>
<input type="text" name="price[]" id="price" class="price" value="" placeholder="999" style="width:160px;" readonly/>
</fieldset>
</div>
<div class="span3 span-harga">
<fieldset>
<label>Discount</label>
<input type="text" name="discount[]" id="discount" class="discount" value="" placeholder="10%" style="width:160px;">
<button class="btn btn-primary" id="add_row">+</button>
</fieldset>
</div>
</div>
</div>
</div>
I'm using this solution to feed inputs and image submissions from a form into a Google Sheet and Folder on Google Drive.
I need to validate a few of the fields - just requiring them to be filled out. Unfortunately, the solution I'm using uses a type="button" to submit the form instead of type="submit" and I'm not quite adept enough at Javascript to change that.
However, I found this solution for validating a form with a type="button" submit - but it's not working. With that implemented my form just does nothing - doesn't validate, doesn't submit.
This specifically is the bit of Javascript I'm struggling to get working:
//Validate Form
function() {
$("#myForm").validate({
rules: {
name: "required"
},
messages: {
name: "Please specify your name"
}
})
$('#btn').click(function() {
$("#myForm").valid();
});
};
It works fine in normal HTML in my browser - but doesn't work in Google Apps, so I'm assuming there's some comma or something in the wrong place since it seems Google has different JS requirements?
The rest of my code and a link to the sheet/form/script are below:
Form.html
<body>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js">
</script>
<script>
// Javascript function called by "submit" button handler,
// to show results.
function updateOutput(resultHtml) {
toggle_visibility('inProgress');
var outputDiv = document.getElementById('output');
outputDiv.innerHTML = resultHtml;
};
// From blog.movalog.com/a/javascript-toggle-visibility/
function toggle_visibility(id) {
var e = document.getElementById(id);
if (e.style.display == 'block')
e.style.display = 'none';
else
e.style.display = 'block';
}'
//Toggle Secondary Categories
$(function() {
$(".box").not("." + this.id).hide(); $("." + this.id).show();
});
//Calculate Split
function check(split)
{
var split=document.forms[0].split.value
var amount=document.forms[0].amount.value
var tip = (amount*split)
document.forms[0].manufacturer.value=tip
var tip2 = (amount-tip)
document.forms[0].pace.value=tip2
};
//Validate Form
function() {
$("#myForm").validate({
rules: {
name: "required"
},
messages: {
name: "Please specify your name"
}
})
$('#btn').click(function() {
$("#myForm").valid();
});
};
</script>
<div id="formDiv" class="form">
<!-- Form div will be hidden after form submission -->
<form id="myForm">
<div class="row">
<h1>Co-op Submission Form</h1>
<h2>Please fill out the form completely, including uploading any documentation associated with your co-op claim.</h2>
</div>
<h3>Your Information</h3>
<h4>Name:</h4> <input name="name" type="text" class="form-control mustHave"/><br/>
<h4>Email:</h4> <input name="email" type="text" class="form-control mustHave"/><br/>
<h3>Co-Op Information</h3>
<h4>Brand:</h4>
<select name="brand" class="form-control">
<option>Select Option</option>
<option>Bluebird</option>
<option>Brown</option>
<option>Ferris</option>
<option>Giant Vac</option>
<option>Honda</option>
<option>Hurricane</option>
<option>Jonsered</option>
<option>Little Wonder</option>
<option>RedMax</option>
<option>SCAG</option>
<option>Snapper Pro</option>
<option>Sno-Way</option>
<option>SnowEx</option>
<option>Wright</option>
<option>Ybravo</option>
</select><br/>
<h4>Invoice Date:</h4> <input name="date" type="text" class="form-control"/><br/>
<h4> Total Co-Op Amount</h4> <input type="text" name="amount" class="form-control"/><br />
<h4>Co-Op Split:</h4>
<input type="radio" name="split" onclick="check(this.value)" value="1">100%<br>
<input type="radio" name="split" onclick="check(this.value)" value=".5">50/50<br>
<input type="radio" name="split" onclick="check(this.value)" value=".75">75/25<br />
<input type="radio" name="split" onclick="check(this.value)" value=".25">25/75 (Dealer Pays 50%)<br />
<h4>Manufacturer Amount:</h4> <input type="text" name="manufacturer" style="border:none;font-weight:bold;"><br />
<h4>Pace Amount:</h4> <input type="text" name="pace" style="border:none;font-weight:bold;" >
<h4>Description:</h4> <input name="reason" type="text" cols="20" rows="5" class="form-control mustHave"/><br />
<h4>Co-Op Category:</h4>
<input type="radio" name="category" id="dealer" value="Dealer Advertising">Dealer Advertising<br />
<input type="radio" name="category" id="online" value="Digital/Online Marketing">Digital/Online Advertising<br />
<input type="radio" name="category" id="meetings" value="Meetings and Schools">Meetings and Schools<br />
<input type="radio" name="category" id="advertising" value="PACE Advertising">PACE Advertising<br />
<input type="radio" name="category" id="pricing" value="Program Pricing Promotions">Program Pricing Promotions<br />
<input type="radio" name="category" id="correspondence" value="PACE-to-Dealer Correspondence">PACE-to-Dealer Correspondence<br />
Other: <input type="text" id="other" name="category" class="form-control"/><br />
<!--Dealer Advertising-->
<div class="dealer box" style="display:none;">
<h4>Dealer Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="Magazine/Newspaper">Magazine/Newspaper<br />
<input type="radio" name="subcategory" value="Open House/Trade Show">Open House & Dealer Trade Show<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="Radio">Radio<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
<input type="radio" name="subcategory" value="TV">TV<br />
<input type="radio" name="subcategory" value="Direct Mail">Direct Mail (post cards, flyers)<br />
<input type="radio" name="subcategory" value="Sponsorships">Sponsorships<br />
</div>
<!--Digital/Online Advertising-->
<div class="online box" style="display: none;">
<h4>Digital/Online Marketing:</h4>
<input type="radio" name="subcategory" value="CMS/Advertising">CMS/Dealer Website Advertising<br />
<input type="radio" name="subcategory" value="TRM Digital Marketing">TRM Digital Marketing (google, facebook, retargeting, demo site, youtube)
</div>
<!--Meetings and Schools-->
<div class="meetings box" style="display: none;">
</div>
<!--PACE Advertising-->
<div class="advertising box" style="display: none;">
<h4>PACE Advertising:</h4>
<input type="radio" name="subcategory" value="Billboards">Billboards<br />
<input type="radio" name="subcategory" value="Logo Merch">Logo Merch (hats, shirts, pens, etc.)<br />
<input type="radio" name="subcategory" value="POP">POP (lit, posters,displays, etc)<br />
<input type="radio" name="subcategory" value="PACE Trade Show">PACE Trade Show<br />
</div>
<!--Program Pricing Promotions-->
<div class="pricing box" style="display: none;">
<h4>Program Pricing Promotions:</h4>
<input type="radio" name="subcategory" value="Promo Prices, Discounts, Rebates - Unassigned">Promo Prices, Discounts, Rebates - Unassigned<br />
<input type="radio" name="subcategory" value="Promo Pricing">Promo Pricing<br />
<input type="radio" name="subcategory" value="Demo">Demo<br />
<input type="radio" name="subcategory" value="Fleet">Fleet<br />
<input type="radio" name="subcategory" value="Spiffs and Rebates">Spiffs and Rebates<br />
</div>
<!--PACE-to-Dealer Correspondence-->
<div class="correspondence box" style="display: none;">
<h4>PACE-to-Dealer Correspondence:</h4>
<input type="radio" name="subcategory" value="Pacesetter Catalog">Pacesetter Catalog<br />
<input type="radio" name="subcategory" value="Dealer Programs (updates, reprints)">Dealer Programs (updates, reprints)<br />
</div>
<h4>Message:</h4> <textarea name="message" class="form-control"></textarea><br/>
<h4> Supporting Documentation:</h4>
<input name="myFile1" type="file"/>
<a onclick="document.getElementById('div1').style.display='';return false;" href="">Submit More</a><br />
<div id="div1" style="display:none;margin: 15px 0;">
<input name="myFile2" type="file"/>
<a onclick="document.getElementById('div2').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div2" style="display:none;margin: 15px 0;">
<input name="myFile3" type="file"/>
<a onclick="document.getElementById('div3').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div3" style="display:none;margin: 15px 0;">
<input name="myFile4" type="file"/>
<a onclick="document.getElementById('div4').style.display='';return false;" href="">Submit More</a><br />
</div>
<div id="div4" style="display:none;margin: 15px 0;">
<input name="myFile5" type="file"/><br /></div>
<br />
<input type="button" value="Validate" id="btn" class="btn" onclick="toggle_visibility('formDiv'); toggle_visibility('inProgress');
google.script.run
.withSuccessHandler(updateOutput)
.processForm(this.parentNode)" />
</form>
<div id="inProgress" style="display: none;">
<!-- Progress starts hidden, but will be shown after form submission. -->
<div class="uploading">Uploading. Please wait...</div>
</div>
<div id="output">
<!-- Blank div will be filled with "Thanks.html" after form submission. -->
</div>
</div>
<!--Begin Footer-->
<div class="footer">
<div class="bottomStrip">
<div class="col-lg-3 col-lg-push-1">© <script type="text/javascript"> document.write(new Date().getFullYear());</script>, PACE, Inc. All rights Reserved.</div>
<div class="col-lg-4 col-lg-push-5">PACE, Inc., 739 S. Mill St., Plymouth, MI 48170-1821</div>
</div>
</div>
<!--End Footer-->
</body>
Code.gs
var submissionSSKey = '1e56M0GL6649pVW0SUwZDR8CjuyTqEwrkAUUWYVmiOpk';
var folderId = "0B3YZCO2xGxYFdHV4Q2pvY0U4d0U";
function doGet(e) {
var template = HtmlService.createTemplateFromFile('Form.html');
template.action = ScriptApp.getService().getUrl();
return template.evaluate();
}
function processForm(theForm) {
var fileBlob1 = theForm.myFile1;
var fileBlob2 = theForm.myFile2;
var fileBlob3 = theForm.myFile3;
var fileBlob4 = theForm.myFile4;
var fileBlob5 = theForm.myFile5;
var folder = DriveApp.getFolderById(folderId);
var doc1 = folder.createFile(fileBlob1);
var doc2 = folder.createFile(fileBlob2);
var doc3 = folder.createFile(fileBlob3);
var doc4 = folder.createFile(fileBlob4);
var doc5 = folder.createFile(fileBlob5);
// Fill in response template
var template = HtmlService.createTemplateFromFile('Thanks.html');
var name = template.name = theForm.name;
var email = template.email = theForm.email;
var brand = template.brand = theForm.brand;
var date = template.date = theForm.date;
var amount = template.amount = theForm.amount;
var split = template.split = theForm.split;
var manufacturer = template.manufacturer = theForm.manufacturer;
var pace = template.pace = theForm.pace;
var reason = template.reason = theForm.reason;
var category = template.category = theForm.category;
var subcategory = template.subcategory = theForm.subcategory;
var message = template.message = theForm.message;
var fileUrl1 = template.fileUrl1 = doc1.getUrl();
var fileUrl2 = template.fileUrl2 = doc2.getUrl();
var fileUrl3 = template.fileUrl2 = doc3.getUrl();
var fileUrl4 = template.fileUrl2 = doc4.getUrl();
var fileUrl5 = template.fileUrl2 = doc5.getUrl();
// Record submission in spreadsheet
var sheet = SpreadsheetApp.openById(submissionSSKey).getSheets()[0];
var lastRow = sheet.getLastRow();
var targetRange = sheet.getRange(lastRow+1, 1, 1, 17).setValues([[name, email,brand,date,amount,split,manufacturer,pace,reason,category,subcategory,message,fileUrl1,fileUrl2,fileUrl3,fileUrl4,fileUrl5]]);
// Return HTML text for display in page.
return template.evaluate().getContent();
}
Link to Sheet
Based from this SO question, in type="button" buttons will not submit a form and they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application while type="submit" buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.
I suggest to use type="submit" instead of type="button" since it will submit the form when clicked when it's inside a form element as stated in this documentation.
Hope this helps!
Hello i am trying to edit the user with localStorage, but can't seem to parse the value of my user info to the input field of my "EditUser" form.
I have read that set/getItem() should be used, but have tried with my User:index without success.
How can i EDIT the current user that has logged in via localStorage?
Fiddle example
http://jsfiddle.net/f3dsfpob/6/
HTML
<form id="userReg">
<div class="item text">
<label>Username:</label>
<div class="field">
<input type="text" name="user_name" id="nameUSER" />
</div>
</div>
<div class="item text">
<label>Password:</label>
<div class="field">
<input type="password" name="password" />
</div>
</div>
<div class="button-wrapper">
<div class="item button button-default">
<div class="field">
<input type="submit" id="registerUser" value="Register" />
</div>
</div>
</div>
<input type="hidden" name="id_entry" value="0" />
</form>
<fieldset name="Login" id="logUser">
<legend>Login</legend>
<input type="text" name="first_name" id="firstName" />
<br />
<input type="password" id="passWord" />
<br />
<div class="item button">
<div class="field">
<input type="button" id="logIN" value="login" />
</div>
</div>
<p id="result"></p>
<p id="negative"></p>
</fieldset>
<div id="form">
<form id="EditUser">
<table class="form">
<tr>
<td>
<input type="text" name="changeUser" placeholder="username" />
</td>
</tr>
<tr>
<td>
<input type="text" name="changePass" placeholder="password" />
</td>
</tr>
<tr>
<td colspan="2" class="button">
<input id="formSubmit" type="button" value="Undo" onClick="dbClear()" />
<input id="formSubmit" type="button" value="Change" onClick="dbEdit()" />
</td>
</tr>
</table>
<input id="inputAction" type="hidden" name="action" value="add" />
<input id="inputKey" type="hidden" name="key" value="0" />
</form>
</div>
<p id="loginResult"></p>
<p id="negative"></p>
<p id="registerResult"></p>
JAVASCRIPT
var User = {
index: window.localStorage.getItem("User:index"),
$form: document.getElementById("userReg"),
$button_register: document.getElementById("registerUser"),
$button_login: document.getElementById("logIN"),
init: function () {
if (!User.index) {
window.localStorage.setItem("User:index", User.index = 1);
}
User.$form.addEventListener("submit", function (e) {
var entry = {
id: parseInt(this.id_entry.value),
user_name: this.user_name.value,
password: this.password.value,
e_mail: this.e_mail.value
};
if (entry.id == 0) {
User.storeAdd(entry);
}
e.preventDefault();
}, true);
User.$button_login.addEventListener("click", function (e) {
for(var i = 1; i < User.index; i++) {
var key = "User:" + i;
var entry = JSON.parse(localStorage[key]);
console.log("entry : ", key, entry);
if (document.getElementById("firstName").value == entry.user_name && document.getElementById("passWord").value == entry.password) {
alert("Logged in as"+" "+entry.user_name);
document.getElementById("loginResult").innerHTML = "Logged in as"+" "+entry.user_name;
console.log("entry : ", key, entry);
LoginUser();
e.preventDefault(e);
}
else
{
document.getElementById("negative").innerHTML = "Username or Password does not match";
}
}
});
},
storeAdd: function (entry) {
entry.id = User.index;
window.localStorage.setItem("User:index", ++User.index);
window.localStorage.setItem("User:" + entry.id, JSON.stringify(entry));
document.getElementById("registerResult").innerHTML = "Registration succesful";
return;
}
};
User.init();
You have a couple of things wrong.
e_mail: this.e_mail.value
There is no email field. This throws an error and makes your form submit handler not prevent default.
Btw - it may not be a good idea to store user info in LocalStorage like that.