I am working on laravel project, I have a modal form and user can add new fields which I added dynamically using jquery and it works well, but the problem is when I send the form values to the controller the values of the newly dynamic fields is not send or like they lost when the modal is closed after submit, any help?
this is the modal code:
<div class="modal fade" id="{{$task->id}}" tabindex="-1" role="">
<div class="modal-dialog modal-login modal-lg" role="document">
<div class="modal-content">
<div class="card card-signup card-plain">
<div class="modal-header">
<h5 class="modal-title card-title" id="exampleModalLabel">Edit Task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form >
<div class="form-row">
<div class="form-group col-md-12">
<input type="text" class="form-control" name="issue"
value="{{$task->issue}}">
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-6">
<select name="tag" id="tag" class="form-control" >
<option value="{{$task->tag}}" selected>{{$task->tag}}</option>
#if($task->tag=='CM')
<option value="PM">PM</option>
#else
<option value="CM">CM</option>
#endif
</select>
</div>
</div>
<div class="form-row pt-2">
<div class="form-group col-md-12">
<textarea class="form-control" name="root_cause"
placeholder="Root Cause"></textarea>
</div>
</div>
<div class="form-row pt-2">
<div class="col-md-8 form-group" id="container{{$task->id}}">
<select class="form-control" name="add_used_part[]" >
<option disabled selected>used spare parts</option>
#foreach($task->machine->part as $part)
<option value="{{$part->id}}"> {{$part->part_name}}
</option>
#endforeach
</select>
</div>
<div class="form-group col-md-4" id="container2{{$task->id}}">
<input type="text" class="form-control " id="quantity"
name="quantity[]" placeholder="Quantity">
</div>
Add another spare part
</div>
<div class="modal-footer justify-content-center">
<button type="button" class="btn btn-primary"
onclick="submitajax('{{$task->id}}') ; return
false;">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
this jquery function:
<script type="text/javascript">
function addField(a,b){
var parts = JSON.parse(a);
// Container <div> where dynamic content will be placed
var container1 = document.getElementById("container"+b);
var container2 = document.getElementById("container2"+b);
//Create and append select list
var selectList = document.createElement("select");
selectList.name="add_used_part[]";
container1.append(selectList);
//Create and append the options
for (var i = 0; i < parts.length; i++) {
var option = document.createElement("option");
option.value = parts[i].id;
option.text = parts[i].part_name;
selectList.append(option);
}
var input = document.createElement("input");
input.type = "text";
input.name = "q";
container2.append(input);
}
function submitajax(id){
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
var tag = $("#tag").val();
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
/* this alert only one value of the add_used_part and quantity arrays
alert (id+tag+' '+add_used_part+' '+quantity);
$.ajax({
type:'POST',
url:"{{ route('task.update',['id' => $task->id ] ) }}",
data:{tag:tag, add_used_part:add_used_part, quantity:quantity},
success:function(data){
alert(data.success);
}
});
}
I think the problem is in this fragment:
var add_used_part= $("[name='add_used_part[]']").val();
var quantity= $("[name='quantity[]']").val();
You can't read many values this way, maybe you can try something like this:
var add_used_part= [];
$.each( $("[name='add_used_part[]']"), function(){
add_used_part.push( $(this).val() )
})
var quantity= [];
$.each( $("[name='quantity[]']"), function(){
quantity.push( $(this).val() )
})
And then send these arrays via AJAX request.
P.S: Sorry, I saw the question date just now :)
Related
I am following this guide (https://softdevpractice.com/blog/asp-net-core-mvc-ajax-modals/) for my Modals, and got everything working except for the last part which closes the Modal when it saves without errors. Essentially what the article shows is to add an IsValid input tag that's hidden and stores the ModelState which would be used to determine whether or not it is a successful save and should close the modal.
// find IsValid input field and check it's value
// if it's valid then hide modal window
var isValid = newBody.find('[name="IsValid"]').val() == 'True';
if (isValid) {
placeholderElement.find('.modal').modal('hide');
}
Would love any input on this. My code is as follows:
View
<div id="AddStudyModal"></div>
// unrelated code here
<button type="button" class="btn btn-secondary" data-toggle="ajax-modal" data-bs-target="#add-study" data-url="#Url.Action("AddStudy", "App", new {id = Model.GUID})">Add</button>
Partial View
#model AddStudyViewModel
<div class="modal fade" id="add-study" tabindex="-1" role="dialog" aria-labelledby="addStudyLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="addStudyLabel">Add Study</h5>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form asp-controller="App" asp-action="AddStudy" method="post">
<input name="IsValid" type="hidden" value="#ViewData.ModelState.IsValid.ToString()"/>
#Html.HiddenFor(m => m.ParticipantGuid)
<div asp-validation-summary="ModelOnly"></div>
<div class="mb-3 form-group">
#* <label asp-for="Studies" class="form-label"></label> *#
<select asp-for="SelectedStudyGuid" asp-items="#ViewBag.Studies" class="form-control" autocomplete="off">
#* <select asp-for="SelectedStudyGuid" asp-items="#Model.Studies" class="form-control" autocomplete="off"> *#
<option value="">Select Study</option>
</select>
<span asp-validation-for="SelectedStudyGuid" class="text-danger"></span>
</div>
<div class="mb-3 form-group">
<label asp-for="StartDate" class="form-label"></label>
<input asp-for="StartDate" class="form-control" autocomplete="off"/>
<span asp-validation-for="StartDate" class="text-danger"></span>
</div>
<div class="mb-3 form-group">
<label asp-for="EndDate" class="form-label"></label>
<input asp-for="EndDate" class="form-control" autocomplete="off"/>
<span asp-validation-for="EndDate" class="text-danger"></span>
</div>
<div class="text-center">
</div>
<div class="text-center">#ViewBag.Message</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-save="modal">Save</button>
</div>
</div>
</div>
</div>
Site.Js
$(function (){
var AddStudyElement = $('#AddStudyModal');
$('button[data-toggle="ajax-modal"]').click(function(event){
var url = $(this).data('url');
$.get(url).done(function(data){
AddStudyElement.html(data);
AddStudyElement.find('.modal').modal('show');
})
})
AddStudyElement.on('click', '[data-save="modal"]', function(event){
event.preventDefault();
var form = $(this).parents('.modal').find('form');
var actionUrl = form.attr('action');
var sendData = form.serialize();
// $.post(actionUrl, sendData).done(function(data){
// AddStudyElement.find('.modal').modal('hide');
// })
$.post(actionUrl, sendData).done(function (data) {
var newBody = $('.modal-body', data);
AddStudyElement.find('.modal-body').replaceWith(newBody);
// find IsValid input field and check it's value
// if it's valid then hide modal window
var isValid = newBody.find('[name="IsValid"]').val() == 'True';
if (isValid) {
AddStudyElement.find('.modal').modal('hide');
}
});
});
});
Edit: After more examination it seems like my issue may be related to my RedirectToAction. I have posted my controller action below
[HttpPost]
public IActionResult Study(StudyViewModel model)
{
if (ModelState.IsValid)
{
var response= _repo.AddEditStudy(model.StudyGuid,model.SelectedStudyCatalogGuid, model.ParticipantGuid, model.StartDate, model.EndDate);
if (response.Success)
{
TempData["Message"] = response.Message;
return RedirectToAction("EditParticipant", new {id = model.ParticipantGuid});
}
}
model.Studies = GetStudyCatalog();
return PartialView("_StudyModal", model);
}
I've got a modal window that is submitting a form to a database via ajax and if an error occurs it will return a json response. This has been working well on modal windows with only one input field, but I have another modal window with 2 fields and the json response correctly returns error messages, for instance:
As you can see, both fields with the error are in the response. Like I said, my script works fine and will show the error for a form with only one text input, but I have two in this form (ignore the first select element, it is pre-filled via ajax). Here's my script that handles the ajax success and error responses:
$(document).ready(function () //function to process modal form via ajax
{
$('.modal-submit').on('submit', function(e){
e.preventDefault(); //prevent default form submit action
var data = $(this).serialize();
var type = $(this).find('input[name="type"]').val(); //get value of hidden input
var url = $(this).attr('action'); //get action from form
var modal = $(this).closest('.modal');
var modalInput = $(this).find('.form-row input'); //get input from form
var modalId = $(this).closest('.modal').attr('id');
$.ajax({
url:url,
method:'POST',
data:data,
success:function(response){
refreshData(newId = response.id, modalId); // set newId to the id of the newly inserted item, get modalId
modal.modal('hide'); //hide modal
$(modalInput).val(''); //clear input value
},
error:function(response){
$.each(response.responseJSON.error, function (i, error) {
console.log(data);
console.log(response.responseJSON.error);
$(modalInput).addClass('input-error');
$('#' + modalId + ' .backend-error').html(error[0]); //return error from backend
});
}
});
});
});
Here's the html for the modal window with multiple inputs:
<!-- Add New Model Modal -->
<div class="modal fade" id="modelModal" tabindex="-1" role="dialog" aria-labelledby="modelModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modelModalLabel">Add new asset model</h5>
<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" class="modal-submit" autocomplete="off" action="{{ action('AddAssetController#addDescriptor', ['type' => 'model']) }}">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<input type="hidden" name="type" value="model">
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="inputManufacturerModel">Manufacturer *</label>
<div class="input-group">
<select name="inputManufacturerModel" id="inputManufacturerModel" class="form-control" required="required" onclick="refreshData()">
<option value="0">Select manufacturer...</option>
</select>
</div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="inputModelNew">New model name *</label>
<div class="input-group">
<input type="text" name="inputModelNew" id="inputModelNew" class="form-control" placeholder="Add manufacturer model name" required="required">
</div>
<div class="backend-error"></div>
</div>
</div>
<div class="form-row">
<div class="col-md-12 mb-3">
<label for="inputModelNoNew">New model # *</label>
<div class="input-group">
<input type="text" name="inputModelNoNew" id="inputModelNoNew" class="form-control" placeholder="Add manufacturer model #" required="required">
</div>
<div class="backend-error"></div>
</div>
</div>
<div class="float-right">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- / Add New Model Modal -->
Result of error response:
Do I need to loop over the errors? How do I get the relevant error to show under the correct input field?
In ajax error don't use this
$(modalInput).addClass('input-error') because this will add the class to all modal's input and this will set the error to all modal's input. $('#' + modalId + ' .backend-error').html(error[0]);
Use input Id to set error like in your case $('#inputModelNew').parent('.input-group').siblings('.backend-error').addClass('input-error').html(error[0])
I have a form whose results(a list of links) are displayed in a table right below the form. However, I want to add a functionality that if the checkbox is checked, then all the links in the results should be opened on different tabs. Given below is my code:
<div class="card" id="emulstatform">
<div class="card-header">
<div class="card-title">
<div style="font-size: 25px"Filter</div>
</div>
</div>
<br>
<div class="card-body">
<div class="row">
<div class="col-xs-6">
<label name="start_date" class="control-label" style="width:35%;padding-left:15px">Start date</label>
<input type="date" id="start_date" style="color:black;width:100px" ></input>
</div>
<div class="col-xs-6">
<label name="end_date" class="control-label" style="width:35%">End Date(Default: Current Date)</label>
<input style="color:black;width:100px" id="end_date" type="date"></input>
</div>
</div>
<br>
<div class="row">
<div class="col-xs-6">
<label name="fruit_name" class="control-label" style="width:35%; padding-left:15px">Select a fruit</label>
<select class="js-example-placeholder-single1 js-example-basic-multiple form-control" id="fruit_name" placeholder="Select" style="width:210px" multiple="multiple">
</select>
</div>
<div class="col-xs-6">
<label name="fruit_test" class="control-label" style="width:35%">Select fruit_TEST</label>
<select class="js-example-placeholder-single2 js-example-basic-multiple form-control" style="width:210px" id="fruit_test" multiple="multiple">
</select>
</div>
</div>
<div class="row">
<div class="col-xs-6">
<label name="fruit_version" class="control-label" style="width:35%; padding-left:15px">Select fruit message</label>
<select class="js-example-placeholder-single3 js-example-basic-multiple form-control" style="width:210px" id="fruit_message1" multiple="multiple">
</select>
</div>
</div>
<div class="text-center">
<div class="checkbox">
<label><input type="checkbox" value="0" id="newTabs" ><em>Open on Different tabs</em></label>
</div>
<button class="btn btn-md btn-default" v-on:click="loadResults">
<i class="fa fa-arrow-circle-right"></i> Submit
</button>
<button class="btn btn-md btn-default" type="reset" name="searchreset" value="reset">
<i class="fa fa-arrow-circle-right"></i> Reset
</button>
</div>
</div>
</div>
Here is the AJAX through which I fetch my data from backend:
document.onload(getformdata())
function getformdata() {
var self = this;
$.ajax({
url : window.location.href,
type:'GET',
cache:false,
data:{type:'formdata'},
success:function(res){
if(res.message){
alert("Error getting data for the form")
}
ele1 = document.getElementById('fruit_name');
ele2 = document.getElementById('fruit_test');
ele4 = document.getElementById('fruit_message1');
for (var i = 0; i<res.options.fruit_name.length; i++){
var opt = document.createElement('option');
opt.value = res.options.fruit_name[i];
opt.innerHTML = res.options.fruit_name[i];
ele1.appendChild(opt);
};
for (var i = 0; i<res.options.fruit_test.length; i++){
var opt = document.createElement('option');
opt.value = res.options.fruit_test[i];
opt.innerHTML = res.options.fruit_test[i];
ele2.appendChild(opt);
}
var start_date = document.getElementById('start_date')
var end_date = document.getElementById('end_date')
start_date.innerHTML = res.options.start_date
end_date.innerHTML = res.options.end_date
},
error : function(err){
self.message = "Error getting data for the form";
}
});
}
The url of each link is of the form fruitdata/?id=1000 , where id is the only parameter that changes for a different fruit. How do I achieve this functionality of opening these links on different pages??
If I understood your question correctly you need something like below to open new tab:
<button onclick="myFunc()">open google in new tab</button>
<script>
function myFunc() {
window.open("https://www.google.com");
}
</script>
for opening multiple tab you can use this code but If the end-user is running Popup Blocking software (like that built into Chrome) then it may automatically stop those other windows/tabs from opening.
let urls = ["https://stackoverflow.com", "https://stackexchange.com/"];
for (var i = 0; i<2; i++){
window.open(urls[i]);
}
for find out when your check box is checked this code can help:
$("input[type=checkbox]").on('change',function(){
if($("input[type=checkbox]").is(':checked'))
alert("checked");
else{
alert("unchecked");
}
}
I hope this code help you.
I have a form I created for editing style on my html page. I pull the data into this form with ajax. And in my select box list, I want whatever data in the database is selected. Others will not disappear. The list will remain the same, but the data in the database will be selected. Somehow I couldn't. How can I do it?
read.php
case "magaza":
if(isset($_REQUEST["id"])){
$result = $mk_db->oku("magaza", " id='$id' ", "", "", "");
if(!empty($result)) {
$responseArray["marka_adi"] = $result[0]["marka_adi"];
$responseArray["resim"] = $result[0]["resim"];
$responseArray["durum"] = $result[0]["durum"];
$responseArray["sira"] = $result[0]["sira"];
echo json_encode($responseArray);
}
}
break;
$(document).ready(function() {
/********************** MODAL AÇMA **********************/
$(document).on('click', '.bn-edit', function() {
var id = this.id;
console.log("id:" + id + ",type:magaza");
$.ajax({
type: "GET",
url: "read.php?id=" + id + "&type=magaza",
success: function(response) {
$("#edit-modal").modal('show');
$.each(response, function(key, value) {
console.log("key:" + key + ",value:" + value);
})
$("#duz_sira").val(response.sira);
$("#duz_durum").val(response.durum);
$("#id").val(id);
}
});
});
});
<div class="modal fade duzenle" id="edit-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pl-3" id="exampleModalScrollableTitle">Markayı Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<form method="post" id="frmedit" enctype="multipart/form-data">
<div class="modal-body pre-scrollable">
<input type="hidden" name="id" id="id" class="form-control">
<div class="form-group form-float mt-3">
<div class="form-line">
<input type="text" class="form-control" id="duz_sira" name="duz_sira" required>
<label class="form-label">Sıra</label>
</div>
</div>
<select class="form-control" name="duz_durum" id="duz_durum" required>
<option>Durum Seçiniz</option>
<option value="aktif">Aktif</option>
<option value="pasif">Pasif</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-grey waves-effect iptal-butonu" data-dismiss="modal">İptal</button>
<input type="submit" id="update" class="btn bg-purple waves-effect kaydet-butonu" value="Kaydet">
</div>
</form>
</div>
</div>
</div>
My console request:
Please study the post I made - it is a [mcve] without any needless AJAX if the PHP works, it works and is not needed in the question
You need an ID on the select:
$("#duz_durum") uses the id. if you need name, you need $("[name=duz_durum]")
const response = {
"marka_adi": "Marka 2",
"resim": "",
"durum": "aktif",
"sira": "3"
}
// $("#edit-modal").modal('show');
$.each(response, function(key, value) {
console.log("key:" + key + ",value:" + value);
})
$("#duz_sira").val(response.sira);
$("#duz_durum").val(response.durum);
// $("#id").val(id);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade duzenle" id="edit-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pl-3" id="exampleModalScrollableTitle">Markayı Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<form method="post" id="frmedit" enctype="multipart/form-data">
<div class="modal-body pre-scrollable">
<input type="hidden" name="id" id="id" class="form-control">
<div class="form-group form-float mt-3">
<div class="form-line">
<input type="text" class="form-control" id="duz_sira" name="duz_sira" required>
<label class="form-label">Sıra</label>
</div>
</div>
<select class="form-control" name="duz_durum" id="duz_durum" required>
<option>Durum Seçiniz</option>
<option value="aktif">Aktif</option>
<option value="pasif">Pasif</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-grey waves-effect iptal-butonu" data-dismiss="modal">İptal</button>
<input type="submit" id="update" class="btn bg-purple waves-effect kaydet-butonu" value="Kaydet">
</div>
</form>
</div>
</div>
</div>
I have read the previous posts on this, but I can't seem to resolve my issue. I have a form that has static and dynamically created input fields. The static fields are being posted without issue. However, none of the dynamically created :inputs are coming across in the post request.
The form :
<div id="userModal" class="modal fade" style="display:none;">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-primary" style="float:right;margin-bottom:4px;">Delete User
</button>
<h4 class="modal-title">Edit User : <span id="user_webUserProfilePrimaryName"></span></h4>
</div>
<div class="modal-body">
<span id="user_maintain_messages" name="user_maintain_messages"></span>
<form id="editUserForm" name="editUserForm">
<input type="hidden" name="user_maintain_action" id="user_maintain_action" value="update">
<input type="hidden" name="action" id="action" value="sc_admin_updateCustomerFundInfo">
<input type="hidden" name="version" id="version" value="1.1" ;
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="user_webUserLevel">User Level</label>
</div>
<div class="col-md-6">
<select class="form-control" id="user_webUserLevel" name="user_webUserLevel">
<option value="anonymous">Pending</option>
<option value="customer">Customer</option>
<option value="administrator">Admin</option>
<option value="superuser">Super</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="user_webUserProfileStatus">User Status</label>
</div>
<div class="col-md-6">
<select class="form-control" name="user_webUserProfileStatus"
name="user_webUserProfileStatus">
<option value="InReview">In Review</option>
<option value="Approved">Approved</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="user_verified">User Verified</label>
</div>
<div class="col-md-6">
<select class="form-control" id="user_verified" name="user_verified">
<option value="N">Not Verified</option>
<option value="Y">Verified</option>
</select>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<div class="col-md-4">
<label for="webUserName">Send Login Confirmation</label>
</div>
<div class="col-md-6">
<span id="user_sendConfirmButton"></span>
</div>
</div>
</div>
<div class="row">
<table class="table" id="user_fundTable">
<thead>
<tr>
<th>Fund(s)</th>
<th>Account #</th>
<th>Administrator</th>
<th>Status</th>
</tr>
</thead>
<tfoot>
</tfoot>
<tbody>
</tbody>
</table>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" style="background:grey;float:left" data-dismiss="modal">
Cancel
</button>
<button type="button" class="btn btn-primary" onclick="saveUserMaintain()">Update (confirm changes)
</button>
</div>
</div>
</div>
</div>
It is populated with the following data :
{"Result":"OK","Records":[{"webUserProfilePrimaryName":"Johnny Appleseed","verified":"N","webUserProfileId":"24","webUserLevel":"anonymous","webUserProfileStatus":"InReview","webUserProfileReferenceAccount":"19, 30, 3126, 0090","fund":[{"fundName":"PCF","fundFullName":"Private Capital Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"},{"fundName":"CCIF","fundFullName":"Coast Capital Income Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"},{"fundName":"SIF2","fundFullName":"Secured Income Fund","fundAccess":"RO","fundAccNo":0,"latestStatement":"","fundManager":"","status":"Approved"}],"sendConfirm":"<button class='btn btn-primary' onclick='sendConfirmEmail(\"24\")'>Email Now<\/button>"}]}
I use this function to populate my form :
function showUserMaintain(webUserProfileId) {
jQuery.post(stonecrestajax.ajaxurl, {
action: "sc_admin_getCustomerFundInfo",
webUserProfileId: webUserProfileId,
version: "1.1"
}, function (data) {
console.log(data['Records'][0]['webUserProfilePrimaryName']);
jQuery("#user_webUserProfilePrimaryName").html(data['Records'][0]['webUserProfilePrimaryName']);
jQuery("#user_webUserLevel").val(data['Records'][0]['webUserLevel']);
jQuery("#user_webUserProfileStatus").val(data['Records'][0]['webUserProfileStatus']);
jQuery("#user_verified").val(data['Records'][0]['verified']);
jQuery("#user_sendConfirmButton").html(data['Records'][0]['sendConfirm']);
jQuery('#user_fundTable tbody').empty();
jQuery.each(data['Records'][0]['fund'], function (fundIdx, fundValues) {
var fundStatusOptions = ["In Review", "New", "Approved"];
var combo = generateDropDownList(fundIdx, fundIdx, fundStatusOptions);
var row = '<tr><td>' + fundValues.fundName + '</td>';
row += '<td><input type="text" name="user_fundAccountNumber[]" id="user_fundAccountNumber_' + fundIdx + '" value="' + fundValues.fundAccNo + '"></td>';
row += '<td><input type="text" name="user_fundManagerName[]" id="user_fundManagerName_' + fundIdx + '" value="' + fundValues.fundManager + '"></td>';
row += '<td id="user_fundStatus_' + fundIdx + '" name="user_fundStatus_' + fundIdx + '"></td></tr>';
jQuery('#user_fundTable').append(row);
//jQuery("#user_fundStatus_" + fundIdx).append(combo);
//console.log(fundValues);
});
jQuery("#userModal").modal('show');
}, "json");
}
As you can see from the function I'm dynamically adding values to existing input fields and dynamically creating some input fields within a table that is within the form.
However, when I try to serialize (post) the form back to the server using this
function :
function saveUserMaintain() {
jQuery.ajax({
type: "POST",
url: url,
data: jQuery("#editUserForm").serialize(),
success: function (data) {
alert(data);
}
});
return false;
}
The only data I see coming across are the fields (inputs) I had statically defined, none of the "user_fundXXXXXX" fields are coming across in the post request.
I'm sure I'm just standing too far inside the box and can't see the obvious here, can anyone give me a hand ?