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.
Related
I have a jquery code that clones a "selector" wherein it is a parent of many other elements.
EDIT : I added the function that calls the "cloneMore". It supposed to be called when the user clicks the button inside the row and creates another row below it.
EDIT 2 : I added the table that the <tr> belongs to. I tried to run it without the <tr> <td> tags and the function works! But sadly it removes it from the html table. Why does this happen?
jquery snippet
$(document).on('click', '.add-form-row', function(e){
alert("Button Click!");
e.preventDefault();
cloneMore('.form-row.spacer:last', 'form');
return false;
function cloneMore(selector, prefix) {
var newElement = $(selector).clone(true);
newElement.find('input[type=text]').each(function() { //loops through the textfields
console.log("print1");
});
newElement.each(function () {
console.log("print2");
});
html code
<div class="display_table">
<table class="table table-hover table-striped">
<thead class="thead-dark">
<tr class="tablerow">
<th scope="col">Item</th>
<th scope="col">Item Description</th>
<th scope="col">Quantity</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
{{ formset.management_form }}
{% for form in formset %}
<div class="row form-row spacer">
<tr scope="row">
<div class="input-group">
<td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
<div class="input-group-append"><td><button class="btn btn-success add-form-row">+</button></td></div>
</div>
</tr>
</div>
{% endfor %}
</tbody>
</table>
</div>
However, it doesn't even pass through the loop even once and I don't get a "print" in the console. I'm sure that there is a text field inside the parent. In this case its the div with class "row form-row spacer"
Is there something wrong with my syntax? I've seen somewhere where they get the parent through a selector but in my case I put it in a variable. Is there anything wrong or any work around this?
I think I kind of figured it out. I was trying to select the <input> tags even without referencing the <td> and <tr> tags. So jquery didn't know what I was trying to select. So after I made some changes in the whole table and the jquery script, it works just as I intended it would. However, any suggestions on how I could improve this code will be appreciated! I'm putting this up in case someone needs it.
Also, I forgot to credit to this Stack Overflow answer for the snippets.
html code
<table class="table table-hover table-striped" id="part_table">
<thead class="thead-dark">
<tr class="tablehead">
<th scope="col">Item</th>
<th scope="col">Item Description</th>
<th scope="col">Quantity</th>
<th scope="col">Delete</th>
</tr>
</thead>
<tbody>
{{ formset.management_form }}
{% for form in formset %}
<div class="row form-row">
<tr class="tablerow">
<td><input type="text" name="form-0-item" class="form-control" id="id_form-0-item" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-description" class="form-control" id="id_form-0-description" value="" readonly="readonly"></td>
<td><input type="text" name="form-0-quantity" class="form-control" id="id_form-0-quantity" value="" readonly="readonly"></td>
<td><button class="btn btn-success add-form-row">+</button></td>
</tr>
</div>
{% endfor %}
</tbody>
</table>
jquery snippet
<script type="text/javascript">
function cloneMore(prefix) {
var lastrowtbl = $('#part_table tr.tablerow:last').clone(true);
var total = $('#id_' + prefix + '-TOTAL_FORMS').val();
var currentnum = total - 1
lastrowtbl.find('input[type=text]').each(function (i, el) {
console.log(this);
var name = $(this).attr('name');
if(name) {
name = name.replace('-' + currentnum + '-', '-' + total + '-');
var id = 'id_' + name;
$(this).attr({'name' : name, 'id' : id}).val('').removeAttr('checked');
}
});
total++;
$('#id_' + prefix + '_TOTAL_FORMS').val(total);
$('#part_table tr.tablerow:last').after(lastrowtbl);
var conditionRow = $('#part_table tr.tablerow:not(:last)');
conditionRow.find('.btn.add-form-row')
.removeClass('btn-success').addClass('btn-danger')
.removeClass('add-form-row').addClass('remove-form-row')
.html('-');
return false;
}
$(document).on('click', '.add-form-row', function(e){
alert("Button Click!");
e.preventDefault();
cloneMore('form');
return false;
});
</script>
I have JSP page with a table:
<table class="table table-hover">
<tbody>
<thead class="thead-light">
<th scope="col">#</th>
<th scope="col">Number</th>
<th scope="col">Tariff</th>
<th scope="col">Cost</th>
<th scope="col">Action</th>
</thead>
<tbody>
<c:forEach items="${contractsList}" var="contract" varStatus="loop">
<thead>
<th scope="col">${loop.index + 1}</th>
<th>${contract.number}</th>
<th>${contract.tariffName}</th>
<th>TODO</th>
<th><input type="submit" value="Block"></th>
</thead>
</c:forEach>
</tbody>
</table>
How can I make a button in each row send POST request with data from this row? For example, I'm pressing a button in row #2 and it sends post request to some url with number of contract from this row as a request parameter. I tried adding <form> tag but it ruins formatting of the table and for me it's not clear how to pass contract's number as a request parameter in this case.
UPDATE: I did it this way
<tr onclick="showContract('${contract.contractId}')" style="cursor: pointer;">
<script>
function showContract(id) {
var form = document.createElement('form');
document.body.appendChild(form);
form.method = 'post';
form.action = '/client/show_contract';
var input = document.createElement('input');
input.type = 'hidden';
input.name = 'contractId';
input.value = id;
form.appendChild(input);
form.submit();
}
</script>
Easiest way is to put your form tag inside the loop.
<c:forEach items="${contractsList}" var="contract" varStatus="loop">
<form action="..YourServlet" method="post">
<thead>
<th scope="col">${loop.index + 1}</th>
<th>${contract.number}</th>
<th>${contract.tariffName}</th>
<th>TODO</th>
<th><input type="submit" value="Block"></th>
</thead>
<input type="hidden" name="cnumber" value="${contract.number}"/>
<input type="hidden" name="ctarrif" value="${contract.tarrifName}"/>
</form>
</c:forEach>
Then in your servlet just get parameters like you would normally do:
String contractNumber = request.getParameter ("cname");
String tarrifName = request.getParameter ("ctarrif");
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.
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>
I have an HTML this is part of the form I'm working on
<form action="/goform/FormUpdateVAP" autocomplete="off" name="myform" id="formid" method="POST">
<table>
<tbody>
<tr>
<td align="right"><span class="label">Name:</span></td>
<td><input id="essid" name="essid" value="X" type="text"></td>
</tr>
<tr>
<td align="right"><input id="broadcast_essid" name="broadcast_essid" value="any" checked="" type="checkbox"></td>
<td><span class="label">Broadcast name:</span></td>
</tr>
</tbody>
</table>
<!-- BEGIN RIGHT COLUMN -->
<table>
<tbody><tr>
<td>
<input name="authentication" id="authentication" value="any" onclick="Update();" type="checkbox"><span class="label"><b>authentication</b></span>
</td>
<td>
<input onclick="Update();" name="wp" id="wp" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td height="26">
<input onclick="Update();" name="w_p" id="w_p" value="any" type="checkbox"><span class="label"><b>Wp</b></span>
<select id="8021x_mode" name="8021x_mode" onchange="Update();"><option value="wpa">WPA</option>
<option value="wep">WEP</option>
</select>
</td>
</tr>
<tr>
<td>
<input id="cancel" name="cancel" value="Cancel" onclick="window.location.href = '/fg/list.asp';" type="button">
</td>
<td>
<input id="add-2" name="add" value="Save" type="submit">
</td>
</tr>
</tbody>
</table>
I'm trying to submit it filling the Name and the Broadcast name. And checking the 8021x_mode and the wp checkboxes. If I tick 8021x_mode and set the fields the form submits just fine. But when I try ticking wp it doesn't submit. I got no error messages.
Here's my code so far:
use WWW::Mechanize::Firefox;
use Crypt::SSLeay;
use URI::Fetch;
use HTML::TagParser;
$ENV{PERL_LWP_SSL_VERIFY_HOSTNAME}=0; #not verifying certificate
my $url = 'https://';
$url = $url.#ARGV[0];
my $mech = WWW::Mechanize::Firefox->new;
$mech->get($url);
$mech->form_id('formid');
$mech->tick( '8021x_mode','any');
$mech->tick( 'wp','any'); --after I add this the form doesn't submit
my $name = #ARGV[1];
$mech->set_fields(
'vap_name' => $name,
'essid' => $name,
);
$mech->click_button( id => 'add-2' );
$mech->reload();
add-2 is the submit button. Any idea why is not working? If you need more information please let me now. Any help will be highly appreciated.
The problem is that the html doesn't contains the choice any for 8021x_mode.
I get this error :
No elements found for Checkbox with name '8021x_mode' and value 'any'
at test.pl line 24.
To check the form, I recommend you the mech-dump utility (installed with WWW::Mechanize)
$ mech-dump --forms http://domain.tld/path_to_forms
POST /goform/FormUpdateVAP [myform]
essid=X (text)
broadcast_essid=<UNDEF> (checkbox) [*<UNDEF>/off|any]
authentication=<UNDEF> (checkbox) [*<UNDEF>/off|any/authentication]
wp=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
w_p=<UNDEF> (checkbox) [*<UNDEF>/off|any/Wp]
8021x_mode=wpa (option) [*wpa/WPA|wep/WEP]
cancel=Cancel (button)
add=Save (submit)
As you can see, there's no any choice...
Maybe the javascript there is doing some things that we don't know.
A workaround is to use LiveHttpHeaders Firefox addon to catch the forms POSTed to /goform/FormUpdateVAP and then instead of ticking, do a POST request with WWW::Mechanize.