serializeArray is not picking up dynamically created form - javascript

I have reviewed many Stack overflow threads on this topic most especially this one
jQuery serializeArray not picking up dynamically created form elements, but none was able to solve the problem
I am searching through firebase database for a match. if there is a match form A is presented but if there is no match, form B is presented.
return CatalogueDB.ref('/FSC/Misc/' + splitinput[index]).once('value').then(function(snapshot) {
console.log(snapshot.val())
var key = snapshot.val().NSN
var Name = snapshot.val().Nomenclature
var resultcard = `
<form id="myform">
<tr class="tr-shadow">
<td style="width: 90px;">
<div>${key}
</div>
<div>
<br>
<button type="button" class="btn btn-secondary mb-1 btn-sm" data-toggle="modal" data-target="#mediumModal">
Add Photos
</button>
</div>
</td><td>
<span class="block ">
${Name}
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="i.e. 20 EA" style="width: 100px;" />
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(this);">Submit</button>
</td>
</tr>
</form>
<tr class="spacer"></tr>
`
container.innerHTML += resultcard;
})
.catch(function(error) {
container.innerHTML += "";
var errorcard = `
<form id="myform">
<tr class="tr-shadow">
<td style="width: 90px;">
<div>${splitinput[index]}
</div>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td>
<span class="status--process">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</span>
</td>
<td class="desc">
<input class="au-input au-input--sm" type="text" name="search" placeholder="Search for datas & reports..." style="width: 90px;" />
</td>
<td>
<button type="button" class="btn btn-primary btn-md" onclick="postitem(this)">Submit</button>
</td>
</tr>
</form>
`
container.innerHTML += errorcard;
})
});
I want to get the input value from the form when submit button is clicked, hence this function
function postitem() {
var data = $('#myform').serializeArray();
console.log(data)
}
the problem is that it only shows empty array [] in console log.
The input values are not retrieved and displayed. How do I capture the input value onclick of the submit button

I'm wondering if one of these things might be causing the problem? I could be wrong but might be worth checking:
1.
Isn't the correct syntax this?
document.getElementById('container').innerHTML += resultcard;
.....instead of this?
container.innerHTML += resultcard;
2.
When including html in a JavaScript file, should the quotes around your html be implemented like this? (Also note the use of the 'standard quote' marks as opposed to using `back quote` marks.)
var resultcard =
'<form id="myform">' +
'<tr class="tr-shadow">' +
'<td style="width: 90px;">' +
.
.
.

Related

Get old value from dynamic input in Laravel with JavaScript?

I want to get the old value from dynamic input on Laravel. If it's a regular input, I only need {{ old ('name') }}. But what if the input is dynamic?
View
<tr>
<td>
<input type="text" name="name_progress[]"
value="{{ old('name_progress[]') }}"
placeholder="Enter name" class="form-control"/>
</td>
<td>
<input type="text" name="payment_percentage[]"
value="{{ old('payment_percentage[]') }}"
placeholder="Enter % invoice" class="form-control"/>
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
JavaScript
<script type="text/javascript">
$("#add-btn").click(function () {
var tr = '<tr>' +
'<td>' +
'<input type="text" name="name_progress[]" ' +
'placeholder="Enter name" class="form-control" /></td>' +
'<td><input type = "text" name = "payment_percentage[]" ' +
'placeholder = "Enter per_invoice" class = "form-control" />' +
'</td>' +
'<td><a type="button" class="btn btn-danger remove-tr">-</a></td>' +
'</tr>';
$("#dynamicProgress").append(tr);
});
$(document).on('click', '.remove-tr', function () {
$(this).parents('tr').remove();
});
</script>
Since name_progress and payment_percentage fields are arrays, you may simply loop through the old input values.
#forelse (old('name_progress', []) as $i => $name_progress)
<tr>
<td>
<input type="text" name="name_progress[]" value="{{ $name_progress }}" placeholder="Enter name" class="form-control" />
</td>
<td>
<input type="text" name="payment_percentage[]" value="{{ old('payment_percentage')[$i] }}" placeholder="Enter % invoice" class="form-control" />
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
#empty
<tr>
<td>
<input type="text" name="name_progress[]" placeholder="Enter name" class="form-control" />
</td>
<td>
<input type="text" name="payment_percentage[]" placeholder="Enter % invoice" class="form-control" />
</td>
<td>
<a type="button" class="btn btn-danger remove-tr">-</a>
</td>
</tr>
#endforelse
If old('name_progress') is empty or null, initial fields with empty values will be displayed.

How to dynamically set HTML <input> names with Thymeleaf

I have a form that receives a 2D array from the controller and I have generated the table through thymeleaf.
<div class="col-4 offset-4">
<form id="sudokuBoard" method="post" enctype="application/x-www-form-urlencoded" class="form-group text-center">
<div class="container">
<table class="row-eq-height table-striped table-bordered text-center">
<!--/*#thymesVar id="board" type=""*/-->
<tr th:each="row: ${board}">
<td th:each="value: ${row}">
<div th:switch="${value}" class="col-xs-4">
<input name="cellValue" th:case="0" class="content form-control input" style="text-align:center" type="text" pattern="[0-9]*" maxlength="1" value="0" onkeypress="return isNumber(event)" oninput="moveMade()">
<input name="cellValue" th:case="*" class="content form-control input" style="text-align:center;background-color:lightgreen" type="text" th:value="${value}" readonly>
</div>
</td>
</tr>
</table>
<div class="gap-10"></div>
<button type="submit" class="btn btn-outline-primary btn-sm">Check Solution</button>
<button class="btn btn-outline-primary btn-sm" id="btnNewGame">New Game</button>
<button class="btn btn-outline-primary btn-sm" id="solveBoard"> Solve Puzzle</button>
</div>
</form>
</div>
All input fields have the same name and I want to dynamically assign the names through Thymeleaf so they become cellValueX in order to differentiate each cell in order to check the validity of moves entered by the user.
You use the attribute th:name. See this for a list of attributes you can use with Thymeleaf. I don't know specifically from your code what you want to use for X in cellValueX, but possibly something like this?
<tr th:each="row, y: ${board}">
<td th:each="value, x: ${row}">
<input th:name="|cellValue${x.index}_${y.index}|" ... />
</td>
</tr>

I want to validate value given by user in the text box using jsp

How can I validate Textbox? code given below.
I created one table and Text box generated in row. I want to validate that text box. User can not enter data less than {name="min[<%=i%>]"} in {name="max[<%=i%>]"} Text box. And Data Betwwen min and max to {name="normal[<%=i%>]"} Textbox
<%
Connection con = null;
con = connection.createConnection();
System.out.println("Printing connection object "+con);
Statement statement=con.createStatement();
String sql ="SELECT *
FROM `itemfile`
WHERE IT_ITEMGRP IN ('A', 'K', 'T','M')";
rs = statement.executeQuery(sql);
%>
<form class="form-horizontal" action="dailyEntryServ" name="registration" id="registration" method="get">
<h4><u>દૈનિક એન્ટ્રી</u></h4>
<h4 align="right">
<span style="color:red">
<b>
<%=(request.getAttribute("errMessage") == null) ? "": request.getAttribute("errMessage")%>
</b>
</span>
<br/>
<span style="color:green">
<b>
<%=(request.getAttribute("successMessage") == null) ? "": request.getAttribute("successMessage")%>
</b>
</span>
</h4>
<div class="col-md-12">
<div class="form-group">
<label class="control-label col-sm-4" for="date">Select Date:</label>
<div class="col-sm-3">
<input class="datepicker" data-date-format="yyyy-mm-dd" placeholder="yyyy-mm-dd" id="date" name="date" value="<%=strDate%>">
</div>
</div>
<table align="center" cellpadding="" cellspacing="" border="1" id="oTable" width="100%">
<thead>
<tr>
<th>ક્રમ નં</th>
<th>જણસી નું નામ</th>
<th>ઓછામાં ઓછો ભાવ(કવી.)</th>
<th>વધુમાં વધુ ભાવ(કવી.)</th>
<th>મોડલ ભાવ(કવી.)</th>
<th>આવક</th>
</tr>
</thead><%
int i=0;
while(rs.next()) {
String code=rs.getString("IT_ITEMCOD");
String id=rs.getString("IT_ITEMSUB");
//String grp=rs.getString("IT_ITEMGRP");
String good=code+"."+id;
%><tr>
<td><%=++i%></td>
<td>
<label style="font-family: gujratilys;font-weight: normal;font-size: 14px;">
<%=rs.getString("IT_ITMSNMG") %>
</label>
</td>
<td>
<input type="hidden" width="100%" id="cols[<%=i%>]" name="cols[<%=i%>]" value="<%=good %>" />
<input type="text" width="100%" id="max[<%=i%>]" name="max[<%=i%>]" value="0"/>
</td>
<td>
<input type="text" width="100%" id="min[<%=i%>]" name="min[<%=i%>]" value="0"/>
</td>
<td>
<input type="text" width="100%" id="normal[<%=i%>]" name="normal[<%=i%>]" value="0"/>
</td>
<td>
<input type="text" width="100%" id="aavak[<%=i%>]" name="aavak[<%=i%>]" value="0"/>
</td>
</tr><%
}
rs.close();
%><tr>
<input type="hidden" id="size" value=" <%=i%>" name="size" />
<td colspan="6" align="center">
<button type="submit" class="btn btn-success">Submit</button>
</td>
</tr>
<tbody>
</tbody>
</table>
</div>
</form>

jQuery find first element with data attribute

I am trying to find the first element with a data attribute of data-uuid inside a table row. I can see examples of finding an element that has a data attribute of a value, but I do not know the value, I just want to find the element with the attribute.
My HTML:
<tr id="row_12">
<td style="width:320px;">
<input class="form-control has-feedback table_input name changed_event" type="text" value="" data-rowid="row_new" data-msgid="name" data-orig="" placeholder="Name">
<input class="form-control has-feedback table_input email changed_event" type="email" value="" data-msgid="email" data-orig="" placeholder="Email">
</td>
<td> ... </td>
<td> ... </td>
<td> ... </td>
<td class="table_form_cell">
<table class="table-sm form_cell">
<tbody><tr>
<td style="width:25%;" class="text-center form_cell_switch">
<input class="switch switch-primary activated_at changed_event" type="checkbox" data-rowid="row_new" data-orig="">
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-primary btn-sm btn_reload_row" data-rowid="row_new">
<i class="far fa-sync"></i>
</button>
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-danger btn-sm btn_delete_row" data-uuid="NEW_USER" data-rowid="row_new">
<i class="far fa-trash-alt"></i>
</button>
</td>
<td style="width:25%;" class="text-center form_cell_switch">
<button type="button" class="btn btn-primary btn-sm btn_save_row" data-uuid="NEW_USER" data-rowid="row_new" disabled="">
<i class="far fa-save"></i>
</button>
</td>
</tr>
<tr>
<td colspan="4">
<select class="form-control has-feedback table_input changed_event date_format_id" data-orig="1">
<option value="1" selected="">21/Jan/2018</option>
<option value="2">21-Jan-2018</option>
<option value="3">21 January 2018</option>
<option value="4">21-January-2018</option>
<option value="5">Jan 21, 2018</option>
<option value="6">January 21, 2018</option>
<option value="7">21/01/2018</option>
<option value="8">21-01-2018</option>
<option value="9">01/21/2018</option>
<option value="10">2018-01-21</option>
</select>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
I want a generic way to find first element (rather than using this example's input element, as this is a function re-used for other forms of similar structure.
I have tried this:
var uuidElem = $(row).find('[data-uuid]');
var uuid = uuidElem.data('uuid');
also this:
var rowId = getRowId(row);
var uuid = $(row).find('[data-uuid]').data('uuid');
also this:
var rowId = getRowId(row);
var uuid = $('tr#' + rowId).find('[data-uuid]').data('uuid');
but uuid is undefined. How do I find this element.
Maybe Your html hasn't tag <table>, I add table and next code:
var uuidElem = $('#row_12 [data-uuid]');
uuidElem.each(function(index){
console.log($( this ).data('uuid') );
})
All ok.
https://codepen.io/piotrazsko/pen/RxvBNP
Also , you can try code without jquery:
let buttons = Array.from(document.querySelectorAll('#row_12 [data-uuid]'));
buttons.forEach((elem)=>{console.log(elem.getAttribute('data-uuid'))})
Finding row without tag <table> not working.

after using clone function in a row how can create different id for each row

after using clone function in a row, how can create different id for each row
i using add more button add new rows i like to create different id for each row
function cloneRow() {
var row = document.getElementById("clone");
var table = document.getElementById("data");
var selectIndex = 1;
var clone = row.cloneNode(true);
table.appendChild(clone);
clone.setAttribute("style", "");
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id", "select-" + selectIndex++);
alert(newSelectBox.getAttribute("id"));
}
<div class="row">
<div class="col-sm-12">
<div class="col-sm-7"></div>
<div class="col-sm-2">
<button type="button"class="btn btn-primary default btn-xs" onclick="cloneRow()" >add more...</button>
</div>
</div>
</div><br>
<div class="row" id ="close">
<div class="col-sm-4"></div>
<div class='col-sm-4'>
<Form id="NAME_VALUE" method="POST" >
<table class="table-striped" >
<tbody id="data">
<tr id ="clone" style="display:none;">
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
<tr>
<td>
Name :<input type="text" name="INPUT_NAME" style="width:100px;" id="name" name="INPUT_NAME">
</td>
<td>
Value :<input type="text" name="INPUT_VALUE" style="width:100px;" id="value" name="INPUT_VALUE">
</td>
<td>
<button type="button"class="btn btn-primary default btn-xs" name ="delete" style="margin-left: 5px;" onclick="deleteRow(this);
return false;">
<span class="glyphicon glyphicon-remove-circle" style="text-align:center" ></span></button>
</td>
</tr>
</tbody>
</table><br>
<button type="button"class="btn btn-primary default btn-xs" style="margin-left: 5px;" onclick="submit_login();
return false;"> save.</button>
</Form>
</div>
</div>
its coming only select-0 to every one i like to select-0,select-1, select-2 depends on the add more button clicked
You can set a variable like this outside your function :
var i = 0;
and update it inside your function :
i = i + selectIndex
https://jsfiddle.net/gg1eyqgu/

Categories