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
Related
I have a noob question.
i have a form with a text field. If i type something in, and push enter, no result. If i type something in, and push the button, i get the result i want. Can someone help me fix this - this is written in vue.js
<div class ="well">
<form class="form-inline" onsubmit="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
</form>
</div>
<input id="clickMe" type="button" value="clickme" v-on:click="searchName" />
You may add an event in your text field.
<input
type="text"
name="name"
class="form-control"
v-model="search"
v-on:keyup.enter="searchName"
/>
Or add a submit event in your form
<form
class="form-inline"
v-on:submit.prevent="searchName"
>
put your button inside the <form> tag and change the button type to submit:
<div class ="well">
<form class="form-inline" #submit.prevent="searchName">
<h1><label>Enter Search</label></h1>
<input type="text" name="name" class="form-control" v-model="search">
<input id="clickMe" type="submit" value="clickme"/>
</form>
</div>
EDIT
instead of onclick event in the button, use #submit.prevent in the form.
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);
Well I've html form where 2 radio button exist. 1) Fixed 2) Tiered.
Fixed radio button has 2 field: 1) Fees 2) Additional Fees
Tiered radio button has 3 field : 1) Tier 1% 2) Tier 1$ 3) Tier 2%
So, If fixed radio button is selected then "Fees" and "Additional Fees" field should be show.
And if Tiered radio button is selected then only "Tier 1%" and "Tier 1$" and "Tier 2%" and "Additional Fees" field should be show.
Now First issue is : after first load the page it's showing Fees and Addition Fees field. It's ok. But if i select Tiered radio button it's show all field including "Fees". but I don't want to show this only "Fees" field.
Second Issue is : If i select Tirered it's process the page but if select Fixed then it's don't submit the page.
Html Form
<form action="agent-quote-submitted.php?property_id=<?=$property_id?>" method="post" name="regForm" id="regForm" >
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td>Type:</td>
<td><input type="radio" value="F" id="offer_typef" name="offer_type" required /> <b>Fixed</b> </td>
<td><input type="radio" value="T" id="offer_typet" name="offer_type" required /> <b>Tiered</b></td>
<script type="text/javascript">
$('#regForm').change(function() {
if ($('#offer_typet').prop('checked')) {
$('#show-me').show();
} else {
$('#show-me').hide();
}
});
$('#regForm').change(function() {
if ($('#offer_typef').prop('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
});
</script>
</tr>
<tr>
<td colspan="3">
<div id='show-me' style='display:none'>
<div class="form-group">
<table class="table table-striped table-bordered table-hover" id="dataTables-example">
<tr>
<td>%</td>
<td><input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required ></td>
</tr>
<tr>
<td>$</td>
<td><input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required > </td>
</tr>
<tr>
<td>%</td>
<td><input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required></td>
</tr>
</table>
</div>
</div>
</td>
</tr>
<tr>
<div id='show-me2' style='display:none'>
<td>%</td>
<td>
<input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text" id="feestructure" size="40" required>
</td>
<td></td>
</div>
</tr>
<tr>
<td>$</td>
<td><span class="required inputfield2"></span><br>
<input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40" class="form-control" required>
</td>
<td></td>
</tr>
<tr>
<td colspan="3"><input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary"></td>
</tr>
</table>
</form>
Okay, this puzzled me for a bit and I tore apart your form bit by bit until I realized you have your fixed fees wrapped in a div that is nested around table rows. That ain't gonna work.
Make sure one of your radios is checked on load and you set your displays accordingly.
Make sure you can correctly hide-show elements (you can't partially hide row elements by wrapping them in a div. That is not allowed. You can wrap a table in a div, but not a row or cell. You can, however, simply hide/show the tr instead (which I do in the fiddle).
I would recommend adding just one listener (binding) and putting all the logic in there instead of two different binds.
I made a fiddle here: http://jsfiddle.net/C9jad/6/
$(function () {
$('tr#feesFixed')[0].style.display = 'none';
$('div#feesTiered')[0].style.display = 'none';
toggleFees(); // Call this once on ready
console.log($('#offer_typef').prop('checked'))
console.log($('#offer_typet').prop('checked'))
// Single binding here to call encapsulated logic
$('#regForm input:radio').on('click', function(event){
toggleFees();
});
});
function toggleFees() {
if( $('#offer_typef').prop('checked') ) {
$('#feesTiered').hide();
$('#feesFixed').show();
} else {
$('#feesFixed').hide();
$('#feesTiered').show();
}
};
I tore up a few pieces until I realized your real problem was the illegal nesting.
But that should help you fix it straight away.
#1 I will assume that you're working under Bootstrap CSS framework because your <input> class is form-control
#2 I did remove all <table> tags because I couldn't understand anything from your HTML structure
First issue is : after first load the page it's showing Fees and
Addition Fees field. It's ok. But if i select Tiered radio button it's
show all field including "Fees". but I don't want to show this only
"Fees" field.
the solution for this is to wrap:
fixed input into a its own div
tierd inputs (3) into a another div
Leaving Additional fees input without a div since it must be present in both cases
I swapped and assigned show-me to Fixed and show-me2 to tierd (to keep things organized)
HTML:
<form action="" method="post" name="regForm" id="regForm" >
Type: <input type="radio" value="F" id="offer_typef" name="offer_type" required checked /> <b>Fixed</b>
<input type="radio" value="T" id="offer_typet" name="offer_type" required /> <b>Tiered</b>
<!-- Fixed -->
<div id='show-me'>
% <input name="feestructure" placeholder=" Fees " class="form-control" onKeyPress="validate(event)" value="" type="text" id="feestructure" size="40" required />
</div>
<!-- Tierd -->
<div id='show-me2' style='display:none'>
<div class="form-group">
% <input name="trate1" onkeypress="validate(event)" placeholder=" Tier 1 %" type="text" id="trate1" value="<?=$trate1?>" size="40" class="form-control" required />
$ <input name="trate1dollar" onkeypress="validate(event)" placeholder=" Tier 1 $" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />
% <input name="trate2" onkeypress="validate(event)" placeholder=" Tier 2 %" type="text" id="trate2" value="<?=$trate2?>" size="40" class="form-control" required />
</div>
</div>
<!-- Additional field -->
$ <span class="required inputfield2"></span><br>
<input name="budget" placeholder=" Additional fees " onkeypress="validate(event)" type="text" value="<?=$budget?>" id="fees" size="40" class="form-control" required />
<!-- Submit button -->
<input name="doRegister" type="submit" id="doRegister" value="Submit Quote" class="btn btn-primary" />
</form>
Second Issue is : If i select Tirered it's process the page but if
select Fixed then it's don't submit the page.
this caused because all of your form inputs has the attribute required, when you click tiered radio button the show-me display is set to none which makes impossible for the form to be submitted unless you remove the required attribute with JS help or validate the form on server-side
I did simple required changes on JS side
#offer_typef attribute changes effect the div #show-me
#offer_typet attribute changes effect the div #show-me2
JS:
$('#regForm').change(function() {
if ($('#offer_typef').prop('checked')) {
$('#show-me').show();
$('#show-me input').attr('required');
} else {
$('#show-me input').removeAttr('required');
$('#show-me').hide();
}
});
$('#regForm').change(function() {
if ($('#offer_typet').prop('checked')) {
$('#show-me2').show();
} else {
$('#show-me2').hide();
}
});
Here's the jsFiddle
Remember: Making an input hidden (display:none;) doesn't mean that it won't be passed to server!
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>
I have a form which changes the inputfields depending on a radio-button.
for text there appears a textbox
for textarea there appear additional 2 fields for cols And rows
for select, checkbox and radio there appear additional fields with appendchild
have a look here:
http://joomla.byethost16.com/php.php
Now what i want is to let the user add more params, param2, param3, etc.
Unfortunately i made the js functions that trigger the fields according to the radio-button like this
function textarea(){
if (document.getElementById('option2').checked = true){
document.getElementById('feld').style.display = '';
document.getElementById('feld2').style.display = '';
document.getElementById('feld4').style.display = 'none';
}}
So that means i have no dynamics in my form since the id in this function is not yet dynamic and onclick will trigger anything or only always the first param1.
all params should be like this but somehow increasing numbers and the Js-function for the radio should take them too
<td>Param_1</td>
<td><p>
<input type="radio" onclick='text()' name="option0" id="option0" value="text" checked="yes">text
<input type="radio" onclick='spacer()' name="option0" id="option1" value="spacer">spacer
<input type="radio" onclick='textarea()' name="option0" id="option2" value="textarea">textarea
<input type="radio" onclick='selecta()' name="option0" id="option3" value="select">select
<input type="radio" onclick='radio()' name="option0" id="option4" value="radio">radio
<input type="radio" onclick='checkbox()' name="option0" id="option5" value="checkbox">checkbox</br>
<input type="hidden" name="fields" value="1" id="fields" />
<div id="feld">
Name <input type="text" name="param1" id="param1" size="40" maxlength="40">
Default<input type="text" name="paramdef1" id="paramdef1" size="40" maxlength="40">
<div id="feld4" style="display:none;">
<input type="text" name="param11" size="40" value="value1" style="display: inline">
<a href=# onclick='add(1)'>add</a> <a href=# onclick='reset()'>reset</a></div>
</div>
<div id="feld2" style="display:none;">
Columns<input type="text" name="cols1" size="20" maxlength="40">Rows<input type="text" name="rows1" size="20" maxlength="40"></div>
</td>
</tr>
How do i do that my form gets dynamically (like i did the "add/reset" at checkboxes) and people can add more params?
For the complete code please go here and view source:
http://joomla.byethost16.com/php.php
thx so much for help on this
i solved it by using $(this) with a "click" bind to each class which sits on the buttons.
another solution would be to use a plugin, for example http://www.mdelrosso.com/sheepit/index.php?lng=en_GB which is very good but relys on a certain structure (you have to define an index at the form, which has to be resorted in processing under most cases since some index_vars can be skipped userwise.)