We Keep Coding

Can't save data from Html Asp.net Core to Mysql Using

I am learning frontend and I face this problem to save data from Html to Mysql in Asp.Net Core:
I have Order Model
OrderDetails Model
and I made ViewModel
Html table coded to add Rows dinamicly
And i get project , supplier and Item by viewdata as select items
All above it was done But can not save the record!!
<link rel="stylesheet" href="~/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="~/lib/font-awesome/css/all.min.css">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="~/css/style.css">
<!-- container -->
<div class="container" >
<div style="align-items:self-end">
<input type="button" onclick="enabled()" value=" New Purchace Order" style="margin:10px 10px;" id="newOrder" class="btn btn-info" />
</div>
#* <div class="row bg-info m-1 block">
<div class="text-center col-md-8">
<h1> Purchace Order <span id="countpro"></span></h1>
</div>
</div>*#
<!-- Order Section -->
#*<form asp-action="Create">*#
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row bg-secondary m-1 block">
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderNO" class="control-label"></label>
<input asp-for="OrderNO" id="poNO" class="form-control" />
<span asp-validation-for="OrderNO" class="text-danger"></span>
</div></div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="OrderDate" class="control-label"></label>
<input asp-for="OrderDate" id="poDate" class="form-control" />
<span asp-validation-for="OrderDate" class="text-danger"></span>
</div></div>
<div class="col-md-4 col-sm-12">
<div class="form-group">
<label asp-for="Status" class="control-label"></label>
<input asp-for="Status" id="status" class="form-control" />
<span asp-validation-for="Status" class="text-danger"></span>
</div></div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label asp-for="ProjectId" class="control-label"></label>
<select asp-for="ProjectId" id="project" class ="form-control" asp-items="ViewBag.ProjectId"></select>
</div></div>
<div class="col-md-6 col-sm-12">
<div class="form-group">
<label asp-for="SupplierId" class="control-label"></label>
<select asp-for="SupplierId" id="supplier" class ="form-control" asp-items="ViewBag.SupplierId"></select>
</div></div>
<div class="form-group">
<label asp-for="Subject" class="control-label"></label>
<input asp-for="Subject" id="subject" placeholder="Enter Order Description ...." class="form-control" />
<span asp-validation-for="Subject" class="text-danger"></span>
</div>
</div>
<!-- End Order Section -->
<!-- Item Section -->
<div class="row bg-primary m-1 block">
<div class="col-md-5 col-sm-12">
<div class="form-group">
<label asp-for="ItemId" class="control-label"></label>
<select asp-for="ItemId" id="item" asp-placeholder="Select Item ...." class ="form-control" asp-items="ViewBag.ItemId"></select>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="UnitId" class="control-label"></label>
<select asp-for="UnitId" id="unit" class ="form-control" asp-items="ViewBag.UnitId"></select>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="Qty" class="control-label"></label>
<input asp-for="Qty" id="qty" class="form-control" onkeyup="getTotal()" onchange="getTotal()"/>
<span asp-validation-for="Qty" class="text-danger"></span>
</div></div>
<div class="col-md-1 col-sm-12">
<div class="form-group">
<label asp-for="Price" class="control-label"></label>
<input asp-for="Price" id="price" class="form-control" onkeyup="getTotal()" onchange="getTotal()" />
<span asp-validation-for="Price" class="text-danger"></span>
</div> </div>
<div class="col-md-2 col-sm-12">
<div class="form-group">
<label asp-for="Total" class="control-label"></label>
<input asp-for="Total" id="total" class="form-control bg-danger text-center" disabled value="0" />
<span asp-validation-for="Total" class="text-danger"></span>
</div></div>
<div class="col-md-2 col-sm-12">
<label class="control-label">Add</label>
<button class="btn btn-success " onclick=" addRow();" id="addButton">
<i class="fas fa-plus"></i></button>
</div>
</div>
<!-- End Item Section -->
<!-- Table -->
<table class="table " style="width:100%;" id="tablPro">
<thead>
<tr>
<th>#</th>
<th style="width:30%;">Product/Service</th>
<th style="width:10%;">Unit</th>
<th style="width:10%;">Qty</th>
<th style="width:10%;">Price</th>
<th style="width:15%;">Total</th>
<th style="width:5%;"></th>
<th style="width:5%;"></th>
</tr>
</thead>
<tbody id="tablePro">
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
<!-- End Table -->
<!-- Total Section -->
#* <div class="row bg-teal m-1 block" id="divPrint">*#
<div class="totalcontainer">
<div class="col-md-3 col-sm-12">
<label asp-for="SubTotal" style="color:Black;" class="control-label"></label>
<input asp-for="SubTotal" id="subTotal" class="form-control" />
<span asp-validation-for="SubTotal" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12">
<label asp-for="Vat" style="color:Black;" class="control-label"></label>
<input asp-for="Vat" id="vat" class="form-control" />
<span asp-validation-for="Vat" class="text-danger"></span>
</div>
<div class="col-md-3 col-sm-12">
<label asp-for="GrandTotal" style="color:Black;" class="control-label"></label>
<input asp-for="GrandTotal" id="grandTotal" class="form-control" />
<span asp-validation-for="GrandTotal" class="text-danger"></span>
</div>
<div class="text-center">
<input type="submit" value=" + Save Purchace Order" id="saveBtn" style="margin:10px 10px;" class="btn btn-primary" />
</div>
</div>
<!-- End Total Section -->
<hr />
<!-- End Createor Section -->
<div class="row block">
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label asp-for="CreatedBy" style="color:Black;" class="control-label"></label>
<input asp-for="CreatedBy" class="form-control" />
<span asp-validation-for="CreatedBy" class="text-danger"></span>
</div> </div>
<div class="col-md-3 col-sm-12">
<div class="form-group">
<label asp-for="TimeStamp" style="color:Black;" class="control-label"></label>
<input asp-for="TimeStamp" class="form-control" />
<span asp-validation-for="TimeStamp" class="text-danger"></span>
</div> </div>
</div>
<!-- End Createor Section -->
#* </form>*#
</div>
#section Scripts {
#{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
<script src="~/js/addRow.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/adminlte/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="~/lib/font-awesome/js/all.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.min.js"></script>
<script>
// $('#saveBtn').click(function() {
// var data = $('input').serialize();
// $.post(url, data, function(data) {
// console.log(data);
// });
//});
$(function () {
$("#saveBtn").click(function () {
$.ajax({
type: "POST",
contentType: "application/json;charset=utf-8",
url: "CreatePos/Create",
data: "{'poNo':'" + $("#poNO").val() +
"', 'poDate':'" + $("#poDate").val() +
"', 'status':'" + $("#status").val() +
"', 'project':'" + $("#project").val() +
"', 'supplier':'" + $("#supplier").val() +
"', 'Subject':'" + $("#Subject").val() +
"', 'item':'" + $("#item").val() +
"', 'unit':'" + $("#unit").val() +
"', 'qty':'" + $("#qty").val() +
"', 'total':'" + $("#total").val() +
"', 'subTotal':'" + $("#subTotal").val() +
"', 'vat':'" + $("#vat").val() +
"', 'grandTotal':'" + $("#grandTotal").val() + "'}",
async: false,
success: function (response) {
$("#poNO").val("");
$("#poDate").val("");
$("#status").val("");
$("#project").val("");
$("#supplier").val("");
$("#Subject").val("");
$("#item").val("");
$("#unit").val("");
$("#qty").val("");
$("#total").val("");
$("#subTotal").val("");
$("#vat").val("");
$("#grandTotal").val()
alert("record has been saved in database");
},
error: function () {
console.log("there is some error");
}
});
});
});
</script>
}
And her is the Script File
var value = document.getElementById('item');
var getItem = value.options[value.selectedIndex].text;
var unitValue = document.getElementById('unit');
var getUnit = unitValue.options[unitValue.selectedIndex].text;
var qty = document.getElementById('qty').value;
var price = document.getElementById('price').value;
var total = document.getElementById('total').value;
var table = document.getElementsByTagName('table')[0];
var newRow = table.insertRow(table.rows.length);
var x = newRow.rowIndex - 1;
var editBtn =`<button class="btn btn-info" id="editRow">
<i class="fas fa-edit"></i>
</button>` ;
var deleteBtn =`<button class="btn btn-danger" onclick="deleteRow(this)">
<i class="fas fa-trash"></i>
</button>` ;
//defination of row cells
var cell1 = newRow.insertCell(0);
var cell2 = newRow.insertCell(1);
var cell3 = newRow.insertCell(2);
var cell4 = newRow.insertCell(3);
var cell5 = newRow.insertCell(4);
var cell6 = newRow.insertCell(5);
var cell7 = newRow.insertCell(6);
var cell8 = newRow.insertCell(7);
// Push row Values into tabel Body
cell1.innerHTML = x++;
cell2.innerHTML = getItem;
cell3.innerHTML = getUnit;
cell4.innerHTML = qty;
cell5.innerHTML = price;
cell6.innerHTML = total;
cell7.innerHTML = editBtn;
cell8.innerHTML = deleteBtn;
}
function getTotal() {
if (price.value != '') {
let result = price.value * qty.value;
total.value = result;
total.style.background = '#040';
let vatPercentage = 0.15;
let subtotal = document.getElementById('subTotal');
let vat = document.getElementById('vat');
let grandTotal = document.getElementById('grandTotal');
subtotal.value = total.value;
vat.value = subtotal.value * vatPercentage;
grandTotal.value = +vat.value + +subtotal.value;
}
else {
total.value = '';
total.style.background = '#a00d02';
}
}
Finally This is the controller
POST: CreatePos/Create
[HttpPost]
[ValidateAntiForgeryToken]
public async Task<IActionResult> Create([Bind("OrderId,OrderNO,OrderDate,Subject,Status,CreatedBy,TimeStamp,ProjectId,SupplierId,ItemId,UnitId,Qty,Price,Total,SubTotal,Vat,GrandTotal")] CreatePoModel createPoModel)
{
if (ModelState.IsValid)
{
_context.Add(createPoModel);
await _context.SaveChangesAsync();
return RedirectToAction(nameof(Index));
}
ViewData["ProjectId"] = new SelectList(_context.Projects, "ProjectId", "ProjectName", createPoModel.ProjectId);
ViewData["SupplierId"] = new SelectList(_context.Suppliers, "SupplierId", "SupplierName", createPoModel.SupplierId);
ViewData["ItemId"] = new SelectList(_context.PoItems, "ItemId", "ItemName", createPoModel.ItemId);
ViewData["UnitId"] = new SelectList(_context.Units, "UnitId", "UnitCode", createPoModel.UnitId);
return View(createPoModel);
}
Please Consider that I am beginner still learning: (

Ajax Jquery Laravel form view save button dosen't work

After click button i've got error in console: app.js:16437 POST laravel.swt101.eu/dynamic-field/insert 500 (Internal Server Error)
On this link laravel.swt101.eu/dynamic-field/insert i've got
Symfony\Component\HttpKernel\Exception\MethodNotAllowedHttpException
The GET method is not supported for this route. Supported methods: POST.
I am making dynamic form when you can dynamicly add input fields using button and save the data to db, but have got one problem with this. When i write data in form and press save the button is blocking itself and cursor changes to prohibition sign on it.
This is model for it:
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class DynamicField extends Model
{
protected $fillable = [
'name', 'PKWIU', 'quantity', 'unit', 'netunit', 'nettotal', 'VATrate', 'grossunit', 'grosstotal'
];
}
This is controller:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\DynamicField;
use Validator;
class DynamicFieldController extends Controller
{
function index()
{
return view('proforms.create');
}
function insert(Request $request)
{
if($request->ajax())
{
$rules = array(
'name.*' => 'required',
'PKWIU.*' => 'required',
'quantity.*' => 'required',
'unit.*' => 'required',
'netunit.*' => 'required',
'nettotal.*' => 'required',
'VATrate.*' => 'required',
'grossunit.*' => 'required',
'grosstotal.*' => 'required',
);
$error = Validator::make($request->all(), $rules);
if($error->fails())
{
return response()->json([
'error' => $error->errors()->all()
]);
}
$name = $request->name;
$PKWIU = $request->PKWIU;
for($count = 0; $count < count($name); $count++)
{
$data = array(
'name' => $name[$count],
'PKWIU' => $PKWIU[$count],
'quantity' => $quantity[$count],
'unit' => $unit[$count],
'netunit' => $netunit[$count],
'nettotal' => $nettotal[$count],
'VATrate' => $VATrate[$count],
'grossunit' => $grossunit[$count],
'grosstotal' => $grosstotal[$count],
);
$insert_data[] = $data;
}
DynamicField::insert($insert_data);
return response()->json([
'success' => 'Data Added successfully.'
]);
}
}
}
This is migration:
<?php
use Illuminate\Support\Facades\Schema;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Database\Migrations\Migration;
class CreateDynamicField extends Migration
{
/**
* Run the migrations.
*
* #return void
*/
public function up()
{
Schema::create('dynamic_fields', function (Blueprint $table) {
$table->string('name')->nullable();
$table->string('PKWIU')->nullable();
$table->string('quantity')->nullable();
$table->string('unit')->nullable();
$table->string('netunit')->nullable();
$table->string('nettotal')->nullable();
$table->string('VATrate')->nullable();
$table->string('grossunit')->nullable();
$table->string('grosstotal')->nullable();
$table->timestamps();
$table->time('deleted_at')->nullable();
});
}
/**
* Reverse the migrations.
*
* #return void
*/
public function down()
{
Schema::dropIfExists('dynamic_fields');
}
}
This is routes for it:
Route::get('dynamic-field', 'DynamicFieldController#index');
Route::post('dynamic-field/insert', 'DynamicFieldController#insert')->name('dynamic-field.insert');
This is view with not working button and whitch not sending data from second form, this form at the bottom of the page.
Code for it is after a large gap at the bottom:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel 5.8 - DataTables Server Side Processing using Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div id="top" style="position: fixed; top: 0px; left: 20px;">
#extends('layouts.app')
#section('content')
<div class="row">
<div class="col-lg-12 margin-tb">
<div class="pull-left">
<h2>Dodaj nową proformę</h2>
</div>
<div class="pull-right">
<a class="btn btn-primary" href="{{ route('proforms.index') }}">Wstecz</a>
</div>
</div>
</div>
#if ($errors->any())
<div class="alert alert-danger">
<strong>Whoops!</strong> There were some problems with your input.<br><br>
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form action="{{ route('proforms.store') }}" method="POST">
#csrf
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Data wystawienia:</strong>
<input type="text" name="proformdate" class="form-control" placeholder="Data wystawienia">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Kontrahent:</strong>
<br>
<select class="form-controll" name="user_id">
#foreach($users as $user)
<option value="{{$user->id}}">{{$user->showname}}</option>
#endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Waluta:</strong>
<br>
<select class="form-controll" name="currency_id">
#foreach($currencys as $currency)
<option value="{{$currency->id}}">{{$currency->currency}}</option>
#endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Forma płatności:</strong>
<br>
<select class="form-controll" name="form_id">
#foreach($forms as $form)
<option value="{{$form->id}}">{{$form->form}}</option>
#endforeach
</select>
<br>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Data sprzedaży:</strong>
<input type="text" name="selldate" class="form-control" placeholder="Kategoria">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Termin płatności:</strong>
<input type="text" name="paymentdate" class="form-control" placeholder="Termin płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Forma płatności:</strong>
<input type="text" name="paymentmethod" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Miejsce wystawienia:</strong>
<input type="text" name="city" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Status:</strong>
<input type="text" name="status" class="form-control" placeholder="Status">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Uwagi:</strong>
<input type="text" name="comments" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="pull-left" style="margin: 35px;">
<h3>Pozycje faktury</h3>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Nazwa towaru lub usługi:</strong>
<input type="text" name="name" class="form-control" placeholder="Data wystawienia">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>PKWiU:</strong>
<input type="text" name="PKWIU" class="form-control" placeholder="Kontrahent">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Ilość:</strong>
<input type="text" name="quantity" class="form-control" placeholder="Kategoria">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Jednostka:</strong>
<input type="text" name="unit" class="form-control" placeholder="Termin płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Cena netto jednostki:</strong>
<input type="text" name="netunit" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Netto razem:</strong>
<input type="text" name="nettotal" class="form-control" placeholder="Forma płatności">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Stawka VAT:</strong>
<input type="text" name="VATrate" class="form-control" placeholder="Status">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Brutto jednostka:</strong>
<input type="text" name="grossunit" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12">
<div class="form-group">
<strong>Brutto razem:</strong>
<input type="text" name="grosstotal" class="form-control" placeholder="Uwagi">
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 text-center">
<button type="submit" class="btn btn-primary">Zapisz</button>
</div>
</div>
</form>
<p class="text-center text-primary"><small>Artplus 2020</small></p>
</div>
<div class="table-responsive">
<form method="post" id="dynamic_form">
<span id="result"></span>
<table class="table table-bordered table-striped" id="user_table">
<thead>
<tr>
<th width="10%">Nazwa towaru lub usługi</th>
<th width="10%">PKWiU</th>
<th width="10%">Ilość</th>
<th width="10%">Jednostka</th>
<th width="10%">Cena netto</th>
<th width="10%">Netto razem</th>
<th width="10%">Stawka VAT</th>
<th width="10%">Brutto jednostka</th>
<th width="10%">Brutto razem</th>
<th width="10%">Action</th>
</tr>
</thead>
<tbody>
</tbody>
<tfoot>
<tr>
<td colspan="2" align="right"> </td>
<td>
#csrf
<input type="submit" name="save" id="save" class="btn btn-primary" value="Save" />
</td>
</tr>
</tfoot>
</table>
</form>
#endsection
</div>
</body>
</html>
<script>
$(document).ready(function(){
var count = 1;
dynamic_field(count);
function dynamic_field(number)
{
html = '<tr>';
html += '<td><input type="text" name="name[]" class="form-control" /></td>';
html += '<td><input type="text" name="PKWIU[]" class="form-control" /></td>';
html += '<td><input type="text" name="quantity[]" class="form-control" /></td>';
html += '<td><input type="text" name="unit[]" class="form-control" /></td>';
html += '<td><input type="text" name="netunit[]" class="form-control" /></td>';
html += '<td><input type="text" name="nettotal[]" class="form-control" /></td>';
html += '<td><input type="text" name="VATrate[]" class="form-control" /></td>';
html += '<td><input type="text" name="grossunit[]" class="form-control" /></td>';
html += '<td><input type="text" name="grosstotal[]" class="form-control" /></td>';
if(number > 1)
{
html += '<td><button type="button" name="remove" id="" class="btn btn-danger remove">Remove</button></td></tr>';
$('tbody').append(html);
}
else
{
html += '<td><button type="button" name="add" id="add" class="btn btn-success">Add</button></td></tr>';
$('tbody').html(html);
}
}
$(document).on('click', '#add', function(){
count++;
dynamic_field(count);
});
$(document).on('click', '.remove', function(){
count--;
$(this).closest("tr").remove();
});
$('#dynamic_form').on('submit', function(event){
event.preventDefault();
$.ajax({
url:'{{ route("dynamic-field.insert") }}',
method:'post',
data:$(this).serialize(),
dataType:'json',
beforeSend:function(){
$('#save').attr('disabled','disabled');
},
success:function(data)
{
if(data.error)
{
var error_html = '';
for(var count = 0; count < data.error.length; count++)
{
error_html += '<p>'+data.error[count]+'</p>';
}
$('#result').html('<div class="alert alert-danger">'+error_html+'</div>');
}
else
{
dynamic_field(1);
$('#result').html('<div class="alert alert-success">'+data.success+'</div>');
}
$('#save').attr('disabled', false);
}
})
});
});
</script>

I forgot to define variables in controller. After that changes button works.
$name = $request->name;
$PKWIU = $request->PKWIU;
$quantity = $request->quantity;
$unit = $request->unit;
$netunit = $request->netunit;
$nettotal = $request->nettotal;
$VATrate = $request->VATrate;
$grossunit = $request->grossunit;
$grosstotal = $request->grosstotal;

Loading HTML gridview from html textboxes using jquery in asp.net mvc

$('#btnAddPhysicians').click(function () {
var rowCount;
rowCount = $('#gvPhysicians tr').length;
if ($('#txtDoctorName').val() != '' && $('#gvPhysicians').length > 1) {
$('#gvPhysicians').after('<tr><td>' + rowCount + '</td>' +
'<td>' + $('#txtDoctorName').val() + '</td>' +
'<td>' + $('#txtSpecialty').val() + '</td>');
$('#divContainer').find('input:text').each(function () {
$('input:text[id=' + $(this).attr('id') + ']').val('');
}
);
}
else alert('Invalid!');
});
now I write this function in jquery but its always executing else statement "Invalid"
code for html textboxes and gridview is below
<div class="form-group">
<div class="tab-custom-content">
<label for="menu_name">Please list ALL active treating physicians (i.e. pulmonologist, oncologist, internist, cardiologist, etc)</label>
</div>
<div class=" row">
<div class="col-sm-4">
<label for="menu_name">Doctor’s Name</label>
<input type="text" class="form-control" id="txtDoctorName" name="txtDoctorName">
</div>
<div class="col-sm-4">
<label for="menu_name">Specialty</label>
<input type="text" class="form-control" id="txtSpecialty" name="txtSpecialty">
</div>
<div class="col-sm-4">
<br />
<button type="submit" id="btnAddPhysicians" class="btn btn-outline-primary">ADD</button>
</div>
</div>
<div class=" row">
<section class="content">
<div class="card">
<div class="card-header">
</div>
<!-- /.card-header -->
<div class="card-body">
<div id="gvPhysicians" class="jsgrid" style="position: relative; height: 100%; width: 200%;">
<div class="jsgrid-grid-header jsgrid-header-scrollbar">
<table class="jsgrid-table">
<tr class="jsgrid-header-row">
<th class="jsgrid-header-cell jsgrid-header-sortable" style="width: 400px;">Doctor's Name</th>
<th class="jsgrid-header-cell jsgrid-align-right jsgrid-header-sortable" style="width: 250px;">Specialty</th>
</tr>
</table>
</div>
<!-- /.card-body -->
<!-- /.card -->
</div>
</div>
</div>
</section>
</div>
<div class=" row">
<button type="submit" id="btnNext1" class="btn btn-outline-primary">Next</button>
</div>
</div>
I want to show txtDoctorName value and txtSpecialty to gridview column on click of btnAddPhysicians.I am doind this in MVC 5 and using jquery for this.

I just added Length >== 1 because it returned Length = 1 each time.

Unable to display and update select based on dynamically created and remove content jquery

/*creates phoens dynamically*/
var phone = 0;
function add_phone() {
phone++;
var objTo = document.getElementById('education_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+phone);
var rdiv = 'removeclass'+phone;
divtest.innerHTML = '<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone ( '+phone+' )</span><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="a[]" value="" placeholder="Type"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="b[]" value="" placeholder="Model"></div></div><div class="col-sm-3 nopadding"><div class="form-group"> <input type="text" class="form-control" name="c[]" value="" placeholder="Color"></div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> <select class="form-control" name="d[]"><option value="">Year</option><option value="2015">2015</option><option value="2016">2016</option><option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> <button class="btn btn-danger" type="button" onclick="remove_phone('+ phone +');"> <span class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div class="clear"></div>';
objTo.appendChild(divtest)
$('#phone_picker').append('<option value="phone-'+phone+'">Phone: ' +phone+'</option>');
}
function remove_phone(rid) {
$("#phone_picker option[value='phone-"+phone+"']").remove();
$('.removeclass'+rid).remove();
}
/*Add details about phone added here*/
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' title='Phone' id='phone_picker_dynamic'><option selected disabled>---</option></select> </td><td><input name='mail"+i+"' type='text' placeholder='field 1' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='field 2' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!--Add Phone-->
<div class="panel panel-default">
<div class="panel-heading">Phone Information</div>
<div class="panel-body">
<div id="education_fields">
</div>
<div class="input-group">
<div class="input-group-btn">
<span class="help-block" style="font-weight: 400; font-size: 14px;">Add Phone.</span>
<button class="btn btn-success" type="button" onclick="add_phone();"> <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> </button>
</div>
</div>
</div>
</div>
<!--Individual phone information-->
<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone selected additional details.</span>
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr>
<th class="text-center">
#
</th>
<th class="text-center">
Phone
</th>
<th class="text-center">
Type
</th>
<th class="text-center">
Carrier
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select class="form-control" title="Phone" id="phone_picker">
<option selected disabled>---</option>
</select>
</td>
<td>
<input type="text" placeholder='field 1' class="form-control"/>
</td>
<td>
<input type="text" placeholder='field 2' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Phone</a><a id='delete_row' class="pull-right btn btn-default">Delete Phone</a>
</div>
Trying to accomplish the following sequence of steps:
1. A section for entering information about a "Phone" is added when clicking the "+" green button.
2. The phone count(For Example: Phone 1) when dynamically added will be reflected onto the "phone picker" select in table below.
3. User can then select which phone (It is? Phone 1 or 2 etc) to complete information (Each detail about a phone is a row in the table)
4.When adding a new row, the phone(s) added should be reflected on the dynamic row as well and if phone is remove it should also reflect change that "Phone 2" is removed.
5.If any of the "phone information" after being added is removed, then change should reflect on the phone picker select.
So far this is what I have. I'm having difficulties displaying the "phone section number" on the phone picker select and also if I remove section phone picker doesn't reflect change.

<script type="text/javascript">
/*creates phoens dynamically*/
var phoneList = [];
function add_phone() {
var index = phoneList.length+1;
phoneList.push('phone: '+index);
var divtest = '<div class="form-group removeclass'+index+'">'+
'<span class="help-block" style="font-weight: 400; font-size: 14px;">Phone ( '+index+' )</span>'+
'<div class="col-sm-3 nopadding">'+
'<div class="form-group">'+
' <input type="text" class="form-control" name="a[]" value="" placeholder="Type"></div></div>'+
'<div class="col-sm-3 nopadding"><div class="form-group">'+
'<input type="text" class="form-control" name="b[]" value="" placeholder="Model"></div>'+
'</div><div class="col-sm-3 nopadding">'+
'<div class="form-group"> <input type="text" class="form-control" name="c[]" value="" placeholder="Color">'+
'</div></div><div class="col-sm-3 nopadding"><div class="form-group"><div class="input-group"> '+
'<select class="form-control" name="d[]">'+
'<option value="">Year</option><option value="2015">2015</option><option value="2016">2016</option>'+
'<option value="2017">2017</option><option value="2018">2018</option> </select><div class="input-group-btn"> '+
'<button class="btn btn-danger" type="button" onclick="remove_phone('+ index +');"> <span '+
'class="glyphicon glyphicon-minus" aria-hidden="true"></span> </button></div></div></div></div><div '+
'class="clear"></div>';
$('#education_fields').append(divtest);
updatePhonePicker();
}
function remove_phone(rid) {
$("#phone_picker option[value='"+rid+"']").remove();
$('.removeclass'+rid).remove();
phoneList.splice(phoneList.indexOf(rid),1);
updatePhonePicker();
}
function updatePhonePicker(){
var options = '<option selected disabled>---</option>';
phoneList.forEach(function(element, index){
options+='<option value="'+element+'">'+element+'</option>'
})
$('#tab_logic').find('tr').each(function(ind,ele){
$(ele).find("#phone_picker").empty().append(options);
});
}
/*Add details about phone added here*/
$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td><select class='form-control' title='Phone' id='phone_picker'><option selected disabled>---</option></select> </td><td><input name='mail"+i+"' type='text' placeholder='field 1' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='field 2' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
updatePhonePicker();
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});
});
</script>

Dynamic forms with dynamic elements with related array index

Note: Newbie to javascript and PHP
Requirement:
User has the option to add multiple forms and multiple levels as shown in the image.
structure:
idnum = 0
next = 1;
dimandlevels = [{}];
$(document).on('click', '.addlevel', function() {
clickedIdnum = $(this).data('idnum');
//console.log(idnum+'\n');
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + clickedIdnum + next);
newTextBoxDiv.after().html('<input class="input form-control textboxclass" id="textbox' + next + '" name="dimdetail[' + idnum + '][2][' + next + ']" type="text" placeholder="Enter Level ' + (next + 1) + ' value ">');
newTextBoxDiv.appendTo(".TextBoxesGroup" + idnum);
next++;
});
$(document).on('click', '.removelevel', function() {
if (next == 1) {
alert("No more textbox to remove");
return false;
}
next--;
$("#TextBoxDiv" + next).remove();
});
<h3><b>Create Texts</b></h3> <br>
<form class="form-horizontal" name="add_form" id="add_form">
<fieldset>
<form class="form-horizontal" role="form">
<fieldset>
<legend>Enter Dimension Details</legend>
<form class="form-horizontal" role="form">
<div class="controls" id="vignetteform">
<div id="dimensionform0">
<div class="well">
<div class="row">
<label class="col-lg-3 control-label">Dimension Text:</label>
<div class="col-lg-9">
<div class="control-group">
<div class="controls">
<div>
<input class="form-control textboxclassdim" type="text" name="dimdetail[0][0]" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="col-lg-3 control-label">Dimension Description:</label>
<div class="col-lg-9">
<div class="control-group">
<div class="controls">
<div>
<input class="form-control textboxclass" type="text" name="dimdetail[0][1]" />
</div>
</div>
</div>
</div>
</div>
<div class="row">
<label class="col-lg-3 control-label">Enter Level:</label>
<div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1">
<div class="controls TextBoxesGroup0">
<div id="TextBoxDiv00">
<input class="form-control textboxclass" id="textbox" type="text" name="dimdetail[0][2][0]" placeholder="Enter Level 1 Value" />
</div>
</div>
<button class="btn btn-info addlevel" type="button">Add Level</button>
<button class="btn btn-info removelevel" type="button">Remove level</button>
<span id="error_message" class="text-danger"></span>
</div>
</div>
</div>
</div>
</div>
</form>
</fieldset>
</form>
<div class="row">
<div class="col-md-8">
<button class="btn btn-info adddimension" type="button">Add Dimension</button>
<button class="btn btn-info removedimension" type="button">Remove Dimension</button>
<input type="button" name="submit" id="submit" class="btn btn-primary" value="Send" />
</div>
</div>
</fieldset>
</form>
<script src="includes/js/addlevelform.js"></script>
<script src="includes/js/adddimensionform.js"></script>
$(document).ready(function(){
var next = 1;
$(".adddimension").click(function(){
var newDimensionFormDiv = $(document.createElement('div'))
.attr("id",'dimensionform' + next);
newDimensionFormDiv.after().html(
'<div class="well"><div class="row"><label class="col-lg-3 control-label">Dimension Text:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div> <input class="form-control textboxclassdim" type="text" name="dimdetail['+ next +'][0]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Dimension Description:</label><div class="col-lg-9"><div class="control-group"><div class="controls"><div><input class="form-control textboxclass" type="text" name="dimdetail['+ next +'][1]" /></div></div></div></div></div><div class="row"><label class="col-lg-3 control-label">Enter Level:</label><div class="col-lg-8 control-group levelgroup"><input type="hidden" name="count" value="1"><div class="controls TextBoxesGroup'+ next +'" ><div id="TextBoxDiv'+ next +'0"><input class="form-control textboxclass" id="textbox'+ next +'" type="text" name="dimdetail['+ next +'][2][0]" placeholder="Enter Level '+ next +' Value" /></div></div><button data-idnum="'+idnum+'" class="btn btn-info addlevel" type="button">Add Level</button><button class="btn btn-info removelevel" type="button">Remove level</button><span id="error_message'+ next +'" class="text-danger"></span></div></div></div></div>'
);
newDimensionFormDiv.appendTo("#vignetteform");
next++;
idnum++;
var jsonObj = {idnum:1};
dimandlevels.data.push(idnum:1);
console.log(dimandlevels);
});
$(".removedimension").click(function(){
if(next==1){
alert("No more dimension to remove");
return false;
}
next --;
idnum--;
$("#dimensionform" + next).remove();
});
});
Issue: 1. The add level works only on first form
2. And the array indexes should be proper
So i need a way such that i can create multiple dimensions with levels with proper level ids.
Thank you and sorry for my bad code !!!! I am very new to programming :/