I have a Asp.NET MVC application, i trying to use a modal to make the update of the data, i have two modal for Register and Update, the Register is OK, but the Update is not working, when a click on the "Alterar" button, need to open a modal with the data filled, i trying to use JavaScript to do this.
Can someone help me?
My table
My modal that need open filled with data
My Code
Table
<table class="table table-hover table-condensed">
<thead>
<tr>
<th>ID</th>
<th>Produto</th>
<th>Custo</th>
<th>Lucro</th>
<th>Opcoes</th>
</tr>
</thead>
<tbody>
#if (Model != null)
{
foreach(var sale in Model)
{
<tr>
<td>#Html.DisplayFor(model => sale.idProduct)</td>
<td>#Html.DisplayFor(model => sale.nameProduct)</td>
<td>#Html.DisplayFor(model => sale.costProduct)</td>
<td>#Html.DisplayFor(model => sale.profitProduct)</td>
<!--Get values to put on Modal-->
<td><a class="update" data-toggle="modal" href="#updateModal" data-id="#sale.idProduct" data-name="#sale.nameProduct"
data-cost="#sale.costProduct" data-profit="#sale.profitProduct"><span class="glyphicon glyphicon-edit">Alterar</span></a></td>
</tr>
}
}
</tbody>
</table>
enter code here
JavaScript
<script type="text/javascript">
$(document).ready(function () {
$('.update').on('click', function () {
var $this = $(this);
var idProduct = $this.data('id');
var nameProduct = $this.data('name');
var costProduct = $this.data('cost')
var profitProduct = $this.data('profit')
$('#nameProduct').text(nameProduct);
$('#costProduct').text(costProduct);
$('#profitProduct').text(profitProduct);
$("#updateModal #form_update #idProduct").val(idProduct);
$('#updateModal').modal();
});
});
Modal
<div id="updateModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal">×</button>
<h4 class="modal-title">Alterar Produto<span id="name_product"></span></h4>
</div>
<form method="post" id="form_update" action="/Dashboard/Product">
<div class="modal-body">
<div class="form-group">
<input type="hidden" name="idProduct" id="idProduct" class="form-control" placeholder="ID do produto"/>
<input type="text" name="nameProduct" id="nameProduct" class="form-control" placeholder="ID do produto" required />
<input type="text" name="costProduct" id="costProduct" class="form-control" placeholder="Custo do Produto" required />
<input type="text" name="profitProduct" id="profitProduct" class="form-control" placeholder="Lucro do Produto" required />
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-warning" value="Atualizar" />
<button type="button" class="btn btn-warning" data-dissmiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
</div>
to change the value of input you need to use val() :
<script type="text/javascript">
$(document).ready(function () {
$('.update').on('click', function () {
var $this = $(this);
var idProduct = $this.data('id');
var nameProduct = $this.data('name');
var costProduct = $this.data('cost')
var profitProduct = $this.data('profit')
$('#nameProduct').val(nameProduct);
$('#costProduct').val(costProduct);
$('#profitProduct').val(profitProduct);
$("#updateModal #form_update #idProduct").val(idProduct);
$('#updateModal').modal();
});
});
Your modal contains only inputs.
For setting the value of input you used $('#nameProduct').text(nameProduct) and that's the wrong thing. You need the val() method.
$('#nameProduct').val(nameProduct);
.text() method is used specially for div, span, etc.
UPDATE
<td>#Html.DisplayFor(model => sale.idProduct)</td> generates a span with the follow properties: id and name have value idProduct. The problem is that you have two elements with same id(in table and in modal). id attribute must be unique in DOM.
Modal
<div id="updateModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dissmiss="modal">×</button>
<h4 class="modal-title">Alterar Produto<span id="name_product"></span></h4>
</div>
<form method="post" id="form_update" action="/Dashboard/Product">
<div class="modal-body">
<div class="form-group">
<input type="hidden" class="form-control modalInput" placeholder="ID do produto"/>
<input type="text" class="form-control modalInput" placeholder="ID do produto" required />
<input type="text" class="form-control modalInput" placeholder="Custo do Produto" required />
<input type="text" class="form-control modalInput" placeholder="Lucro do Produto" required />
</div>
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-warning" value="Atualizar" />
<button type="button" class="btn btn-warning" data-dissmiss="modal">Cancelar</button>
</div>
</form>
</div>
</div>
JAVASCRIPT
<script type="text/javascript">
$(document).ready(function () {
$('.update').on('click', function () {
var modal=$('#updateModal');
var idInput = modal.find('input.modalInput').eq(0);
var nameInput = modal.find('input.modalInput').eq(1);
var costInput = modal.find('input.modalInput').eq(2);
var profitInput = modal.find('input.modalInput').eq(3);
idInput.val($(this).data('id'));
nameInput .val($(this).data('name'));
costInput.val($(this).data('cost'));
profitInput .val($(this).data('profit'));
modal.modal();
});
});
</script>
HTML
foreach(var sale in Model)
{
<tr>
<td>#Html.DisplayFor(model => sale.idProduct)</td>
<td>#Html.DisplayFor(model => sale.nameProduct)</td>
<td>#Html.DisplayFor(model => sale.costProduct)</td>
<td>#Html.DisplayFor(model => sale.profitProduct)</td>
<!--Get values to put on Modal-->
<td><a class="update" data-id="#sale.idProduct" data-name="#sale.nameProduct" data-cost="#sale.costProduct" data-profit="#sale.profitProduct"><span class="glyphicon glyphicon-edit">Alterar</span></a></td>
</tr>
}
you must use val().You use like a text("asda").you change these problem resolve
Related
I have an event page which contains a list of participants. From there users can be invited to that event by opening a modal view containing a user list. Users are shown in the same modal with each having an 'Invite'(submit) button next to them. How can I let the controller action know which user is invited?
From what I could find, creating a form for each list element is bad and in addition displays warnings, but if I create a form element on top of the 'foreach', I then need to somehow find which user to submit.
Also thought about appending incrementing numbers to each of submit button name, but I still need to somehow map them to 'their' users.
Along with the invited user id, controller post action also needs to receive the event id.
Here's the code:
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Select user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="eventMemberForm" method="post" class="col-sm-6 custom-close" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-url="#Url.Action("SendInvitation", "Sports")">
<input type="hidden" asp-for="Invitation.FkEvent" value="#Model.Event.EventId" />
<input type="hidden" asp-for="Invitation.EventInvitationId" />
<div class="modal-body">
<input class="form-control p-2 mb-2" id="myInput" type="text" placeholder="Search..">
<h4 class="align-content-center">Users</h4>
<div class="form-group">
<table class="w-100">
<tbody id="myField">
#foreach (var item in Model.Users)
{
<tr>
<td class="d-flex">
<div> #Html.DisplayFor(modelItem => item.Text) </div>
<input type="hidden" asp-for="Invitation.FkUser" value="#item.Value" />
<div class="ml-auto">
<input id="btnSave" type="submit" value="Invite" class="btn btn-success" />
</div>
</td>
</tr>
++i;
}
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</div>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myField tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
completed = () => {
alert("User invited");
};
</script>
You can use jquery ajax to pass the parameters you need, through the click event, get the corresponding value of the control needed next to the current button.
By adding the name attribute to the submit button, and then triggered in jquery.
And add the id to the div that stores the Text value of User to facilitate finding the corresponding value in jquery.
#section Scripts{
<script>
$(document).ready(function () {
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myField tr").filter(function () {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
$("[name=submitBtn]").click(function () {
event.preventDefault();
var obj = {
myUser: {
Text: $($(this).parent().siblings()[0]).text(),
Value: $($(this).parent().siblings()[1]).val()
},
eventId: $("#Invitation_FkEvent").val()
};
$.ajax({
url: $("#eventMemberForm").attr("data-ajax-url"),
method: 'post',
data: obj,
})
});
});
completed = () => {
alert("User invited");
};
</script>
}
<h1>Index</h1>
<button data-toggle="modal" data-target="#myModal" class="btn btn-primary">Submit</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Select user</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<form id="eventMemberForm" method="post" class="col-sm-6 custom-close" data-ajax="true" data-ajax-method="post" data-ajax-complete="completed" data-ajax-url="#Url.Action("SendInvitation", "Sports")">
<input type="hidden" asp-for="Invitation.FkEvent" value="#Model.Event.EventId" />
<input type="hidden" asp-for="Invitation.EventInvitationId" />
<div class="modal-body">
<input class="form-control p-2 mb-2" id="myInput" type="text" placeholder="Search..">
<h4 class="align-content-center">Users</h4>
<div class="form-group">
<table class="w-100">
<tbody id="myField">
#foreach (var item in Model.Users)
{
<tr>
<td class="d-flex">
<div id="textValue"> #Html.DisplayFor(modelItem => item.Text) </div>
<input type="hidden" asp-for="Invitation.FkUser" value="#item.Value" />
<div class="ml-auto">
<input id="btnSave" type="submit" value="Invite" class="btn btn-success" name="submitBtn"/>
</div>
</td>
</tr>
++i;
}
</tbody>
</table>
</div>
</div>
</form>
</div>
</div>
</div>
Controller:
public IActionResult SendInvitation(User myUser, string eventId)
{
//do what you want
return View();
}
I have to develop a CRUD function to manage a DB. The button EDIT and DELETE open modal window and interact with the DB. What I cannot get is that the script works perfectly for EDIT but seems to be ignored for DELETE...what is wrong?
Those are my routes:
Route::get('/', 'DataController#overview');
Route::get('/myproject', 'ProjectsController#getForm');
Route::post('/myproject/create', 'ProjectsController#create');
Route::post('/myproject/update', 'ProjectsController#update');
Route::post('/myproject/delete', 'ProjectsController#delete');
Route::get('/upload','DataController#showform');
Route::post('/upload', 'DataController#read_xsl');
Route::get('/jobcontents', 'DataController#showscrape');
Route::post('/jobcontents', 'DataController#scrape');
This is my controller:
public function update(Request $request)
{
#$projectID = \DB::table('projects')->select('id')->get(),
try
{
//Find the project id in Project_model
#var_dump($request->toArray());
#var_dump($request->get('id'));
#exit;
$project = Project_model::findOrFail($request->get('id'));
//Set project object attributes
$project->name = $request->get('name');
$project->description = $request->get('description');
// Save/update project.
$project->save();
#return view('form_project')->with('project', $project);
return redirect()->back()->with('project', $project);
#return back();
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
public function delete(Request $request)
{
try
{
var_dump($request->toArray());
exit;
$project = Project_model::findOrFail($request->get('id'));
$project->delete();
return redirect()->back()->with('project', $project);
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
This is my blade:
//search and retrieve data from Modal
$(document).ready(function() {
$('#editModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var name = button.data('myname')
var description = button.data('mydesc')
var project_id = button.data('projectid')
var modal = $(this)
//put the values in modal <input>
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #description').val(description);
modal.find('.modal-body #project_id').val(project_id);
})
$('#deleteModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var projctid = button.data('projid')
var modal = $(this)
modal.find('.modal-body #projid').val(projctid);
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container">
<h3 class="jumbotron">Create here your project</h3>
<form method="post" id="projectform" class="w3-container w3-light-grey" action={{action( 'ProjectsController#create')}} enctype="multipart/form-data">
{{csrf_field()}}
<p>
<label>Project Name</label>
<input class="w3-input w3-border w3-round" name="name" type="text"></p>
<p>
<label>Project Description</label>
<input class="w3-input w3-border w3-round" name="description" type="text"></p>
<button type="submit" class="btn btn-primary" style="margin-top:10px">Create Project</button>
</form>
</div>
<div class="container-fluid">
<h3 class="jumbotron">Your Projects</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
<th>created_at </th>
<th>updated_at </th>
</tr>
</thead>
<tbody>
#if(isset($project_data)) #foreach($project_data as $project)
<tr>
<td> {{$project->id}} </td>
<td> {{$project->name}} </td>
<td> {{$project->description}} </td>
<td> {{$project->created_at}} </td>
<td> {{$project->updated_at}} </td>
<td>
<button type="button" class="btn btn-warning btn-detail open-modal" data-projectid="{{$project->id}}" data-myname="{{$project->name}}" data-mydesc="{{$project->description}}" data-toggle="modal" data-target="#editModal">Edit</button>
<button type="button" class="btn btn-danger btn-delete open-modal" data-projid="{{$project->id}}" data-toggle="modal" data-target="#deleteModal">Delete</button>
<button class="btn btn-info">See Jobs</button>
</td>
</tr>
#endforeach #endif
</tbody>
</table>
</div>
</div>
<!-- Modal (Pop up when edit button clicked) -->
<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="editModalTitle">Edit your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#update')}} id="frmSave" name="frmSave" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="project_id">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Project Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description" placeholder="" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmSave" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal (Pop up when delete button clicked) -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="deleteModalTitle">Delete your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#delete')}} id="frmDel" name="frmDel" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="projid">
<p class="text-center">
Are you sure you want to delete this?
</p>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmDel" class="btn btn-primary" id="btn-delete" value="">Yes, delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, don't!</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
---EDIT---
These are the results when I run console.log(button) and console.log(projctid)
Hope this can help newbie like me in the future!
The problem was just related to Chrome CACHE REFRESH!!!
So be sure to clear cache (Shift+F5) and not only refresh the page when something does not work!
I'm trying post to my database,everything what i want i can get from my formcollection and my table but input hidden value.My main view is using #model List
Here is my code this my modal popup
#using (Html.BeginForm("update3", "UpdateInfo", FormMethod.Post))
{
<div class="modal fade" role="dialog" id="mymodal">
<form id="stok_formu">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button class="close" type="button" data-dismiss="modal">×</button>
</div>
<div class="modal-body" id="modal2">
<div class="row">
<label for="names" id="name" name="name"></label>
<input type="hidden" id="names" name="names" />
</div><br />
<div class="row">
<div class="col-md-3">
#Html.Label(" Clothes codes: ")
</div>
<div class="col-md-3">
<input type="number" class="input-sm" id="codes" name="codes" />
</div>
</div><br />
<div class="row">
<div class="col-md-3">
#Html.Label("New Price : ")
</div>
<div class="col-md-3">
<input type="number" class="input-sm" id="newprice" name="newprice" />
</div>
</div>
<input class="btn btn-success" id="change" type = "submit" name="change"/>
</div>
</div>
</div>
</form>
</div>
}
With this javascript code ,i can get my "name" from my table and put on my modal and my problem is begin is here,when i click button submit modal popup doesn't send hidden value to controller but ican get my value of "newprice"
function metot(x) {
namee = document.getElementById("tablo2").rows[0].cells.item(0).innerHTML;
document.getElementById("name").innerHTML = namee;
}
and table from my main view
<tbody id="tablo2">
#foreach(var oge in Model)
{
<tr onclick="metot(this)">
<td>#Html.Encode(oge.name)</td>
<td id="codes">#Html.Encode(oge.codes)</td>
<td id="price">#Html.Encode(oge.price)</td>
<td>
<button id="change" onclick="metot(this)" type="button" data-toggle="modal" data-target="#mymodal" class="btn btn-warning tab-content"><span>Change</span></button>
</td>
</tr>
}
</tbody>
You are setting the text of the label with id name, but you aren't setting the value of the hidden field with id names, hence it is not sent when you submit the form. <label> elements do not send data back to the server.
This should work (I assume the variable namee should actually be called urun_adi):
function metot(x) {
urun_adi = document.getElementById("tablo2").rows[0].cells.item(0).innerHTML;
document.getElementById("name").innerHTML = urun_adi;
document.getElementById("names").value = urun_adi;
}
I am working on a piece of code and since I dont have too much experience with jquery or javascript I need your help. I want to take the data from the row when button EditBtn is clicked and set those values to modal. I tried the code below but It was not working.
Below is my code
Table :
<table id="example" class="table table-bordered table-hover">
<thead>
<tr>
<th>Ödeme Türü</th>
<th>Ödeme Başlığı</th>
<th>İçerik</th>
<th>Son Ödeme Tarihi</th>
<th>Tutarı</th>
<th>Ödeme Durumu</th>
<th>Düzenle</th>
</tr>
</thead>
<tbody>
#foreach (OdemeList item in Model)
{
<tr id="#item.Odeme.OdemeID">
<td>#item.Odeme.OdemeType</td>
<td>#item.Odeme.OdemeTitle</td>
<td>#item.Odeme.OdemeContent</td>
<td>#item.Odeme.SonOdemeTarih</td>
<td>#item.Odeme.OdemeTutar</td>
#if (#item.KullaniciOdeme.isPay == true)
{
<td>Odendi</td>
}
else
{
<td>Odenmedi</td>
<td>
<form>
<script src="https://checkout.stripe.com/checkout.js" class="stripe-button"
data-key="pk_test_6pRNASCoBOKtIshFeQd4XMUh"
data-amount="#item.Odeme.OdemeTutar"
data-name="#item.Odeme.OdemeTitle"
data-image="/Content/LoginCssJs/pay.png"
data-locale="auto">
</script>
</form>
</td>
#*<td>
<a data-toggle="modal" data-target=".bootstrapmodal3"><button class="btn btn-success">Öde</button></a>
</td>*#
}
<td>
<a data-toggle="modal" id="EditBtn" class="btn edit" data-target=".bootstrapmodal"><img src="#Url.Content("~/Content/Icons/edit.png")" alt="Düzenle" /></a>
</td>
<td>
<a data-toggle="modal" data-target=".bootstrapmodal2"><img src="#Url.Content("~/Content/Icons/Delete.png")" alt="Sil" /></a>
</td>
</tr>
}
</tbody>
</table>
My modal:
<div class="modal fade bootstrapmodal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button data-dismiss="modal" class="close"><span>×</span></button>
<div class="modal-title">
<h3>Ödeme Düzenle</h3>
</div>
</div>
<div class="modal-body">
<form>
<label>Ödeme Türü</label>
<select class="form-control" id="OdemeTuru">
<option>Aidat</option>
<option>Isınma</option>
<option>Bina Gideri</option>
</select><br />
<div class="form-group">
<label for="odemebasligi">Ödeme Başlığı</label>
<input type="text" class="form-control" id="odemebasligi" placeholder="OdemeTitle">
</div>
<div class="form-group">
<label for="comment">Ödeme içeriği</label>
<textarea class="form-control" rows="5" id="comment" placeholder="-OdemeContent"></textarea>
</div>
<div class="form-group">
<label class="sr-only" for="exampleInputAmount">Tutar</label>
<div class="input-group">
<div class="input-group-addon">TL</div>
<input type="text" class="form-control" id="exampleInputAmount" placeholder="OdemeTutar">
<div class="input-group-addon">.00</div>
</div>
</div>
<div class="form-group">
<label for="odemetarihi">Son Ödeme Tarihi</label>
<input type="text" class="form-control" id="odemetarihi" placeholder="SonOdemeTarih">
</div>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Kaydet</button>
<button class="btn btn-danger" data-dismiss="modal"> Vazgeç</button>
</div>
</div>
</div>
</div>
Script:
<script>
$('a.edit').on('click', function() {
var myModal = $('.bootstrapmodal');
//// now get the values from the table
//var OdemeTuru = $(this).closest('tr').find('td.OdemeType').html();
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
var OdemeIcerik = $(this).closest('tr').find('td.OdemeContent').html();
var OdemeTutar = $(this).closest('tr').find('td.SonOdemeTarih').html();
var SonOdemeTarihi = $(this).closest('tr').find('td.OdemeTutar').html();
//// and set them in the modal:
//$('#', myModal).val(OdemeTuru);
$('#odemebasligi', myModal).val(OdemeBaslik);
$('#comment', myModal).val(OdemeIcerik);
$('#exampleInputAmount', myModal).val(OdemeTutar);
$('#odemetarihi', myModal).val(SonOdemeTarihi);
// and finally show the modal
myModal.modal({ show: true });
return false;
});
</script>
In script you are targeting <td> class .find('td.OdemeTitle') and in table there are no class defined <td>#item.Odeme.OdemeTitle</td> what you only need is define class which you are targeting e.g
For
var OdemeBaslik = $(this).closest('tr').find('td.OdemeTitle').html();
HTML
<td class="OdemeTitle">#item.Odeme.OdemeTitle</td>
follow above example and set all <td> classes and you will be all set.
minimal fiddle example
I am using table where values are printed from database. Then I make selections. After that I want to process those values together with values from bootstrap modal which are required to fill. Once I get all values, I need to store them into database.
Table store values from database:
<table id="table" class="table table-bordered table-striped">
<thead>
<tr class="bg-red">
<th>Id</th>
<th>Material</th>
<th>Quality</th>
<th>Dimensions</th>
<th>Colors</th>
<th>Weight</th>
<th><center><i class="fa fa-shopping-cart"><center></th>
</tr>
</thead>
<tbody>
<?php while($r=$q->fetch()){ ?>
<tr>
<td class='data-id'><?='B-'. $r['Id']?> </td>
<td> <?=$r['Material']?> </td>
<td><?=$r['Quality']?></td>
<td><?=$r['Dimensions']?></td>
<td><?=$r['Colors']?></td>
<td><?=$r['Weight']?></td>
<td> <button class="addValues" name="code[]" value="<?='B-'. $r['Id']?>"><i class="fa fa-shopping-cart"></button></td>
</tr>
<?php } ?>
</tbody>
</table>
Then I am using script make row selection and print values to another div (This section works)
<script>
$(".addValues").click(function () {
$('#selection').show();
var $this = $(this),
myCol = $this.closest("td"),
myRow = myCol.closest("tr"),
targetArea = $("#selection");
var qte_input = (' <input type="text" name="quantity[]" placeholder="kg / m" size="10"/>');
targetArea.prepend($("td.data-id", myRow).text() + qte_input +"<hr />");
});
</script>
Output in div after row is selected (Multiple selections could be chosen)
B-15897 3000kg // B-15897 presents code 3000kg presents quantity.
B-4589 500m
Below those values I have submit button, which opens bootstrap modal.
<div class="col-xs-2">
<div class="box box-danger">
<h4>Selected: </h4><br/>
<div id="selection">
<!-- SELECTED VALUES -->
B-15897 3000kg
B-4589 500m
</div>
<button class="btn btn-block bg-red btn-sm" data-toggle="modal" data-target="#myModal">Send request</button>
</div>
</div>
Once I hit Send request it opens bootstrap modal:
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" href="repromaterijali-script.php">
<div class="modal-dialog" role="document">
<div class="modal-content">
<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">Offer request</h4>
</div>
<div class="modal-body">
* Company name
<input type"text" class="form-control" name="company" required><br/>
* Contact info
<input type"text" class="form-control" name="contact" required><br/>
* Adress
<input type"text" class="form-control" name="address" required><br/>
* Phone
<input type"text" class="form-control" name="tel"required><br/>
E-mail
<input type"text" class="form-control" name="email" ><br/>
Other
<textarea type"text" class="form-control" name="other" ></textarea><br/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" name="submit">Send</button>
</div>
</div>
</div>
</div>
I want to pick all values from bootstrap modal and from div where selected values are, process them and insert in database via php. code and quantity will be an array because multiple values could be selected.
Bootstrap modal and div where selected values are inside <form>. I am trying to get values by using script bellow but nothing happens:
<script type="text/javascript">
function get_values() {
var x = document.getElementById("quantity").value;
var y = document.getElementById("code").value;
var arr = {barcode:x};
$.ajax({ url: 'insert.php',
data: arr,
type: 'post',
success: function(output) {
document.getElementById("code").value = output;
}
});
}
</script>
I am looking for advice? Any kind of help is very appreciated.
Your modal isn't coded correctly on a couple of levels.
First, the input elements do not have an id assigned. Normally one would get the value via the id. In a similar way you did here:
var x = document.getElementById("quantity").value;
Also, while it has nothing to do with reading the values from the modal, from a Bootstrap perspective, your input form is not coded the way the Bootstrap CSS expects it to be coded.
Here an example from the Bootstrap site:
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
Notice each input is wrapped in a form-group. If you use this layout, you'll not need to use the <br> tag.