We Keep Coding

Fetching values from database and showing it in a form upon button click in Laravel

We have a table whose contents are fetched from database. Now, we want to fill a form by data of the relevant row of table that was clicked in Laravel.
This is how the table (left) and the form looks
Table code:
<table id="category_table" class="table table-bordered table-hover">
<thead>
</thead>
<tbody>
#foreach($cat as $c)
<tr>
<?php $index=1;?>
<td>{{$c->cat_name}}</td>
<td width="5%"><button class="btn btn-info" onclick=fill(this)><i class="fa fa-arrow-right"></i></button>
</tr>
<?php $index=$index+1;?>
#endforeach
</tbody>
<tfoot>
</tfoot>
</table>
This is a part of form code:
<div class="card-body">
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" placeholder="Enter Name" value="">
</div>
<div class="form-group">
<label for="short_name">Short Name</label>
<input type="text" class="form-control" id="short_name" placeholder="Short Name">
</div>
<div class="form-group">
<label for="description">Description</label>
<textarea class="form-control" id="description" placeholder="Description"></textarea>
</div>
This is the javascript part that fetched the selected table row value through which we need to fetch other values from the database into form:
<script type="text/javascript">
function fill(e)
{
var $item = $(e).closest("tr").find("td:first").text();
document.getElementById("name").value= $item;
}
}
</script>

You can do something like this:
<button class="btn btn-info" data-model='{{$c->toJson()}}' onclick="fill()">
// then in js something like
function fill() {
let $item = $(this).attr("data-model");
console.log($item); // item should have all the data
}
Edit:
The questioner didn't make use of Laravel Eloquent Models. That's why the solution, in this case, deals with normal php objects like so:
data-model='{{ json_encode($c)}}'

Show error on specific input field in html table td using jQuery

I am trying to highlight the input field which is in html table td. I am looping the html table but unable to highlight the input field if quantity is 0 in input field. what i have tried is below.
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
</div>
Below is my jquery code where i am looping the html table and want to highlight the input field which is in html table td.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
onTabShow: function(tab, navigation, index) {
if (index == 1) {
$('#tblPurchaseOrders').find('tr:has(td)').each(function() {
if (parseInt(($(this).find('#Quantity')).val()) == 0)
{
//show error
}
});
}
}
});
});

You are filtering per ID (#Quantity). Two (or more) elements cannot share the same ID. Try to select elements by name, for example:
$('#tblPurchaseOrders').find('td > input[name=Quantity]').each(function() {
var val = $(this).val();
if (parseInt(val) == 0)
{
// show error
// note: if needed, you can obtain a reference
// to container <tr> using: $(this).parent('tr');
}
});
Remember to change id property of Quantity elements to name.
Note: untested code that might not work as-is, I'm just showing you the right direction.

If your intention is to use the Twitter Bootstrap Wizard (TBW from now on) for your validation flow, you probably don't want this validation to trigger when you open the tab, which is what happens, when you place your code inside of the onTabShow function.
I assume you want the validation of the fields to be done when the user wants to go to the next step, by pressing the "Next" link you have, or rather, when you want to load the "next tab". For this, you should use onNext rather than onTabShow for your validation.
$(document).ready(function() {
$('#rootwizard').bootstrapWizard({
tabClass: 'nav nav-pills',
onNext: function(tab, navigation, index) {
var res = $("input[name='Quantity']").each(function() {
var val = $(this).val();
if(parseInt(val) == 0) {
$(this).focus();
// This will stop the .each-iteration
// We only want to focus the _first_ element, otherwise it
// would keep iterating, and change focus to the next 0-valued input
return false;
}
});
// We use the result returned from running the each function
// If false was returned at any point during the .each function,
// var res will be false. Pass this onto the onNext call, to
// prevent the the user to move to next tab.
if(!res) return false;
}
});
});
For this to work, you'll have to replace id="Quantity" with name="Quantity", in both your instances.
If you want to use .focus() on the first element, regardless of which input is invalid, you should remove $(this).focus() from the previous example, and instead replace if(!res) return false with the following:
if(!res) {
$("input[name='Quantity']").first().focus();
return false;
}

Can you try this
<div id="rootwizard">
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<ul>
<li>details</li>
<li>captain</li>
</ul>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane" id="details">
<div class="row">
<div class="col-sm-12">
<h4 class="info-text">
Let's start with the basic details.
</h4>
</div>
<div class="form-horizontal">
<div class="form-group">
<div class="col-md-12">
<div class="persons">
<table class="table table-condensed table-hover" id="tblPurchaseOrders">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
<tbody id="dtTable">
<tr>
<td>
<input type="text" name="ProductCode" value="A" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="A1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="A1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" value="0" class="form-control" />
</td>
</tr>
<tr>
<td>
<input type="text" name="ProductCode" value="B" class="form-control" />
</td>
<td>
<input type="text" name="SKU" value="B1" class="form-control" />
</td>
<td>
<input type="text" name="Name1" value="B1" class="form-control" />
</td>
<td>
<input type="text" id="Quantity" name="Quantity" value="1" class="form-control" />
</td>
</tr>
</table>
</div>
</div>
</div>
<hr />
</div>
</div>
</div>
<div class="tab-pane" id="captain">
<div class="row">
<div class="form-group">
<div class="col-md-12">
<table class="table table-condensed table-hover" id="tbOrderDetail">
<tr>
<th>
Product Code
</th>
<th>
SKU
</th>
<th>
Product Name
</th>
<th>
Quantity
</th>
</tr>
</table>
</div>
</div>
</div>
</div>
<ul class="pager wizard">
<li class="previous first" style="display:none;">First</li>
<li class="previous">Previous</li>
<li class="next last" style="display:none;">Last</li>
<li class="next">Next</li>
</ul>
</div>
</div>
<div class="tab-content">
And Javascript code
$(document).ready(function () {
$('#rootwizard').bootstrapWizard({
onTabShow: function (tab, navigation, index) {
if (index == 0) {
$('#dtTable tr').each(function (i, row) {
$(this).find('[name=Quantity]').each(function () {
alert($(this).val())
})
if ($(this).val() == 1) {
///Do something
}
});
}
}
});
});

Clearing the form input fields

[![output image][1]][1]
I have made a webpage in which I am reading data from a JSON file and displaying it. I am also taking input from input fields and displaying it along with the previous data. But when I click on submit button, the input fields does not get cleared and still have the previous input data. I am resetting the fields but still it's not working.
Here is my code.
<!DOCTYPE html>
<html ng-app="Provider List">
<head>
<meta charset="utf-8">
<title>Provider's List</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="style/style.css">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js">
</script>
<script type="text/javascript" src= "script/script.js"></script>
</head>
<body ng-controller="Controller">
<div class="container">
<div class="title">
<h1>Provider Directory</h1>
<h5>v2.0</h5>
</div>
<div class="tableDiv">
<div class="providerList">
<p>Provider List</p>
</div>
<table style="width: 100%;">
<thead>
<tr>
<th ng-click="sortData('last_name')">Last Name <div ng-class="getSortClass('last_name')"></div> </th>
<th ng-click="sortData('first_name')">First Name <div ng-class="getSortClass('first_name')"></div> </th>
<th ng-click="sortData('email_address')">Email <div ng-class="getSortClass('email_address')"></div> </th>
<th ng-click="sortData('specialty')">Specialty <div ng-class="getSortClass('specialty')"></div> </th>
<th ng-click="sortData('practice_name')">Practice Name <div ng-class="getSortClass('practice_name')"></div> </th>
<th ng-click="">Delete</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="peoples in people | orderBy:sortColumn:reverseSort">
<td>{{peoples.last_name}}</td>
<td>{{peoples.first_name}}</td>
<td>{{peoples.email_address}}</td>
<td>{{peoples.specialty}}</td>
<td>{{peoples.practice_name}}</td>
<td><input type="button" value = "Delete" text = "Button" data-ng-click="removeRow($index)"/> </td>
</tr>
</tbody>
</table>
</div>
<div class="quickaddForm">
<form class="form-horizontal" role="form" ng-submit="addRow()">
<label>Create Provider</label>
<div class="form-group">
<label class="col-md-2 control-label">Last Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="last_name"
ng-model="last_name" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">First Name</label>
<div class="col-md-4">
<input type="text" class="form-control" name="first_name"
ng-model="first_name"required/>
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Email</label>
<div class="col-md-4">
<input type="text" class="form-control" name="email_address"
ng-model="email_address" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Specialty</label>
<div class="col-md-4">
<input type="text" class="form-control" name="specialty"
ng-model="specialty" required />
</div>
</div>
<div class="form-group">
<label class="col-md-2 control-label">Practice</label>
<div class="col-md-4">
<input type="text" class="form-control" name="practice_name"
ng-model="practice_name" required/>
</div>
</div>
<div class="form-group">
<div style="padding-left:130px; padding-top:20px">
<input type="submit" value="Submit" class="btn"/>
</div>
</div>
</form>
</div>
</div>
And Here is JAVASCRIPT CODE:
var ProviderList = angular.module('Provider List', []);
ProviderList.controller('Controller', function ($scope, $http){
/*
Reading the data from JSON file
*/
$http.get('people.json').success(function(data) {
$scope.people = data.people;
$scope.sortColumn="LastName"
$scope.reverseSort = false;
/*
Sorting the selected column by clicking on the table heading
*/
$scope.sortData = function (column) {
$scope.reverseSort = ($scope.sortColumn == column) ? !$scope.reverseSort : false;
$scope.sortColumn = column;
}
$scope.getSortClass = function (column) {
if ($scope.sortColumn == column) {
return $scope.reverseSort ? 'arrow-down' : 'arrow-up';
} return '';
}
/*
Adding the data in JSON format which was entered in the form fields
*/
$scope.addRow = function(){
$scope.people.push({ 'last_name':$scope.last_name,
'first_name': $scope.first_name,
'email_address':$scope.email_address,
'specialty' :$scope.specialty,
'practice_name': $scope.practice_name
});
/*
To clear the input fields once SUBMIT button is clicked.
*/
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
};
/*
Removing the selected row by clicking the delete button.
*/
$scope.removeRow = function (idx) {
$scope.people.splice(idx, 1);
};
});
});

You are binding your inputs with $scope variables so the inputs will be always having the values in your controller, so you need to reset these values in your controller.
And here in your code you are clearing the wrong variables:
$scope.people.last_name=' ';
$scope.people.first_name=' ';
$scope.people.email_address='';
$scope.people.specialty='';
$scope.people.practice_name='';
You need to clear the binded variables without .people, because you are just clearing variables inside your people object here.
So that's what you need:
$scope.last_name='';
$scope.first_name='';
$scope.email_address='';
$scope.specialty='';
$scope.practice_name='';

First add a name for your form, say myForm (not a must if you are not using AngularJS's form validation).
<form name="myForm" class="form-horizontal" role="form" ng-submit="addRow()"></form>
Under the addRow() method in your Angular controller, manually reset all data model values and $setPristine().
$scope.addRow = function() {
// Your codes to submit the data to server
// ...
// Manual Reset
$scope.first_name = '';
$scope.last_name = '';
// Set Form Pristine (Not a must if you are not using AngularJS's form validation)
$scope.myForm.$setPristine();
}

Simple solution to use html form as input for python script

I have looked everywhere and I didn't found really good answer.
I am generating local html page with python and I want to read data from form over there, use this as input for python script and display return from there properly.
f = open('testapi.html','w')
message = """
<html>
<head>
<title></title>
<link rel="stylesheet" href="Bootstrap/bootstrap-3.3.5-dist/css/bootstrap.css" type="text/css"/>
<script>
</script>
</head>
<body>
<div class="row">
<div class="col-md-2">
</div>
<div class="col-md-3">
<p>Search for best deals</p>
<form name="deals" action="">
<table>
<thead></thead>
<tbody>
<tr> <th>Title </th> <th><input type="text" id="Title" value=""><br></th> </tr>
<tr> <th>Lowest price</th> <th><input type="text" id="LowerPrice" value=""><br></th> </tr>
<tr> <th>Highest price</th> <th><input type="text" id="UpperPrice" value=""><br></th> </tr>
<tr> <th>Sale only</th> <th><input type="checkbox" id="OnSale" value=""></br></th> </tr>
</tbody>
</table>
<p>Sort by:</p>
<input type="radio" name="sort" id="DealRating" value="a">Deal rating<br>
<input type="radio" name="sort" id="Title" value="b">Title<br>
<input type="radio" name="sort" id="Price" value="c">Price<br>
<input type="radio" name="sort" id="Release" value="d">Release<br>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
<p> OR </p>
</div>
<div class="col-md-3">
<p>Search for your favourite games<p>
<form name="games" action="">
<table>
<thead></thead>
<tbody>
<tr><th>Title</th> <th><input type="text" id="GameTitle" value=""></br></th></tr>
</tbody>
</table>
<input type="button" name="Sumbit" value="Submit" onClick="">
</form>
<p> Note: all fields are optional, fill only what you are intrested in.</p>
</div>
<div class="col-md-2">
</div>
</div>
</body>
</html>
"""
f.write(message)
f.close()
my question now is: how I can use that form input to process it in api search and then return result back on this page?
OR
eventually: how to runnpython script from my page and just display results?
Note: I have to use python for this. This is requirement for my project.

It looks like you're looking for something like a CGI script in python. Python has some support for this in the standard library.
There are a lot of tutorials that explain that in detail how to do that exactly.
You could also use mod_python, which is an extension for the Apache web server to run and parse python scripts.

How to change modelAttribute of a form from jquery or javascript?

Am developing a application using HTML5 and Spring MVC.
A table is displayed initially and on clicking a row, a form should be populated as dialog with that specific datas of the row filled in form attributes.
So what i need actually is on clicking that row modelArrtibute of that form should be set from jquery or javascript.
<div class="form-group">
<form:label path="smtpServer" for="serialNumber"
class="col-sm-3 col-sm-offset-2 control-label">SMTP Server</form:label >
<div class="col-sm-5">
<form:input path="smtpServer" type="text" class="form-control" id="serialNumber" name="smtpserver"
placeholder="SMTP Server" />
</div>
</div>
<div class="form-group">
<form:label path="portNumber" for="serialNumber"
class="col-sm-3 col-sm-offset-2 control-label">Port
Number</form:label >
<div class="col-sm-5">
<form:input path="portNumber" type="text" class="form-control" id="serialNumber"
placeholder="Port Number" />
</div>
</div>
<div class="col-sm-offset-4">
<p>
<h5>
<form:checkbox path="issmtpEnabled" value="1"/>Enable SMTP Authentication
</h5>
</p>
</div>
<div class="form-group">
<form:label path="fromAddress" for="serialNumber"
class="col-sm-3 col-sm-offset-2 control-label">From
Email Address</form:label >
<div class="col-sm-5">
<form:input path="fromAddress" type="text" class="form-control" id="serialNumber"
placeholder="From Email Address" />
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" value="Apply" />
</div>
</form:form>
TABLE
<table class="table table-hover">
<thead>
<tr class="active">
<th>SMTP Server</th>
<th>Port Number</th>
<th>Sender Email</th>
<th>Use SSL/TLS Secure Connection</th>
</tr>
</thead>
<tbody>
<c:forEach var="PT"
items="${alertSettingsManagement.emailSettingsAlertList}">
<tr id="${PT.id}" class="emailSettingsRow">
<td>${PT.smtpServer}</td>
<td>${PT.portNumber}</td>
<td>${PT.fromAddress}</td>
<td>${PT.issslEnabled == 1 ? 'Yes' : 'No'}</td>
</tr>
</c:forEach>
</tbody>
</table>
JQUERY
$('.emailSettingsRow').click( function() {
//want to set modelAttribute here
var row = $(this).find('td:first').text();
$('#emailModal').modal('show');
});

You can not change modelAttribute of a spring tag.
Why because at the time of the rendering the response spring's tag will be converted as normal tag in HTML, and it will not contain modelAttribute any more, modelAttribute will be converted as name and id (i.e. name of modelAttribute will be given to both name and id attributes in the HTML form tag).