How to dynamically set HTML <input> names with Thymeleaf - javascript

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>

Related

Problem loading JS when creating and modifying an element

I hope you can help me with these problems that I have with the execution of my JS, I have 2 problems that I will detail:
WHEN CREATING
I am using the change and select events to be able to know if I am selecting and changing an option from my question combobox. The problem is when I have selected the option 1 SINGLE / MULIPLE ANSWER of the question type. If when saving I do not have any checkbox selected from the available options, it will throw me the alert to select at least one option, so far everything works fine for me but when I select a checkbox from the options and try to save, the alert does not disappear. I've tried adding the event checked but it can't work for me. What I want to do is that when I save and I do not have an option selected, it throws me the alert message (this already does), and when I select an option, the alert disappears so that it allows me to save.
WHEN MODIFYING
The second problem occurs when I try to modify an element, the JS does not run, so that it can work I have to select another option and return to the previous one so that it can work.
HTML
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-opcion">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-opcion btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="opcion-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
JS
$(".dynamicform_wrapper").on("change","select",function(){
if ($(this).val()== 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan',2);
}else if ($(this).val()== 1){
//var numberNotChecked = $('#0').find('.option-item input:checkbox:not(":checked")').length;
var numberChecked = $('#0').find('.option-item input:checkbox:checked').length;
$('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.question').removeAttr('colspan',2);
$( "#dynamic-form" ).submit(function( event ) {
if(numberChecked > 0){
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({'border':'2px solid #dd4b39','background-color':'white'});
event.preventDefault();
}
});
}});
Hope you can help me with these problems, I am not very good at using javascript or jquery. I thank you in advance for your support.
In your current code you are using wrong selector to get total value of checked checkboxes.If you check your current jquery code its always giving 0 even if you checked any value. So , you can use input[type="checkbox"]:checked which will give you correct values of checked checkboxes.
Then , you have placed your submit event inside your change event that's the reason the warning shows for the first time but when you select some checkbox and again clicked save button it doesn't go away (also because of wrong selector) so i have separated it from the change event .
Also you have forget to show the tr which you have hide() when select-box value is 2 i.e : item-option so add .show() to it when value is 1.
Working Code :
$(".dynamicform_wrapper").on("change", "select", function() {
if ($(this).val() == 2) {
$('#0').find('.option-item').not(':first').remove(); //removed all entries found in
$('#0').find('.option-item:first').hide();
$('#0').find('.item-option').hide();
$('#0').find('.question').attr('colspan', 2);
} else if ($(this).val() == 1) {
// $('#0').find('.container-options').append(newtr); //add input
$('#0').find('.item-option').show();
$('#0').find('.option-item:first').show(); //show option-item which is hidden
$('#0').find('.question').removeAttr('colspan', 2);
}
});
$("#dynamic-form").submit(function(event) {
//getting all inputs which is under tr
var numberChecked = $('#0').find('input[type="checkbox"]:checked').length;
console.log("No of checkbox checked=" + numberChecked)
if (numberChecked > 0) {
$('#0').find('.text-error-check').hide();
$('#0').find('.dynamicform_inner').removeAttr("style");
event.preventDefault();//remove this to submit
} else {
$('#0').find('.text-error-check').show();
$('#0').find('.dynamicform_inner').css({
'border': '2px solid #dd4b39',
'background-color': 'white'
});
event.preventDefault();
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<form id="dynamic-form" action="" method="post">
<div class="content">
<div class="box box-success box-solid">
<div class="box-header with-border">
<h3 class="box-title">Evaluation</h3>
</div>
<div class="panel-body">
<div class="dynamicform_wrapper"> //where select and change applies
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>Questions</th>
<th style="width: 500px;">Options</th>
<th class="text-center" style="width: 90px;">
<button type="button" class="add-item btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-items">
<tr id="0" class="item">//ID that I use to find the elements
<td class="question"> //where do i apply colspan
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td class="vcenter">
<span class="panel-title-address">Nr: 1</span>
</td>
<td class="vcenter">
<input type="hidden" id="qquestion-0-id_question" name="qquestion[0][id_question]" value="28">
<div class="form-group field-qquestion-0-type_id required">
<label class="control-label" for="qquestion-0-type_id">Question Type</label>
<select id="qquestion-0-type_id" class="form-control" name="qquestion[0][type_id]" onchange="">
<option value="">-- Select --</option>
<option value="1" selected="">SINGLE / MULIPLE ANSWER</option> // OPTION 1
<option value="2">OPEN QUESTION</option> // OPTION 2
</select>
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-title required">
<input type="text" id="qquestion-0-title" class="form-control" name="qquestion[0][title]" value="" maxlength="250" placeholder="Títle">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-score required">
<input type="text" id="qquestion-0-score" class="form-control" name="qquestion[0][score]" value="" placeholder="Score" data-plugin-inputmask="inputmask_2fdcbd27">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-image">
<label class="control-label" for="qquestion-0-image">Image</label>
<input type="file" id="qquestion-0-image" class="empty-value" name="qquestion[0][image]">
<p class="help-block help-block-error"></p>
</div>
<div class="form-group field-qquestion-0-justify_answer">
<div class="checkbox">
<label style="padding:5px;" for="qquestion-0-justify_answer">
<input type="hidden" name="qquestion[0][justify_answer]" value="0"><input type="checkbox" id="qquestion-0-justify_answer" name="qquestion[0][justify_answer]" value="">
Do you want the answer to be justified?
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="clearfix"></td>
</tr>
</tbody>
</table>
</td>
<td class="item-option">
<div class="dynamicform_inner">
<table class="table table-bordered">
<thead>
<tr>
<th>Description</th>
<th class="text-center">
<button type="button" class="add-option btn btn-success btn-xs"><span class="glyphicon glyphicon-plus"></span></button>
</th>
</tr>
</thead>
<tbody class="container-opciones">
<tr class="option-item">
<td class="vcenter">
<input type="hidden" id="qoption-0-0-id_option" name="qoption[0][0][id_option]" value="">
<div class="input-group">
<span class="input-group-addon">
<div class="form-group field-qoption-0-0-opcion_correcta required">
<div class="checkbox">
<label style="padding:5px;" for="qoption-0-0-opcion_correcta">
<input type="hidden" name="qoption[0][0][opcion_correcta]" value="0"><input type="checkbox" id="qoption-0-0-opcion_correcta" name="qoption[0][0][opcion_correcta]" value="1">
</label>
<p class="help-block help-block-error"></p>
</div>
</div>
</span>
<div class="form-group field-qoption-0-0-title_option required">
<input type="text" id="qoption-0-0-title_option" class="form-control" name="qoption[0][0][title_option]" value="2" maxlength="250" placeholder="Opción">
<p class="help-block help-block-error"></p>
</div>
</div>
</td>
<td class="text-center vcenter" style="width: 90px;">
<button type="button" class="remove-opcion btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
<div class="form-group text-error-check required has-error" style="display: none;">
<p class="help-block help-block-error">You must select at least 1 option as correct.</p>
</div>
</td>
<td class="text-center vcenter" style="width: 90px; verti">
<button type="button" class="remove-item btn btn-danger btn-xs"><span class="glyphicon glyphicon-minus"></span></button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-primary"><span class="fa fa-edit"></span> Modificar</button>
</div>
<br>
<br>
<br>
<br>

Read value from backed table once in bootstrap modal

I'm trying to read value from table once modal show with form.
I'm not able to get value from table behind modal. is there any specific rules?
What am I doing wrong? Would like to read value of backed table fields and wants to use for calculation of the modal fields.
please check example here -
Sample Code
/*doesn't read value of rollno from table when modal input box on change*/
$('#frm_name').change(function() {
var $row = $(this).closest('tr');
var rowID = $row.attr('class').split('_')[1];
var rollno = $row.find('.td_rollno').text();
alert(rollno);
});
HTML
<table class="table table-responsive">
<thead>
<tr>
<th>NAME</th>
<th>ROLL NUMBER</th>
<th>CONTACT NO</th>
<th>ADDRESS</th>
<th>EDIT</th>
</tr>
</thead>
<tbody>
<tr class="trID_1">
<td class="td_name">Name Row1</td>
<td class="td_rollno">12345</td>
<td class="td_contact">Mickey Mouse</td>
<td class="td_address">123 Mouse Lane</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<tr class="trID_2">
<td class="td_name">Name Row2</td>
<td class="td_rollno">22222</td>
<td class="td_contact">Wiley Coyote</td>
<td class="td_address">RR3 Road Runner Lane</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<tr class="trID_3">
<td class="td_name">Name Row3</td>
<td class="td_rollno">33333</td>
<td class="td_contact">Pepe LePew</td>
<td class="td_address">88 Stink Street</td>
<td>
<button class='td_btn btn btn-link btn-custom dis'>EDIT</button>
</td>
</tr>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">EDIT RECORD</h4>
</div>
<div class="modal-body">
<form id="updateValues" action="update.php" method="POST" class="form">
<div class="form-group">
<label for="name">NAME</label>
<input type="text" class="form-control" name="name" id="frm_name">
</div>
<div class="form-group">
<label for="contact">CONTACT</label>
<input type="text" class="form-control" name="contact" id="frm_contact">
</div>
<div class="form-group">
<label for="address">ADDRESS</label>
<textarea class="form-control" rows="3" name="address" id="frm_address"></textarea>
</div>
<input type="hidden" name="frm_id">
<input type="submit" class="btn btn-primary btn-custom" value="Save changes">
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<div id="results"></div>
</div>
</div>
Your markup suggests trying to update a record with a modal form that posts to update.php. Separately, you have a jQuery function that looks like an attempt to update the table contents with the modal inputs.
If I understand you correctly, you will want to instead read the docs for your particular PHP framework for how to:
submit forms via AJAX
handle successful update with a script that will update the DOM accordingly

Checkboxes weird behaviour in AngularJS ng-repeat

I've a form containing input fields and checkboxes (table crud generating dynamically). See the image below:
Here, In my clients modal dialog form I've implemented small crud for adding/updating/deleting Providers data and showing table below of it on the fly.
Following is my code:
View:
<form name="clientForm" ng-submit="check(id)" ng-controller="ClientsController">
<div class="form-group">
<label for="name">Name</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Name" ng-model="client.name">
</div>
</div>
<div class="form-group">
<label for="email">Email</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-envelope"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Email" ng-model="client.email">
</div>
</div>
<div class="form-group">
<label for="phone">Phone</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-earphone"></i></span>
<input type="text" class="form-control" id="title" placeholder="Enter Phone" ng-model="client.phone">
</div>
</div>
<div class="form-group">
<label for="phone">Providers</label>
<div class="input-group">
<span class="input-group-addon" id="basic-addon1"><i class="glyphicon glyphicon-hand-right"></i></span>
<input type="text" class="form-control" id="title" ng-model="provider.provider_name" placeholder="Enter Provider Name">
</div>
<br>
<button type="button" id="addbtn" class="btn btn-sm btn-primary" ng-click="addProvider()">Add Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-info" ng-click="updateProvider(id)">Update Provider</button>
<button type="button" id="editbtn" class="btn btn-sm btn-default" ng-click="clearProvider()">Clear Provider</button>
<br>
<table style="width: 50%; margin-top: 10px;" class="">
<tbody>
<tr ng-repeat="val in providersData">
<td>
<input type="checkbox" name="providersData" ng-model="$parent.client.providersList" value="{{val._id}}"/>
</td>
<td>{{val.provider_name}}</td>
<td>
<a style="color: blue;" href="javascript:void(0);" ng-click="editProvider(val._id)"><i class="glyphicon glyphicon-edit"></i></a>
<a style="color: red;" href="javascript:void(0);" title="Delete" confirmed-click="removeProvider(val._id)" ng-confirm-click="Are you sure you want to remove provider?"><i class="glyphicon glyphicon-trash"></i></a>
</td>
</tr>
</tbody>
</table>
</div>
<div class="well well-lg text-center bg-gray">
<button class="btn btn-success" ng-if="id">Save Client</button>
<button class="btn btn-danger" ng-if="id" title="Delete" confirmed-click="remove(client._id)" ng-confirm-click="Are you sure you want to remove?">Delete</button>
<button type="button" class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button class="btn btn-success" ng-if="!id">Add Client</button>
</div>
</form>
Controller:
$scope.showModal = false;
$scope.client = {};
$scope.provider = null;
$scope.addClient = function () {
alert(JSON.stringify($scope.client));
$http.post('/clients', {param: $scope.client}).success(function (response) {
if (response) {
alert("Client added successfully");
$scope.client = "";
refresh();
$scope.closemodal();
}
});
};
Now I want to insert/update selected checkboxes value to db along with Name, Email, and Phone field.
Here I'm facing following issues:
Whenever I'm clicking on any checkbox its checking all checkboxes.
After clicking on Add Client button its showing result of alert(JSON.stringify($scope.client)) like this
{"name":"asdfdsafasdf","email":"sdf","phone":"sadf","providersList":{"id":true}}
In mongodb its showing like this:
I've search a lot tried this and ng-model="$parent.client.providersList.id" but still its not working.
I'm beginner in AngularJS and just started working on it.
Any help would be appreciated.
You should use ng-true-value & ng-false-value over the checkbox(I'm considering default value to be 0). And then use $index of providersData ng-repeat to create an array of client.providersList.
Markup
<input type="checkbox" name="{{'providersData'+$index}}"
ng-model="client.providersList[$index].id" ng-true-value="val._id" ng-false-value="0" />
You are facing this problem because of the value of your ng-model attribute. The value for ng-model attribute must be different for each checkbox. Here, try this:
<input type="checkbox" name="providersData" ng-model="client.providersList{{$index}}" ng-value="val._id" />
Try something like this:
$scope.client = {};
$scope.client.providersList = [];
// Now watch the model for changes
$scope.$watch('client', function(){
// When the checkbox is selected it returns true
if($scope.client.providersList1 == true){
$scope.client.providersList.push({"id": value})
}
// Repeat the if statements for all the checkboxes (or use a for loop)
}, true);

Form is presenting same data in php while loop

I am trying to get an edit form to work with the loop in the php. I have a delete button and it works just fine. The edit form keeps presenting only the first row in the table. In firebug, it shows that all the other forms are there with the correct unique id for each but only the first form shows when edit is clicked on different rows. Can someone help me as to why?
<table id="table_id" class="table table-hover table-striped">
<thead>
<tr>
<th>ID #</th>
<th>Product</th>
<th>Quantity</th>
<th>Price</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<?php
while($row = mysqli_fetch_assoc($search_sql)) {
?>
<tr>
<td id = "clicked"><?=$row['ID']?></td>
<td id = "clicked"><?=$row['Product']?></td>
<td id = "clicked"><?=$row['Quantity']?></td>
<td id = "clicked">$ <?=$row['Price']?></td>
<td>
<button class="btn btn-warning btn-sm" onclick="div_show2(this, '<?=$row['ID']?>'); return false;"><span class="glyphicon glyphicon-edit"></span>Edit</button>
<!-- Modal for the Edit Data Form -->
<div id ="hidden-form2">
<div id = "popupContact">
<form action= "updateData.php" id = "editForm<?=$row['ID']?>" method="POST" name="editForm">
<input type="hidden" name="ID" value="<?=$row['ID']?>">
<div class="form-group">
<label for="product">Product</label>
<input type="text" class="form-control" id="product<?=$row['ID']?>" name="product" value="<?=$row['Product']?>">
</div>
<div class="form-group">
<label for="quantity">Quantity</label>
<input type="text" class="form-control" id="quantity<?=$row['ID']?>" name="quantity" value="<?=$row['Quantity']?>">
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="text" class="form-control" id="price<?=$row['ID']?>" name="price" value="<?=$row['Price']?>">
</div>
<button type="button" class="btn btn-default" onclick="formHide2()">Close</button>
<button type="submit" id="save" class="btn btn-primary">Save changes</button>
</form>
</div>
</div>
<!--End of Edit Form-->
</td>
<td>
<!--Delete Button Form-->
<form method="post" action="deleteData.php">
<button class="btn btn-danger btn-sm" type="submit"><span class="glyphicon glyphicon-trash"></span>Delete</button>
<input type="hidden" id="ID" name="ID" value="<?=$row['ID']?>">
</form>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
//script for calling the edit forms as a modal popup
//Function To Display Popup for Edit form
function div_show2() {
document.getElementById("editForm").reset();
document.getElementById('hidden-form2').style.display = "block";
}
//Function to Hide Popup
function formHide2(){
document.getElementById('hidden-form2').style.display = "none";
}
Your show_div2 function is only showing one element.
document.getElementById('hidden-form2').style.display = "block";
That shows you why you are only seeing the first row.
Update your HTML and Javascript as follows
HTML
<div id="hidden-form2<?=$row['ID']?>">
Javascript
function div_show2(id) {
document.getElementById("editForm"+id).reset();
document.getElementById('hidden-form2'+id).style.display = "block";
}
To avoid having any problems like this in the future, always make sure that your id's are unique.
The first 4 td I see all use the same id name clicked. Try to fix that first and see what happens.
<td class="clicked" id="clickedID<?=$row['ID']?>"><?=$row['ID']?></td>
<td class="clicked" id="clickedProduct<?=$row['ID']?>"><?=$row['Product']?></td>
<td class="clicked" id="clickedQuantity<?=$row['ID']?>"><?=$row['Quantity']?></td>
<td class="clicked" id="clickedPrice<?=$row['ID']?>">$ <?=$row['Price']?></td>

Submit multiple forms with one Submit All button in AngularJS

I have a form in Angular setup like the following.
Users can make changes and submit one at a time and it works as expected but I'd like to add a "Submit All" that would submit each item one at a time as though the user were pressing the submit button for each. Im a little stumped on the best way to do this. As of right now I cannot submit them as a batch due to API constraints. I would also like to keep jQuery out of the equation.
My first thought is to create a new object that contains the info for each item and then loop over it and submit that way. I am unsure how to set this up in my controller.
<div class="table-responsive">
<table class="table table-striped">
<thead>
<th>Name</th>
<th></th>
<th>Age</th>
<th>Kids</th>
<th></th>
</thead>
<tbody>
<tr class="pending-item animate-repeat"
data-ng-repeat="user in Users"
data-ng-form="userForm"
role="form"
data-ng-submit="submitUser(user, userDetails)"
novalidate>
<td class="img-container">
<img data-ng-src="{{user['image']['url']}}"
alt="{{user['image']['alt'] || ' '}}"
class="img-responsive" >
</td>
<td class="col-xs-6">
<div class="user-info">
<p class="user-name">
{{user['name']}}
</p>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<span class="input-group-addon">Age</span>
<input type="number" min="0"
name="age"
class="form-control age"
data-ng-init="userDetails.age = user['age']"
data-ng-model="userDetails.age"
required>
</div>
</td>
<td>
<div class="input-group input-group-sm">
<input type="number" min="0" step="1"
name="kids"
class="form-control kids"
data-ng-disabled="user['kids'] === true"
data-ng-pattern="/^\d+$/"
data-ng-init="userDetails.kidsCount = user['kids']['quantity']"
data-ng-model="userDetails.kidsCount"
required>
<div class="input-group-addon"># of kids</div>
</div>
</td>
<td>
<div class="btn-group btn-col">
<button type="submit"
class="btn btn-success btn-sm"
data-ng-disabled="userForm.$invalid || userDetails.working"
data-ng-click="submitUser(user, userDetails)">
Submit
</span>
</button>
</div>
</td>
</tr>
</tbody>
</table>
<button ng-click="submitAllUsers()">Submit All Users</button>
</div>
Yes, create a object in your controller, say $scope.formData={}, and then bind it with your elements using ng-model or data-ng-model and then on button click pass this object in your controller and do the required stuff.

Categories