Assingning unique id and names? - javascript

I have a html table with one prototype row. Prototype row has few tds and each td has input element. I am trying to clone the row and assign unique ids and names. But in Fire fox new ids and names are assigned properly. But in IE unique ids and names are not assigned. This logic works fine in FF. But in IE7 it does not work.
html Table:
<table class="myTable">
<tr class="prototype">
<td>
<label for="myValue1">MY Value ONE:</label><br>
<input class="required email" id="myValue1" type="text" value="" name="myValue1">
</td>
<td>
<label for="myValue2">MY Value TWO:</label><br>
<input class="required email" id="myValue2" type="text" value="" name="myValue2">
</td>
<td>
<label for="myValue3">MY Value THREE:</label><br>
<input class="required email" id="myValue3" type="text" value="" name="myValue3">
</td>
<td>
<label for="myValue4">MY Value FOUR:</label><br>
<input class="required email" id="myValue4" type="text" value="" name="myValue4">
</td>
</tr>
</table>
JQuery code:
$("#new").click(function(e) {
e.preventDefault();
var d = new Date();
var counter = d.getTime();
var master = $("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.addClass("contact");
prot.find("#myValue1").attr('id',"myValue1"+counter);
prot.find("#myValue2").attr('id',"myValue2"+counter);
prot.find("#myValue3").attr('id',"myValue3"+counter);
prot.find("#myValue4").attr('id',"myValue4"+counter);
prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);
jQuery('table.myTable tr:last').before(prot);
});
But with the above code unique ids and names are not assigned.am i doing anything wrong here?
Thanks!

You don't needs IDs:
<label>MY Value ONE:<br /><input class="required email" type="text" name="myValue1[]" /></label>
Now you can clone this label as many times as needed, and it'll work.
On the server side, you can then access (for example in PHP) $_POST['myValue1'] as an array.

Sorry to tell you, but everything seems fine with what you did. I tried the example you gave on IE and it seems to work.
If you inspect it with Developer Tools you still see the old id? what version of IE?
here is the code I tried:
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script>
$(function() {
$("#new").click(function(e) {
e.preventDefault();
var d = new Date();
var counter = d.getTime();
var master = $("table.myTable");
var prot = master.find("tr.prototype").clone();
prot.removeClass('prototype');
prot.addClass("contact");
//$(prot.find("input")[0])
prot.find("#myValue1").attr('id',"myValue1"+counter);
prot.find("#myValue2").attr('id',"myValue2"+counter);
prot.find("#myValue3").attr('id',"myValue3"+counter);
prot.find("#myValue4").attr('id',"myValue4"+counter);
prot.find("#myValue1"+counter).attr('name',"myValue1"+counter);
prot.find("#myValue2"+counter).attr('name',"myValue2"+counter);
prot.find("#myValue3"+counter).attr('name',"myValue3"+counter);
prot.find("#myValue4"+counter).attr('name',"myValue4"+counter);
jQuery('table.myTable tr:last').before(prot);
counter++;
});
});
</script>
</head>
<body>
<table class="myTable">
<tr class="prototype">
<td>
<label for="myValue1">MY Value ONE:</label><br>
<input class="required email" id="myValue1" type="text" value="" name="myValue1">
</td>
<td>
<label for="myValue2">MY Value TWO:</label><br>
<input class="required email" id="myValue2" type="text" value="" name="myValue2">
</td>
<td>
<label for="myValue3">MY Value THREE:</label><br>
<input class="required email" id="myValue3" type="text" value="" name="myValue3">
</td>
<td>
<label for="myValue4">MY Value FOUR:</label><br>
<input class="required email" id="myValue4" type="text" value="" name="myValue4">
</td>
</tr>
</table>
<input type="button" id="new" />
</body>
</html>

Related

On change attribut is not initialised in thymeleaf

I have the following problem with javascript integrated into thymeleaf template.
I have the following table with different input fields which are filled up with data from a model.
Furthermore i have for each of this input field a hidden additional input field.
Idea is that when I change not hidden input tag, the hidden ones will receive the new value
<tr th:each=" item : ${products}">
<td>
<input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
</td>
<td>
<input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
</td>
<td>
<input class="form-control" type="text" th:onchange="substituteOnClick()" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.MinQuantity}" th:onchange="substituteOnClick()" id="minquantityItem" name="minquantityItem" />
</td>
<td>
<form th:action="#{/deleteWarehouseItem/{id_del}/(id_del=${item.id})}" method="post" role="form" class="ui form">
<button type="submit" class="ui form" name = "itemDel" th:value="${item.id}">Löschen</button>
</form>
</td>
<td>
<form class="ui form" method="post" th:action="#{/updateItem}" >
<input type="hidden" name="productName_mvc" id="productName_mvc" value="0" th:value="${item.product.name}"/>
<input type="hidden" name="productPrice_mvc" id="productPrice_mvc" value="0" th:value="${{item.product.price}}"/>
<input type="hidden" name="quantityItem_mvc" id="quantityItem_mvc" value="0" th:value="${item.quantity}"/>
<input name="minquantityItem_mvc" id="minquantityItem_mvc" value="0" />
<input type="hidden" name="inventoryIdentifier_mvc" id="inventoryIdentifier_mvc" th:value="${item.id}"/>
<button type="submit" class="ui labeled icon button" name = "updateItem" th:text="#{management.updateItem}">
</button>
</form>
</td>
</tr>
Here is my javascript file
function substituteOnClick() {
var pN=document.getElementById("productName").value;
var pP=document.getElementById("productPrice").value;
var qI=document.getElementById("quantityItem").value;
var MqI=document.getElementById("minquantityItem").value;
document.getElementById("productName_mvc").value=pN;
document.getElementById("productPrice_mvc").value=pP;
document.getElementById("quantityItem_mvc").value=qI;
document.getElementById("minquantityItem_mvc").value=MqI;
}
As you see my problem is that for each row I need 2 buttons for different actions, since that I decided that It would be useful just to change values of hidden inputs. It is possible because I use hidden inputs only if I need to update an object and it happens mainly on change event. But my problem is that even if I write anything new in not hidden inputs, it does not influence my hidden ones. I have cheked it by not hidding one of them.
How is it possible to change values in other inputs by changing them firstly in other ones.
Best wishes
first of all, you need to remove these extra brackets from this line
<input class="form-control" type="text" th:value="${{item.product.price}}" id="productPrice" name="productPrice" />
and then in your javascript use console.log() to check whether on onchange event its fetching the change value or not like
console.log("In js function");
console.log(qI);
if you are not getting these values then Instead of onchange event add a button for each input or for all input use a single button inside form and then use the onClick function or onsubmit like this:
<form onsubmit="return substituteOnClick()">
<td>
<input class="form-control" type="text" th:value="${item.product.name}" id="productName" name="productName" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.product.price}" id="productPrice" name="productPrice" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.quantity}" id="quantityItem" name="quantityItem" />
</td>
<td>
<input class="form-control" type="text" th:value="${item.MinQuantity}" id="minquantityItem" name="minquantityItem" />
</td>
<input type="submit" name="Submit" value="Submit"/>
</form>
Let me know if this helps

Reading values from a dynamic table form

OK. So I am assisting my backend developer with some form submission issues. Here's the scenario :
There is a table inside a html form with two columns and dynamic rows. The user can click on an Add button to insert a row with one text input for each column. I did that using jQuery. Here's how the table looks after the user has inserted two rows :
<form>
...
<tbody class="table-hover addScreen">
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="a"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="b"> </td>
</tr>
<tr>
<td class="text-left"> <input name="screenNameTextBox" type="text" id="screenNameTextBox" value="c"> </td>
<td class="text-left"> <input name="seatsAvlTextBox" type="text" id="seatsAvlTextBox" value="d"> </td>
</tr>
</tbody>
...
</form>
Now we have no idea how to read this data on the server side when the submit button is clicked. We tried this :
string textboxval1 = screenNameTextBox.value;
string textboxval2 = seatsAvlTextBox.Value;
but that only gives us the first set of values. Please suggest what are the best practices when doing something like this.
PS : I'm an iOS dev so forgive me if i said some blunder. ;-)
Just a quick example of my comment,
function readForm(){
event.preventDefault;
var resultsBox= document.getElementById('results');
var screenNames=document.getElementsByClassName('screenNameTextBox');
var seatsAv=document.getElementsByClassName('seatsAvlTextBox');
for(var i=0;i<=screenNames.length;i++){
resultsBox.innerHTML+=screenNames[i].value+' '+seatsAv[i].value+'<br>';
}
}
<form onsubmit="readForm();">
Enter some values:<br>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="text" class="screenNameTextBox"/>
<input type="text" class="seatsAvlTextBox"/>
<input type="submit" />
</form>
<div id="results">results :<br></div>

Google apps script canot set values from form table

I have a html form like
<script>
function formSubmit() {
google.script.run.getValuesFromForm(document.forms[0]);
}
</script>
<form>
<table border="1" cellpadding="1" cellspacing="1" style="width: 500px;">
<tbody>
<tr>
<td>
<input id="date" name="date" style="width:125px;" type="date" />
</td>
<td>
<input id="type" name="type" style="width:125px;" type="text" />
</td>
<td>
<input id="status" name="status" style="width:125px;" type="text" />
</td>
<td>
<input id="name" name="name" style="width:125px;" type="text" />
</td>
<td>
<input id="comment" name="comment" style="width:125px;" type="text" />
</td>
<td>
<input id="where" name="where" style="width:125px;" type="text" />
</td>
</tr>
</tbody>
</table>
</form>
<input onclick="formSubmit()" type="button" value="Submit" />
and trying to put all data to sheet but i got empty cells, if i add .value on the end of variables
form.date.value
then row do not inserting at all
function getValuesFromForm(form) {
var s1 = form.date,
s2 = form.type,
s3 = form.status,
s4 = form.name,
s5 = form.comment,
s6 = form.where,
index = 2,
sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
sheet.insertRowBefore(index).getRange(index, 1).setValues([s1,s2,s3,s4,s5,s6]);
}
But this code works as well
sheet.appendRow([s1,s2,s3,s4,s5,s6]);
What i doing wrong?
You need to read value property of input elements:
var s1 = form.date.value,
s2 = form.type.value,
s3 = form.status.value,
s4 = form.name.value,
s5 = form.comment.value,
s6 = form.where.value,
You must have a google.script.run in your HTML somewhere that calls the server side code.
https://developers.google.com/apps-script/guides/html/reference/run
google.script.run is an API that enables you to communicate from the users computer, to Google's servers.
I don't see a submit button in your code, or a <script> tag, or an onClick event. There are various ways to configure the form submission, but there needs to be a google.script.run.myServerFunctionName() call to trigger the function in the .gs Apps Script file.
You can use google.script.run directly from a SUBMIT button:
<input type="button" value="Not Clicked"
onclick="google.script.run
.withSuccessHandler(updateButton)
.withUserObject(this)
.getEmail()" />
, or an button with an HTML onclick Event Attribute:
<button onclick="myFunction()">Click me</button>
or a HTML onsubmit Event Attribute:
<form onsubmit="myFunction()">
Enter name: <input type="text">
<input type="submit">
</form>
and from a SCRIPT tag:
<script>
function myFunction() {
google.script.run.doSomething();
};
</script>
You can pass the data in various ways. There are lots of ways to configure the HTML and client side code.
Solved
var rowData=[[s1,s2,s3,s4,s5,s6]];
sheet.insertRowBefore(index).getRange(index, 1,1,6).setValues(rowData);

Autocomplete isn't working

I have a problem with my autocomplete. When I use the first one input text will be used for autocomplete but when I use add function that I create to append the same element like the first one it doesn't work.
Here is my code:
<script>
$(document).ready(function(){
$("#addCF").click(function(){
$("#customFields").append('<tr valign="top"><th scope="row"><label for="customFieldName">Custom Field</label></th><td><input type="text" class="med" name="customFieldName[]" value="" placeholder="รายชื่อยา" /> <input type="text" class="code" name="customFieldValue[]" value="" placeholder="Input Value" /> Remove</td></tr>');
});
$("#customFields").on('click', '#remCF', function(){
$(this).parent().parent().remove();
} );
});
</script>
<script>//auto complete Code
$(function() {
$('.med').autocomplete({
source: "show.php",minLength: 2,
select:function( event, ui ) {
$('#name').val(ui.item.name);
}
});
});
</script>
<table class="form-table" id="customFields">
<div id="name" ></div>
<tr valign="top">
<th scope="row"><label for="customFieldName">Custom Field</label></th>
<td>
<input type="text" class="med" name="customFieldName[]" value="" placeholder="รายชื่อยา" />
<input type="text" class="code" name="customFieldValue[]" value="" placeholder="จำนวน" />
ADD
</td>
</tr>
</table>
http://jsfiddle.net/earc4436/3/
This is happening because you are using an ID in your Javascript, when you add the second field they are duplicated. You either need to use a class or change the ID for each field in your form.
<input type="text" class="code" id="customFieldValue" name="customFieldValue[]"
value="" placeholder="จำนวน" />

Adding a new item to a checklist

I am trying to create a checklist that allows users to add their own items.
This is part of my HTML:
<tr>
<td>
<input name="checkbox65" id="checkbox65" type="checkbox" />
</td>
<td>
<label for="checkbox65">Get directions for where you are going</label>
</td>
</tr>
<h3>
My items
</h3>
<fieldset data-role="controlgroup">
<label for="textinput4">Add new item</label>
</td>
<input name="new_item" id="textinput4" placeholder="" value="" type="text"
/>
</fieldset>
<input type="submit" id="add" value="Add" />
And this is my script:
<script>
$('#add').on('click', function (e) {
var $this = $(this);
var $newRow = $this.closest('table').find('tr:first').clone();
$newRow.find(':input').val('');
$newRow.insertAfter($this.parent());
});
</script>
But I just do not get any response..
Is this what you need ?
HTML
<h3>My items</h3>
<table id="myTable">
<tr>
<td>
<label for="checkbox65">
<input name="checkbox65" class="checkbox65" type="checkbox" />
Get directions for where you are going
</label>
</td>
</tr>
<tr><td>
<fieldset data-role="controlgroup">
<label for="textinput4">
Add new item
<input name="new_item" id="textinput4" placeholder="" value="" type="text" />
</label>
</fieldset>
<button id="add">Add</button>
</td></tr>
</table>
Notice I've changed id="checkbox65" to class="checkbox65" because you can't use same id twice. Also changed input type=submit to <button> for adding new elements.
JS
$('#add').on('click', function (e) {
var $this = $(this);
var $firstRow=$this.closest('table').find('tr:first');
var $newRow = $firstRow.clone();
$newRow.find(':input').prop('checked', false);
$newRow.insertAfter($firstRow);
});
DEMO.
Update: Or maybe this one or this one.

Categories