We Keep Coding

How to send ID of a row throught submit form / button?

I'm writing a code for the system administrator to be able to reset the users' passwords in their accounts in case they forget said password.
I'm currently having problems passing the target user's ID through Ajax to change said user's password, through debugging tool, the system returns an "undefined" response for "id:", although the "_token" and "password" fields were sent fine.
HTML code for the form
<form id="form-reset-password">
<div class="container my-2">
<div class="row">
<div class="col-md-12">
<div class="form-row">
<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
</div>
<div class="form-group">
<label>New Password</label>
<input type="text" class="form-control" id="reset-password" name="password" readonly>
</div>
<div class="form-group text-right mt-4">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success btn-confirmreset">Reset</button>
</div>
</div>
</div>
</div>
</form>
Javascript for generating the data-table where it shows the list of User accounts. On the side of the table, the admin can click a button to reset the password of said user.
$(document).ready(function() {
getRoles();
var accounts;
$('#account-management').addClass('active');
accounts = $("#table-accounts").DataTable({
ajax: {
url: "/users/get-all-users",
dataSrc: ''
},
responsive:true,
"order": [[ 7, "desc" ]],
columns: [
{ data: 'id'},
{ data: 'organization_name', defaultContent: 'n/a' },
{ data: 'first_name' },
{ data: 'last_name' },
{ data: 'email'},
{ data: 'student_number'},
{ data: 'role.name'},
{ data: 'created_at'},
{ data: null,
render: function ( data, type, row ) {
var html = "";
if (data.status == 1) {
html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'" checked> <label for="'+data.id+'"></label></span>';
} else {
html += '<span class="switch switch-sm"> <input type="checkbox" class="switch btn-change-status" id="'+data.id+'" data-id="'+data.id+'" data-status="'+data.status+'"> <label for="'+data.id+'"></label></span>';
}
html += "<button type='button' class='btn btn-primary btn-sm btn-edit-account mr-2' data-id='"+data.id+"' data-account='"+data.id+"'>Edit</button>";
html += "<button type='button' class='btn btn-secondary btn-sm btn-reset-password' data-id='"+data.id+"' data-account='"+data.id+"'><i class='fas fa-key'></i></button>";
return html;
}
},
],
columnDefs: [
{ className: "hidden", "targets": [0]},
{ "orderable": false, "targets": 7 }
]
});
Javascript for the random password generator and reset password
function resetPassword() {
$.ajax({
type: 'GET',
url: '/user/get-new-password',
processData: false,
success: function(data) {
$('#reset-password').val(data.password);
}
});
}
$(document).on('click', '.btn-reset-password', function() {
$('#reset-password-modal').modal('show');
resetPassword();
});
$(document).on('submit', '#form-reset-password', function() {
var confirm_alert = confirm("Are you sure you want to reset this account's password?");
if (confirm_alert == true) {
// var id = $(this).attr('data-id');
var id = $('.btn-confirmreset').attr('data-id');
$.ajax({
url: "/auth/reset-password",
type: "POST",
data: $(this).serialize()+"&id="+id,
success: function(data) {
if (data.success === true) {
alert("Password successfully reset!");
location.reload();
}
else {
alert("Something went wrong");
}
}
});
return false;
}
});
Thank you for your help!

<form id="form-reset-password">
<div class="container my-2">
<div class="row">
<div class="col-md-12">
<div class="form-row">
<input type="hidden" id="token" name="_token" value="{{csrf_token()}}">
<input type="hidden" id="user_id" name="user_id" value=""> // initiate the hidden input here
</div>
<div class="form-group">
<label>New Password</label>
<input type="text" class="form-control" id="reset-password" name="password" readonly>
</div>
<div class="form-group text-right mt-4">
<button type="button" class="btn btn-dark" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success btn-confirmreset">Reset</button>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
$(document).on('click', '.btn-reset-password', function() {
var user_id_value = $(this).attr('data-id'); // Get the user id from attr
$('#user_id').val(user_id_value); // Assign the user id to hidden field.
$('#reset-password-modal').modal('show');
resetPassword();
});
$(document).on('submit', '#form-reset-password', function() {
var confirm_alert = confirm("Are you sure you want to reset this account's password?");
if (confirm_alert == true) {
// var id = $(this).attr('data-id');
//var id = $('.btn-confirmreset').attr('data-id'); // Remove this, it won't work , because this button doesn't contain the data-id
var id = $('#user_id').val(user_id_value); // You can get the value from hidden field
$.ajax({
url: "/auth/reset-password",
type: "POST",
data: $(this).serialize()+"&id="+id,
success: function(data) {
if (data.success === true) {
alert("Password successfully reset!");
location.reload();
}
else {
alert("Something went wrong");
}
}
});
return false;
}
});
</script>
Please refer the above code, You can pass the user id while modal pop up call and set that id to hidden value. then you can access that id from the hidden input. when you submit "form-reset-password" form.
Please look at comments on the above code

Maybe the attr() function is looking for native HTML attribute. So use the following snippet will help.
var id = $('.btn-confirmreset').data('id');

How can i store at a time 3 value same textbox?

<script type="text/javascript">
document.getElementById("subcategory").addEventListener("change", function() {
console.log(this.value);
});
$(function(){
$('.categoryList').click(function(){
console.log($(this).attr("name"));
var cat_id = event.target.value;
var url = "http://localhost:8000/api/getSubcategory/"+cat_id;
$.ajax({
type: "GET",
url: url,
dataType: "JSON",
success: function(res)
{
var html = "";
$.each(res, function (key, value) {
html += "<li class="+'subcategorys'+" value="+key+" name="+value+">"+value+" </li>";
});
$('#subcategory').html($(html).addClass('subcategoryList'));
$('.subcategorys').on('click', function(event) {
console.log($(this).attr("name"));
var subcat_id =event.target.value;
console.log(subcat_id);
});
}
});
});
});
$(document).ready(function() {
$('#subcategory').on('click', function(event) {
var subcat_id =event.target.value;
console.log(subcat_id);
var url = "/api/getSubcategorytwo/"+subcat_id;
$.ajax({
type: "GET",
url: url,
dataType: "JSON",
success: function(res)
{
var html = "";
$.each(res, function (key, value) {
html += "<li value="+key+">"+value+"</option></li>";
});
$("#subcategorytwo").html(html);
}
});
});
$('#subcategorytwo').on('click', function(event) {
var opt_subcat_two =event.target.value;
var opt = $(event.target).text();
console.log(opt,opt_subcat_two);
$( "#fetchvalue" ).replaceWith("<input type='text' class='form-control' name='subcategorytwo' value="+opt_subcat_two+" id='fetchvalue' data-toggle='modal' data-target='#myModal'> "+opt+"</input>");
$('#myModal').modal('hide');
$('.modal-backdrop').remove();
});
});
</script>
<input type="text" class="form-control" name="subcategorytwo" id="fetchvalue" data-toggle="modal" data-target="#myModal" ></input>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog modal-lg" >
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<a type="button" class="close" data-dismiss="modal" aria-hidden="true">×</a>
</div>
<div class="modal-body">
<div class="row">
<table class="table table-striped">
<thead>
</thead>
<tbody class="table">
<tr>
<td style="background-color: green">
<div class="col-md-7" >
#foreach($categories as $category)
<option class="categoryList" name="{{$category->category}}" value="{{$category->id}}">{{$category->category}}</option>
#endforeach
</div>
</td>
<td>
<div class="col-md-7">
<ul style="list-style: none" id="subcategory"></ul>
</div>
</td>
<td>
<div class="col-md-7">
<ul style="list-style: none" name="subcategorytwo" id="subcategorytwo" ></ul>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
Here is javascript code and modal code...I have total 4 table...
category subcategory
subcategory
subcategorytwo
post table
all are connected to a foreign key
Post table structure
When try to save category value, subcategory value, subcategorytwo value error is
How can I store 3 value at a time different place in db
Modal show like this
Modal like this

MySQL is most likely in STRICT mode try to
change the column to allow null:
ALTER TABLE `posts` CHANGE `subcategory2` `subcategory2` varchar NULL
Or try running
SET GLOBAL sql_mode='' or

jQuery autocomplete() submits form, but no values have been sent

I have a page with one with one link "COUNTRY", by hitting this link, under it appear some other links, which are group of countries. There is also one of the links called "Individual", by hitting that link appears one autocomplete field, where the user can start typing and choose one country.
I want by choosing the country to change some of the hidden fields values and than to submit the form.
The form submission works, but unfortunately there are no POST fields sent.
Here is the HTML & JS code:
<form method="POST" action="" accept-charset="UTF-8" id="news_search_form">
<input name="_token" type="hidden" value="tAB6ZU6sNafRUNBLiPyhiuCbEDQVGD4waxNbT3Yk">
<div class="row threelinks">
<div class="col-xs-12 col-sm-12 col-md-3">
<a href="javascript:;" class="btn_filter_category" data-href="country">
<div class="links_new link_hover">COUNTRY</div>
</a>
<input type="hidden" id="select_country" name="select_country" value="214">
<input type="hidden" id="filter_country" name="filter_country" value="0">
</div>
</div>
<div class="row " style="margin-top: 5px; display: none;" id="country_filters">
<div class="col-md-12">
<div class="owl-carousel col-md-12">
<div class="item">
<div class="top_sub_link">
Top 4
</div>
</div>
<div class="item">
<div class="top_sub_link">
EU
</div>
</div>
<div class="item">
<div class="top_sub_link">
Top 8
</div>
</div>
<div class="item">
<div class="top_sub_link">
Non EU
</div>
</div>
<div class="item">
<div class="top_sub_link">
Individual <i class="fa fa-pencil"></i>
<input type="text" class="form-control input-lg" id="individual_country" name="individual_country" style="font-size: 11px; text-align: center; display: none;"/>
<div id="no-result" style="display: none;">No results found</div>
</div>
</div>
<div class="item">
<div class="top_sub_link">
Reset
</div>
</div>
<div class="owl-nav"></div>
</div>
</div>
</div>
</form>
<script>
var filters = ['country'];
$(document).ready(function() {
$('a.btn_filter_category').on('click', function() {
var filter = $(this).attr('data-href');
show_filter(filter + '_filters');
unselect_filters();
$(this).find('.links_new.link_hover').removeClass('link_hover').addClass('link_hover_selected');
});
$(".filter_link").on('click', function() {
var filter = $(this).attr('data-href');
var value = $(this).attr('data-value');
$('#filter_' + filter).val(value);
$('#select_' + filter).val(0);
$("#news_search_form").submit();
});
$(".individual_link").on('click', function() {
var filter = $(this).attr('data-href');
$(this).remove();
$('#individual_' + filter).show();
});
});
$(function () {
var filter = 'country';
var url = "{{ url('country/search/'.$lang) }}";
$("#individual_" + filter).autocomplete({
source: function(request, response) {
$.ajax({
url: url,
dataType: "json",
type: "GET",
data: {
name: request.term
},
success: function(data){
response( $.map( data, function( item ) {
// alert(item.label);
return {
label: item.name,
value: item.value // EDIT
}
}));
}
})
},
select: function(event, ui) {
$('#filter_' + filter).val(0);
$('#select_' + filter).val(ui.item.value);
$("#news_search_form").submit();
}
});
});
function unselect_filters() {
$('div.links_new').each(function(i, obj) {
$(this).removeClass('link_hover').removeClass('link_hover_selected').addClass('link_hover');
});
}
function show_filter(selected_class) {
var arrayLength = filters.length;
for (var i = 0; i < arrayLength; i++) {
var class_name = filters[i] + '_filters';
if(selected_class != class_name) $('#'+ class_name).hide();
else $('#'+ class_name).show();
}
}
function reset_filter(filter) {
$('#filter_' + filter).val(0);
$('#select_' + filter).val(0);
$("#news_search_form").submit();
}
</script>

i found the solution.
The autocomplete submit form is working fine. Unfortunately there was some redirect after the submit, which was causing and empty POST array.

I'm trying to upload a file using node and ajax but the ajax call isn't working?

I'm facing error on Upload xml and upload csv am a rookie so please can you provide me a elaborate answer
I've tried debugging the code on clicking upload button till upload function is working fine on jumping to uploadxml() function the data is not sent.
My HTML code
<div class="file-upload">
<form id="file-upload-form">
<div class="upload">
<div class="col-lg-6">
<div class="input-group" id="one">
<input type="text" class="form-control" id="t1" placeholder="Select an xml file.." >
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="xmlbtn">Browse</button>
</span>
</div>
<input type="file" accept=".xml" class="hidden" id="xmlPicker" name="xmlFile"/>
</div>
<div class="col-lg-6">
<div class="input-group" id="two">
<input type="text" class="form-control" id="t2" placeholder="Select an csv file.." >
<span class="input-group-btn">
<button class="btn btn-default" type="button" id="csvbtn">Browse</button>
</span>
</div>
<input type="file" class="hidden" accept=".csv" id="csvPicker" name="csvFile"/>
</div>
</div>
<div class="uploadfooter">
<button class="btn btn-default center" type="button" id="upload">Upload</button>
</div>
</form>
</div>
My Js
$(document).ready(function () {
$(".ts-sidebar-menu li a").each(function () {
if ($(this).next().length > 0) {
$(this).addClass("parent");
};
})
var menux = $('.ts-sidebar-menu li a.parent');
$('<div class="more"><i class="fa fa-angle-down"></i></div>').insertBefore(menux);
$('.more').click(function () {
$(this).parent('li').toggleClass('open');
});
$('.parent').click(function (e) {
e.preventDefault();
$(this).parent('li').toggleClass('open');
});
$('.menu-btn').click(function () {
$('nav.ts-sidebar').toggleClass('menu-open');
});
$('#zctb').DataTable();
$("#input-43").fileinput({
showPreview: false,
allowedFileExtensions: ["zip", "rar", "gz", "tgz"],
elErrorContainer: "#errorBlock43"
// you can configure `msgErrorClass` and `msgInvalidFileExtension` as well
});
$("#xmlbtn").bind("click", function(){
$("#xmlPicker").trigger("click");
});
$("#xmlPicker").bind("change", function(e){
$("#t1").val($("#xmlPicker")[0].files[0].name);
})
$("#csvbtn").bind("click", function () {
$("#csvPicker").trigger("click");
});
$("#csvPicker").bind("change", function (e) {
$("#t2").val($("#csvPicker")[0].files[0].name)
})
$("#upload").on("click",function () {
var firstfile = $("#t1").val();
var secondfile = $("#t2").val();
if(!firstfile || firstfile != null){
updateXml();
}
if(!secondfile || secondfile != null){
updatecsv();
}
})
function updateXml(){
var form = $("#file-upload-form").val()
var data = new FormData(form);
$.ajax({
url: "/update",
data: data,
type: "put",
contentType: false,
processData: false,
cache: false,
success: function (response) {
console.log(response);
}
})
}
function updatecsv(){
var form = $("#file-upload-form").val()
var data = new FormData(form);
$.ajax({
url: "/update",
data: data,
type: "put",
contentType: false,
processData: false,
cache: false,
success: function (response) {
console.log(response);
}
})
}
});

This line here:
var form = $("#file-upload-form").val()
A form does not have a value, its inputs have one. FormData expects a form, so you need to give it a reference to it.
var form = $("#file-upload-form");
var data = new FormData(form[0]); //expects a DOM form

HTML ajax label not showing when the input box is insinde a modal

I have a modal this simple modal:
<div id="mod-quicksend" tabindex="-1" role="dialog" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
</div>
<div class="modal-body">
<div class="text-center">
<h4>Selecciona un correo electronico: </h4>
<div class="row">
<form id="modal-form-close" method="post">
<input type="text" hidden value="quicksendquote" name="type">
<input type="text" hidden value="{{ $quote->id }}" name="id">
<div class="form-horizontal">
<div class="col-sm-12 col-sm-offset-4">
<div class="input-group">
<select class="form-control" name="email[select]">
<option></option>
#foreach($quote->Customer->Contacts as $key)
<option value="{{ $key->email }}">{{$key->email}}</option>
#endforeach
</select>
</div>
</div>
<h2>ó</h2>
<h3>digita un correo electronico:</h3>
<div class="row">
<div class="form-horizontal">
<div class="col-sm-12 col-sm-offset-4">
<div class="input-group">
<input type="text" name="email[type]" class="form-control" id="getEmail" autocomplete="off" >
</div>
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Cerrar</button>
<button type="button" id="submit" data-dismiss="modal" class="btn btn-success">Aceptar</button>
</div>
</div><!-- /.modal-content-->
</div><!-- /.modal-dialog-->
</div><!-- /.modal-end-->
and this is the Js code:
$('#getEmail').autocomplete({
source: function (request, response) {
$.ajax({
url: '{{ URL::to('/ajax') }}',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'getEmail'
},
success: function (data) {
response($.map(data, function (item) {
var code = item.split("|");
return {
label: "this is a label",
value: code[0],
data: item
}
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function (event, ui) {
var names = ui.item.data.split("|");
$(this).val(names[0]);
}
});
My problem is that when start typing in the input box the label doesnt show inside the modal, I can see on firebug that the ajax request is successful and if I place the input box outside the modal the label displays fine, I even hard-coded "this is label" to test and still no dice.
Any ideas?
UPDATE:
I believe the label is showing below the modal box, see this example:
https://jsfiddle.net/5qewtgcr/ NOTE::::: You have to click run on jsfiddle for the label to show below the modal box, why? I dont know, maybe jsfiddle is having problems or my its just my browser.

Finally found the answer:
.ui-autocomplete
{
z-index: 99999; //Maximum and top of everything (not absolutely :| )
}
Got it from: JQuery UI autocomplete for content in bootstrap modal
jsfiddle: https://jsfiddle.net/5qewtgcr/2/

I have update your fiddle. Here is the updated fiddle , please check it https://jsfiddle.net/5qewtgcr/1/
I have add html class in autocomplete div tag : Here is jQuery code :
$('#getEmail').autocomplete({
source: function(request, response) {
$.ajax({
url: 'echo',
dataType: "json",
method: 'post',
data: {
name_startsWith: request.term,
type: 'getEmail'
},
success: function(data) {
response($.map(data, function(item) {
var code = item.split("|");
return $(document).find('.input-group-text').append("this is a label" +item + code[0]);
/*{
label: "this is a labelxysxysyxsyxsyxysxysxysyxsyxysxysyxsyxysxysyxsyxysyxysxysyxsyxysxysyxsyxy",
value: code[0],
data: item
}*/
}));
}
});
},
autoFocus: true,
minLength: 1,
select: function(event, ui) {
var names = ui.item.data.split("|");
$(this).val(names[0]);
}
});