how to bind dynamic generated inputs to $scope - html

I am retrieving items from db put them in dir-paginate or ng-repeat what i am trying here to pass id in as model name to get key and name also as key as i am fetching a array to create many inputs and retrieve them in controller, but when i retrieve ng-model object values with console.log($scope.values); it says undefined.
how i will pass multiple generated inputs to controller in scope object is my question even ng-click dont work ??
view
<form angular-validator-submit="submitForm()"
name="submit-form" class="form-horizontal" novalidate
angular-validator>
<table>
<thead>
<tr>
<th>S.No</th>
<th>id</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr dir-paginate="x in items| itemsPerPage: pageSize" current-page="currentPage">
<td><input type="text" name="id" ng-model="values.{{x.id}}[$index]"></td>
<td><input type="text" name="test" ng-model="values.{{x.name}}[$index]"></td>
</tr>
</tbody>
</table>
<button type="submit" class="btn btn-primary">Save</button>
</form>
$scope.submitform = function(){
console.log($scope.values);
}

ng-model="values[x.id]" will do the work and define $scope.values = []; as suggested in comments.

Related

Unable to fetch data in request.form in flask

I am using flask as the backend and i have my html template as
<div id="tablediv">
<form action="{{ url_for('useraction') }}" method="post">
<table class="table" id="displaytable">
<thead>
<tr>
<th scope="col">Name</th>
<th scope="col">Email</th>
<th scope="col">Address</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
{%for i in range(0, len)%}
<tr>
<td id="username" name = "username">{{unverifieduser[i][1]}}</td>
<td id="useremail" name="useremail">{{unverifieduser[i][2]}}</td>
<td id="useraddress" name="useraddress">{{unverifieduser[i][3]}}</td>
<td >
<button type="submit" class="btn btn-danger" id="delete" name="delete">Delete</button>
<button type="submit" class="btn btn-warning" id="verify" name="verify">Verify</button>
</td>
</tr>
{%endfor%}
</tbody>
</table>
</form>
</div>
My API call looks like
#app.route('/useraction', methods = ['GET', 'POST'])
def useraction():
print(request.form)
if request.method =='POST':
cursor = mysql.connection.cursor()
cursor.execute('SELECT * FROM user where isVerified = false');
user = cursor.fetchall()
return render_template('user.html', len = len(user), unverifieduser = user)
The output gives only the button which i click for example 'verify'
enter image description here
Is there any html attribute I am missing to get all the elements of the table for example username, useremail, useraddress
An HTML table or HTML table elements are not Form elements. In HTML, only Form elements are sent along with such a POST request. Here is an overview of all HTML Form elements. Note that these elements should be inside a form element, which is in your case the following line:
<form action="{{ url_for('useraction') }}" method="post">
As for why you only have verify in your form: the sole other input element in your form is the delete button, with its type set to submit. While you can have multiple submit buttons, only the one you click is sent along with the form.

orderyBy with ng-repeat not working

I am trying to order by the likes of an answer. I looked at the angular documentation for orderBy and it looks like I am following it. However, my table is not ordering by the likes for answer. Here is my html. If you want me to post more code let me know.
<div ng-controller="answerAndQuestionController">
<h1 ng-bind='question.question'></h1>
<h1 ng-bind='question.description'></h1>
<table>
<thead>
<tr>
<th>Answer</th>
<th>Description</th>
<th>User</th>
<th>Likes</th>
</tr>
</thead>
<tbody>
<tr ng-repeat = "answer in answers | orderBy:'answer.likes'">
<td><input ng-model = "answer.answer" readonly></td>
<td><input ng-model = "answer.description" readonly></td>
<td><input ng-model = "answer.user" readonly></td>
<td><input ng-model = "answer.likes" readonly>
<button ng-click = "like(answer.answer)" href="">like</button>
</td>
</tr>
</tbody>
</table>
</div>
If you check Angular's orderBy example you'll notice the analogy to define expression in orderBy without "object" (answer)
<tr ng-repeat = "answer in answers | orderBy:'likes'">

How to send table data to the controller after click in submit button

I have a table where data are poulate from database, I want to update the table after giving value into the Text1,Text2 and send it to the controller, how could i do this.
html
<form action="/update" method="post" >
<table border="1">
<thead>
<tr>
<th data-field="id"> ID </th>
<th data-field="details"> Details </th>
<th data-field="report"> Report </th>
<th data-field="value"> value </th>
<th data-field="destination"> Destination </th>
</tr>
</thead>
<c:forEach items="${List2}" var="as">
<tr >
<td>${as.id}</td>
<td>${as.rulDetails}</td>
<td>${as.rulName}</td>
<td><input type="text" name ="Text1">
<td>${as.rulValue}</td>
<td><input type="text" name ="Text2">
</td>
</tr>
</c:forEach>
</table>
<input type="submit" value="Update"></input>
Here is my servlet for update table, i did't write anything because i don't understand how could i do this.
#RequestMapping(value = "/update", method = RequestMethod.POST)
public String update(#ModelAttribute("SpringWeb") AssignmentDetails asd ModelMap model) {
//what i should write here..?
return "hello";
}
Please tell me/help me what i need to do? What i need to modified.?Please give me an advice or help to do this.
Thank you
See this tutorial.
You can use the spring taglibs.
<form:form method="post" modelAttribute="SpringWeb" action="/update">
<form:input path="Text1" type="text" />
<form:input path="Text2" type="text" />
</form:form>

2 HTML forms within 1 table

I have a single table that is generated dynamically by looping through a result set and creating rows. For each row, I need to include 2 checkboxes. Checkbox A on each row needs to correspond to form A, and checkbox B to form B.
I know this isn't valid, but the below pseudocode is essentially what I want. I know that in HTML5 I can specify which form an input element belongs to, but my users will primarily be using IE8, which, as far as I can tell, doesn't support this feature.
<form name="formA">
<form name="formB">
<table>
<tr>
<th>
<th>
<th>
</tr>
LOOP
<tr>
<td><input type="checkbox" name="chkA" value="1"></td>
<td>Something</td>
<td><input type="checkbox" name="chkB" value="1"></td>
</tr>
END LOOP
</table>
<input type="submit" /> //formA
<input type="submit" /> //formB
</form> //formA
</form> //formB
Any ideas on how I can accomplish this? I suppose one way would be to use a single form and change the action depending on which submit button is clicked, but I want to see if anyone else has any ideas before I do that.
Thanks,
Tom
Probably the best way is to just make it all in one form and act differently later according to the options selected.
For example
<form action="doStuff.php" method="post">
<table>
<tr>
<th></th>
<th></th>
</tr>
<!-- LOOP -->
<tr>
<td><input type="checkbox" name="chkA" value="1"></td>
<td><input type="checkbox" name="chkB" value="1"></td>
</tr>
<!-- END LOOP -->
</table>
<div>
<input type="submit" name="submit" />
</div>
</form>
doStuff.php
if (isset( $_POST["chkA"] ) ){
// Checkbox A is checked.
}
if (isset( $_POST["chkB"] ) ){
// Checkbox B is checked.
}

Item delete buttons in a table?

this is a simple html question but I would like to know the correct way of doing it.
I have a table in my page, with tabular data, and it's a display of items in the database. I build the table dynamically with php, and just output html.
I want to add a column "delete this entry" with a button/link/picture on every line, and when it's clicked, my page refreshes and php knows which itemID should be deleted.
The question is not about php, but about the html part.
How can I make the delete-button compliant with standards? Here's an incorrect solution:
<table>
<form action='#' method='post'>
<tr>
<td>Item 1</td>
<td><input type='hidden' name='id' value='1'><input type='submit' value='X'></td>
</tr>
</form>
<form action='#' method='post'>
<tr>
<td>Item 2</td>
<td><input type='hidden' name='id' value='2'><input type='submit' value='X'></td>
</tr>
</form>
</table>
Anyone an idea on a good solution? I'd prefer not to use much javascript, if it can be avoided.
Thanks in advance!
Edit: actually, I have a secret second question too: what if i were to want to do inline editing (after pressing an Edit button), as in: make the cells with the values contain boxes, and a submit button at the last cell?
Why not isolate the forms and pass the ID to the action page?
<table>
<tr>
<td>Item 1</td>
<td><form action='action.php?id=1' method='post'><input type='submit' value='X'></form></td>
</tr>
<tr>
<td>Item 2</td>
<td><form action='action.php?id=2' method='post'><input type='submit' value='X'></form></td>
</tr>
</table>
You can write names of submit buttons as set of facts and their values, for example name='set1(fact1:value2,fact2:value2,...)'. Then search for submitted set and get fact value. A PHP class PageFacts below can do this. You can check if set is posted using condition if (PageFacts::is('del')) and get value of fact with statement $itemID = PageFacts::get('del', 'id').
Form with submit buttons can look like:
<form method="post">
... item [0] text/input
<input type="submit" name="del(id:0)" value="Del">
... item [1] text/input
<input type="submit" name="del(id:1)" value="Del">
... item [2] text/input
<input type="submit" name="del(id:2)" value="Del">
...
...
<input type="submit" name="chng" value="Chng">
</form>
An example of PHP code that deletes table item with itemID can be:
if (PageFacts::is('del')) {
$itemID = PageFacts::get('del', 'id');
// Delete $itemID
deleteTableItem($itemID);
}
// or for multiple facts like del(cid:2,id:0)
if (PageFacts::is('del')) {
$cartID = PageFacts::get('del', 'cid');
$itemID = PageFacts::get('del', 'id');
// Delete $itemID from $cartID
deleteCartItem($cartID, $itemID);
}
PageFacts PHP code:
class PageFacts {
// Gets fact value from posted set
// $s ... name of a set
// $f ... name of a fact
// returns - value of fact $f in set $s
// - TRUE if set $s exists but fact $f doesn't exist
// - FALSE if set $s doesn't exist
public static function get($s, $f = NULL) {
// Regex pattern to search for set $s
$ps = "/^\s*$s\s*\((.*)\)\s*$/";
// Search POSTed names (variable $v is not used)
foreach ($_POST as $key => $v) {
$ok = preg_match($ps, $key, $matches);
if ($ok && isset($matches[1])) {
// If $f is not passed return TRUE, means set $s exists regardless of fact $f
if (!isset($f)) {
return TRUE;
}
// Otherwise return value of fact $f
// use regex pattern to search in list of fact:value items separated by a comma
$pf = "/^\s*$f\s*\:\s*(.+)\s*$/";
foreach (explode(',', $matches[1]) as $fv) {
$ok = preg_match($pf, $fv, $matches);
if ($ok && isset($matches[1])) {
return $matches[1];
}
}
}
}
return FALSE;
}
// Checks if set $s is posted
public static function is($s) {
return self::get($s);
}
}
It's kind of messy, but going off of what Agent said, you could do something like this to get a text input in there too:
<form action='action.php?id=1' method='POST'>
<table>
<tr>
<td>Item 1</td>
<td><input type="text" value="" /></td>
<td><input type='submit' value='X'></td>
</tr>
</table>
</form>
<form action='action.php?id=2' method='POST'>
<table>
<tr>
<td>Item 2</td>
<td><input type="text" value="" /></td>
<td><input type='submit' value='X'></td>
</tr>
</table>
</form>
Add a submit button to each form and send the operation you want to execute as value attribute of each button
<table>
<form action='#' method='post'>
<tr>
<td>Item 1</td>
<td><input type='hidden' name='id' value='1'><input type='submit' value='X'></td>
<td><button type="submit" value="remove" name="op">Remove</button></td>
<td><button type="submit" value="edit" name="op">Edit</button></td>
</tr>
</form>
</table>
You could go with a simple authenticated GET procedure, like this:
Delete
Note the action and item values in the URL. These would be evaluated before the database is called and the results are printed in showResults.php. Your PHP (on showResults.php) would start with a block of logic that checks to see if any actions were requested, such as delete. If an action is present, it checks to see if an item is as well. I will then do whatever authentication necessary to ensure the user has sufficient rights to do this action to this item.
Next it would query the database (now lacking said item assuming the deletion was successful) and redraw the page. The links would be built within your loop used to create the many table-rows:
<?php foreach ($products as $product) { ?>
<tr>
<td>
Delete
</td>
<td>
<p><?php print $product->title; ?></p>
</td>
</tr>
<?php } ?>