Bootstrap Modal query - javascript

I have used orders.append in my GET AJAX method to display the user details stored in API. In here I have used 2 buttons save and cancel respectively with class "saveEdit edit" to edit the details. When the edit button is hit a modal pop-up to display the form to edit. On hitting save the details ain't getting saved jus the page refreshes. Save goes with the cancel button. Can you help me out?
My Bootstrap modal:
<div class="modal fade" id="myModallp" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit</h4>
</div>
<div class="modal-body">
<!-- Form for editing details.-->
<form id="uploadimageformm">
<input type="text" placeholder="first name" id="first" maxlength="15" name="user[firstname]" /><br />
<input type="text" placeholder="last name" id="last" maxlength="15" name="user[lastname]" /><br />
<input type="text" maxlength="10" placeholder="contact no." id="contact" name="user[contact_number]" onkeypress="return isNumberKey(event)" /><br />
<input type="address" placeholder="address1" id="addr1" name="user[address1]"/><br />
<input type="address" placeholder="address2" id="addr2" name="user[address2]"/><br />
<input type="address" placeholder="street" id="strt" name="user[street]"/><br />
<input type="address" placeholder="street1" id="strt1" name="user[street1]"/><br />
<input type="address" placeholder="city" id="city" name="user[city]"/><br />
<input type="address" placeholder="state" id="statee" name="user[state]"/><br />
<input type="address" placeholder="country" id="cntry" name="user[country]" /><br />
<input type="email" placeholder="email" id="email" name="user[email]" /><br />
<input type="password" placeholder="password" id="paswrd" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" /><br />
<select name="user[gender]" id="gndr">
<option>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br />
<input type="file" name="user_photo" id="user_photo" /><br>
<button class="saveEdit edit" data-id=' + order.id + ' type="submit" onclick="">Save</button>
<button class="cancelEdit edit">Cncl</button>
</form>
<div id="ack"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
My GET method of Ajax:
$.ajax({
type:'GET',
url:'http://13.229.164.32/users.json',
success:function(orders){
orders = orders.sort(function(a, b){
return a.id-b.id
})
$.each(orders,function(id,order){
$orders.append('<tr><td>'+ order.id +
'</td><td>' + '<span class="noedit firstname">' + order.firstname + '</span><input value=' + order.firstname + ' name="firstname" class="edit firstname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit lastname">' + order.lastname+ '</span><input value=' + order.lastname + ' name="lastname" class="edit lastname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit contact_number">' + order.contact_number + '</span><input value=' + order.contact_number + ' name="contact_number" class="edit contact_number_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address1">' + order.address1 + '</span><input value=' + order.address1 + ' name="address1" class="edit address1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address2">' + order.address2 + '</span><input value=' + order.address2 + ' name="address2" class="edit address2_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street">' + order.street + '</span><input value=' + order.street + ' name="street" class="edit street_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street1">' + order.street1 + '</span><input value=' + order.street1 + ' name="street1" class="edit street1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit city">' + order.city + '</span><input value=' + order.city + ' name="city" class="edit city_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit state">' + order.state + '</span><input value=' + order.state + ' name="state" class="edit state_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit country">' + order.country + '</span><input value=' + order.country + ' name="country" class="edit country_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit email">' + order.email + '</span><input type="email" value=' + order.email + ' name="email" class="edit email_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit password">' + order.password + '</span><input type="password" value=' + order.password + ' name="password" class="edit password_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit gender">' + order.gender + '</span><input value=' + order.gender + ' name="gender" class="edit gender_'+order.id+'"/>' +
'</td><td>' + order.created_at +
'</td><td>' + order.updated_at +
'</td>' +
'<td><button class="remove" data-id=' + order.id + '>X</button></td>' +
'<td><button class="editOrder noedit" data-toggle="modal" data-target="#myModallp">Edit</button></td>' +
'<td><button class="saveEdit edit" data-id=' + order.id + '>Save</button></td>' +
'<td><button class="cancelEdit edit">Cncl</button>' +
'</td><td>' + '<input type="file"/ name="user_photo" id="user_photo_'+order.id+'" class="edit user_photo">' +
'<img src="http://13.229.164.32/users/user_photo?id='+order.id+'" class="noedit user_photo_' +
order.id + '" height="80" width="80" >' +
'</td></tr>');
});
},
error:function(){
alert('error in testing');
}
});
My edit jquery method:
$orders.delegate('.editOrder','click',function(){
var $tr = $(this).closest('tr');
$tr.addClass('edit');
})
My cancel jquery method:
$orders.delegate('.cancelEdit','click',function(){
var $tr = $(this).closest('tr').removeClass('edit');
})
And lastly my saveEdit method:
$orders.delegate('.saveEdit', 'click', function(){
var $tr = $(this).closest('tr');
var self = this;
var user_id = $(this).attr('data-id');
var formData = new FormData();
var totalFiles = document.getElementById("user_photo_"+user_id).files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("user_photo_"+user_id).files[i];
formData.append("user_photo", file);
}
alert(user_id);
console.log(formData);
formData.append("user[firstname]", $(".firstname_"+user_id).val());
formData.append("user[lastname]", $(".lastname_"+user_id).val());
formData.append("user[gender]", $(".gender_"+user_id).val());
formData.append("user[address1]", $(".address1_"+user_id).val());
formData.append("user[address2]", $(".address2_"+user_id).val());
formData.append("user[street]", $(".street_"+user_id).val());
formData.append("user[street1]", $(".street1_"+user_id).val());
formData.append("user[contact_number]", $(".contact_number_"+user_id).val());
formData.append("user[email]", $(".email_"+user_id).val());
formData.append("user[password]", $(".password_"+user_id).val());
formData.append("user[city]", $(".city_"+user_id).val());
formData.append("user[state]", $(".state_"+user_id).val());
formData.append("user[country]", $(".country_"+user_id).val());
console.log(formData);
$.ajax({
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// },
type: 'POST',
url: 'http://13.229.164.32/users/user_update.json?id=' + $(this).attr('data-id') ,
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(nData){
$tr.find('span.firstname').html(formData.firstname);
$tr.find('span.lastname').html(formData.lastname);
$tr.find('span.gender').html(formData.gender);
$tr.find('span.address1').html(formData.address1);
$tr.find('span.address2').html(formData.address2);
$tr.find('span.street').html(formData.street);
$tr.find('span.street1').html(formData.street1);
$tr.find('span.contact_number').html(formData.contact_number);
$tr.find('span.email').html(formData.email);
$tr.find('span.password').html(formData.password);
$tr.find('span.city').html(formData.city);
$tr.find('span.state').html(formData.state);
$tr.find('span.country').html(formData.country);
$tr.find('span.user_photo').html(formData.user_photo);
// addUser1(newUser);
// console.log(newUser);
$tr.removeClass('edit');
},
error:function(){
alert('error saving user');
}
});
});

Related

without click append 3 rows, then click 1 row per click

I want to open 3 row defult after addrow and remove row and apply remove defult 3 row using javascript
please share valuable idea sir
I have need example:-
$(document).ready(function (){
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
});

You can wrap the function in a for loop and edit the for loop limit according to your needs.
$("body").on('click', '.btn-add-more', function (e) {
e.preventDefault();
var rows = $(".jdr1").length;
var limit = 1;
// In the first click append 3 rows, then 1 row per click
if (rows < 3) limit = 3;
for (let i=0; i<limit; i++) {
var $sr = ($(".jdr1").length + 1);
var rowid = Math.random();
var $html = '<tr class="jdr1" id="' + rowid + '">' +
'<td><span class="btn btn-sm btn-default">' + $sr + '</span><input type="hidden" name="count[]" value="'+Math.floor((Math.random() * 10000) + 1)+'"></td>' +
'<td><input type="text" required="" class="form-control input-sm title" placeholder="Medicine" name="medicine[]"></td>' +
'<td><input type="text" name="medicine_qty[]" placeholder="Potency" class="form-control input-sm"></td>' +
'<td><input type="text" name="medicine_time[]" placeholder="Description" class="form-control input-sm"></td>' +
'<td><input type="text" name="remark[]" placeholder="Add/Note" class="form-control input-sm"></td>' + '<td><button class="btn btn-sm btn-warning btn-remove-detail-row"><i class="glyphicon glyphicon-remove">Remove</i></button> </td>'+
'</tr>';
$("#table-details").append($html);
}
})
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<table id="table-details"></table>
<button class="btn-add-more">Add Rows</button>
</html>

How to Display Recent message in MessageBox?

I'm using jquery and javascript to display messages, in backend I'm reversing list of messages but it displaying first message but I need recent sent and received message.
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base')[0].scrollHeight
});
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}
var str = '<div class="popup-box chat-popup chat-window" id="channel-'
+ channelId
+ '">'
+ ' <div class="col-xs-12 col-md-12">'
+ ' <div class="panel panel-default">'
+ ' <div class="top-bar">'
+ ' <div class="col-md-9 col-xs-9">'
+ '<img src="'
+ imageName
+ '" class="img-chat-box img-thumbnail" >'
+ '<span>'
+ name
+ '</span>'
+ '</div><div class="col-md-3 col-xs-3" style="text-align: right;">'
+ '<span id="minim_chat_window" class="glyphicon glyphicon-minus icon_minim"></span>'
+ ' <a href="javascript:close_popup(\''
+ channelId
+ '\')"><span class="glyphicon glyphicon-remove icon_close" data-id="chat_window_1"></span></a>'
+ ' </div></div>'
+ '<div class="panel-body msg_container_base">'
+ '<input type="hidden" name="friendId" id="friendId" value="'
+ toUserId
+ '"/>'
+ '<input type="hidden" name="channelId" id="channelId" value="'
+ channelId
+ '"/>'
+ '<input type="hidden" name="chatType" id="chatType" value="'
+ chatType
+ '"/>'
+ '</div>'
+ '<div class="panel-chat-footer">'
+ '<div class="input-group">'
+ '<input id="txtSendMessage" type="text"'
+ 'class="chat-text-box input-sm chat_input"'
+ ' placeholder="Write your message here..." required="required" /> <span'
+ ' class="input-group-btn">'
+ '<button class="btn btn-primary btn-sm" id="sentMessageBtn">Send</button>'
+ '</span>' + '</div>' + '</div>' + '</div>';
html = $.parseHTML(str), $("body").append(html);
Its displaying first message but I need recent message which is sent or received.chat image displaying first message.

try to use the latest method
function scrollToLatestChatMessage(chatContainer) {
console.log("Entry::scrollToLatestChatMessage in chat.js "+chatContainer);
$(".msg_container_base").animate({
scrollTop : $('.msg_container_base').prop("scrollHeight")
},1000);
console.log("Entry::scrollToLatestChatMessage in chat.js ");
}

API: Loading user details using J Query and AJAX without refreshing

I am new to Ajax and Jquery.
1)I am trying to add a new user using post method via a form which is in HTML Modal. On clicking Submit button the Modal isn't closing on its own and I have to hit refresh for seeing whether user got added or not. What changes should I do?
2)After checking whether the email and passwords match for a particular user during login how can I display the user details on successful login?
Here is my JS code:
$(document).ready(function(){
$("#retrieve").click(function(){
$('#retrieve').css("display","none");
// $('#uploadimageform').css("display","none");
$('#tabledata').css("display","block");
$('#signupbtn').css("display","block");
$('#loginbtn').css("display","none");
});
});
$(document).ready(function(){
$("#backbutton").click(function(){
$('#retrieve').css("display","block");
// $('#uploadimageform').css("display","block");
$('#tabledata').css("display","none");
$('#signupbtn').css("display","block");
$('#loginbtn').css("display","block");
});
});
// $(document).ready(function(){
// $("#addbutton").click(function(){
// $('#myModal').css("display","none");
// });
// });
$(function () {
var $orders = $('#orders');
var $fname = $('#first');
var $lname = $('#last');
var $contact = $('#contact');
var $addr1 = $('#addr1');
var $addr2 = $('#addr2');
var $strt = $('#strt');
var $strt1 = $('#strt1');
var $city = $('#city');
var $statee = $('#statee');
var $cntry = $('#cntry');
var $email = $('#email');
var $paswrd = $('#paswrd');
var $gndr = $('#gndr');
// Getting the user from backend. Method is "GET".
$.ajax({
type:'GET',
url:'http://13.229.164.32/users.json',
success:function(orders){
orders = orders.sort(function(a, b){
return a.id-b.id
})
$.each(orders,function(id,order){
$orders.append('<tr><td>'+ order.id +
'</td><td>' + '<span class="noedit firstname">' + order.firstname + '</span><input value=' + order.firstname + ' name="firstname" class="edit firstname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit lastname">' + order.lastname+ '</span><input value=' + order.lastname + ' name="lastname" class="edit lastname_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit contact_number">' + order.contact_number + '</span><input value=' + order.contact_number + ' name="contact_number" class="edit contact_number_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address1">' + order.address1 + '</span><input value=' + order.address1 + ' name="address1" class="edit address1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit address2">' + order.address2 + '</span><input value=' + order.address2 + ' name="address2" class="edit address2_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street">' + order.street + '</span><input value=' + order.street + ' name="street" class="edit street_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit street1">' + order.street1 + '</span><input value=' + order.street1 + ' name="street1" class="edit street1_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit city">' + order.city + '</span><input value=' + order.city + ' name="city" class="edit city_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit state">' + order.state + '</span><input value=' + order.state + ' name="state" class="edit state_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit country">' + order.country + '</span><input value=' + order.country + ' name="country" class="edit country_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit email">' + order.email + '</span><input type="email" value=' + order.email + ' name="email" class="edit email_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit password">' + order.password + '</span><input type="password" value=' + order.password + ' name="password" class="edit password_'+order.id+'"/>' +
'</td><td>' + '<span class="noedit gender">' + order.gender + '</span><input value=' + order.gender + ' name="gender" class="edit gender_'+order.id+'"/>' +
'</td><td>' + order.created_at +
'</td><td>' + order.updated_at +
'</td>' +
'<td><button class="remove" data-id=' + order.id + '>X</button></td>' +
'<td><button class="editOrder noedit">Edit</button></td>' +
'<td><button class="saveEdit edit" data-id=' + order.id + '>Save</button></td>' +
'<td><button class="cancelEdit edit">Cncl</button>' +
'</td><td>' + '<input type="file"/ name="user_photo" class="edit user_photo">' +
'<img src="http://13.229.164.32/users/user_photo?id='+order.id+'" class="noedit user_photo_' +
order.id + '" height="80" width="80" >' +
'</td></tr>');
});
},
error:function(){
alert('error in testing');
}
});
// Creating the user and method is "POST"
$('#addbutton').on('click',function(){
var myForm = document.getElementById("uploadimageform");
var data = new FormData(myForm);
$.ajax({
type: "POST",
data: data,
processData:false,
contentType:false,
dataType:"json",
url: 'http://13.229.164.32/users.json',
success: function(nData){
alert('user added');
}.bind(this),
error: function() {
alert('There is a problem with server in saving records');
}
});
});
$orders.delegate('.remove','click',function(){
var $tr = $(this).closest('tr');
var self = this;
var checkstr = confirm('are you sure you want to delete this?');
if(checkstr == true){
$.ajax({
type:'GET',
url: 'http://13.229.164.32/users/user_delete.json?id=' + $(this).attr('data-id') ,
success: function(){
//add delete pop up
$tr.fadeOut(300, function(){
$(this).remove();
});
}
});
}else
{
return false;
}
});
$orders.delegate('.editOrder','click',function(){
var $tr = $(this).closest('tr');
$tr.addClass('edit');
})
$orders.delegate('.cancelEdit','click',function(){
var $tr = $(this).closest('tr').removeClass('edit');
})
$orders.delegate('.saveEdit', 'click', function(){
var $tr = $(this).closest('tr');
var self = this;
var user_id = $(this).attr('data-id');
var formData = new FormData();
var totalFiles = document.getElementById("user_photo").files.length;
for (var i = 0; i < totalFiles; i++)
{
var file = document.getElementById("user_photo").files[i];
formData.append("user_photo", file);
}
alert(user_id);
console.log(formData);
formData.append("user[firstname]", $(".firstname_"+user_id).val());
formData.append("user[lastname]", $(".lastname_"+user_id).val());
formData.append("user[gender]", $(".gender_"+user_id).val());
formData.append("user[address1]", $(".address1_"+user_id).val());
formData.append("user[address2]", $(".address2_"+user_id).val());
formData.append("user[street]", $(".street_"+user_id).val());
formData.append("user[street1]", $(".street1_"+user_id).val());
formData.append("user[contact_number]", $(".contact_number_"+user_id).val());
formData.append("user[email]", $(".email_"+user_id).val());
formData.append("user[password]", $(".password_"+user_id).val());
formData.append("user[city]", $(".city_"+user_id).val());
formData.append("user[state]", $(".state_"+user_id).val());
formData.append("user[country]", $(".country_"+user_id).val());
console.log(formData);
$.ajax({
// headers: {
// 'Content-Type': 'application/x-www-form-urlencoded'
// },
type: 'POST',
url: 'http://13.229.164.32/users/user_update.json?id=' + $(this).attr('data-id') ,
data: formData,
dataType: 'json',
contentType: false,
processData: false,
success: function(nData){
$tr.find('span.firstname').html(formData.firstname);
$tr.find('span.lastname').html(formData.lastname);
$tr.find('span.gender').html(formData.gender);
$tr.find('span.address1').html(formData.address1);
$tr.find('span.address2').html(formData.address2);
$tr.find('span.street').html(formData.street);
$tr.find('span.street1').html(formData.street1);
$tr.find('span.contact_number').html(formData.contact_number);
$tr.find('span.email').html(formData.email);
$tr.find('span.password').html(formData.password);
$tr.find('span.city').html(formData.city);
$tr.find('span.state').html(formData.state);
$tr.find('span.country').html(formData.country);
$tr.find('span.user_photo').html(formData.user_photo);
// addUser1(newUser);
// console.log(newUser);
$tr.removeClass('edit');
},
error:function(){
alert('error saving user');
}
});
});
$('#checkbutton').on('click',function(){
var self = this;
var email = $('#emailer').val();
var txtpaswrd = $('#paswrder').val();
$.ajax({
type: "GET",
// data: data,
processData:false,
contentType:false,
dataType:"json",
url: 'http://13.229.164.32/users/user_check.json?email=' + email,
success: function(nData){
alert(nData.password);
alert(nData.email);
if(email == nData.email && txtpaswrd == nData.password ){
alert('user details matched ');
}else{
alert('Password Error');
}
}
});
});
});
// });
// });
Here is my CSS code:
.container{
margin:50px;
}
table,tr,th,td{
border: 1px solid grey;
padding: 5px;
text-align: center;
font-size: 10px;
}
tr .edit{
display: none;
}
tr.edit .edit{
display: initial;
}
tr.edit .noedit{
display: none;
}
.btn{
padding-bottom: 10px;
margin-top: 10px;
margin-left: 10px;
border: 1px solid black;
}
#loginhere{
margin-bottom: 20px;
}
p.sign{
margin-left: 50%;
}
select, input{
width:50%;
box-sizing:border-box;
}
input#user_photo{
width:50%;
box-sizing:border-box;
}
#signupbtn{
display: none;
}
Here is my HTML code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery.ajax()</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/2.3.0/mustache.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="api2.css">
</head>
<body>
<!-- For making a modal for pop up displaying the form for adding users.-->
<div class="container">
<!-- For Signup button-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" id="signupbtn" >Sign Up</button>
<!-- For Login button-->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModall" id="loginbtn" >Login</button><br>
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign Up</h4>
</div>
<div class="modal-body">
<!-- Form for adding user details.-->
<form id="uploadimageform" method="post" enctype="multipart/form-data">
<input type="text" placeholder="first name" id="first" maxlength="15" name="user[firstname]" /><br />
<input type="text" placeholder="last name" id="last" maxlength="15" name="user[lastname]" /><br />
<input type="number" maxlength="10" placeholder="contact no." id="contact" name="user[contact_number]" /><br />
<input type="address" placeholder="address1" id="addr1" name="user[address1]"/><br />
<input type="address" placeholder="address2" id="addr2" name="user[address2]"/><br />
<input type="address" placeholder="street" id="strt" name="user[street]"/><br />
<input type="address" placeholder="street1" id="strt1" name="user[street1]"/><br />
<input type="address" placeholder="city" id="city" name="user[city]"/><br />
<input type="address" placeholder="state" id="statee" name="user[state]"/><br />
<input type="address" placeholder="country" id="cntry" name="user[country]" /><br />
<input type="email" placeholder="email" id="email" name="user[email]" /><br />
<input type="password" placeholder="password" id="paswrd" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" /><br />
<!-- select for gender -->
<!-- <input type="text" placeholder="gender" id="gndr" name="user[gender]" required/><br>-->
<!-- <label id="gndr" name="user[gender]" required>Gender
<option value="Male">Male</option>
<option value="Female">Female</option>
<option value="Others">Other</option>
</label>
<label id="gndr" name="user[gender]" required>
<input type="radio" name="gender" value="Male" checked> Male<br>
<input type="radio" name="gender" value="Female"> Female<br>
<input type="radio" name="gender" value="Other"> Other
</label>
-
<input type="file" id="image" placeholder="Upload Image"/><br>-->
<select name="user[gender]" id="gndr">
<option>Gender</option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select><br />
<input type="file" name="user_photo" id="user_photo" /><br>
<div class="btn btn-primary" type="submit" id="addbutton" onclick="">Submit </div>
</form>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<!--add the form into a modal-->
<div class="modal fade" id="myModall" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Login</h4>
</div>
<div class="modal-body">
<form id="uploadimageformm">
<input type="email" placeholder="email" id="emailer" name="user[email]" />
<input type="password" placeholder="password" id="paswrder" pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?!.*\s).*$" name="user[password]" />
<div class="btn btn-primary" type="submit" id="checkbutton" onclick="">Login </div>
</form>
<div id="ack"></div>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
<div style="display:none;" id="tabledata">
<table>
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Contact No.</th>
<th>Address1</th>
<th>Address2</th>
<th>Street</th>
<th>Street1</th>
<th>City</th>
<th>State</th>
<th>Country</th>
<th>Email</th>
<th>Passowrd</th>
<th>Gender</th>
<th>Created At</th>
<th>Updated At</th>
<th>Remove Row</th>
<th>Edit</th>
<th>Save</th>
<th>Cancel</th>
<th>User Pic</th>
</tr>
</thead>
<tbody id="orders"></tbody>
</table>
</div>
<button class="btn btn-primary" id="retrieve" onclick="">Retrieve List</button>
<button class="btn btn-primary" id="backbutton" onclick="">Back</button>
</div>
<script type="text/javascript" src="ajaxfetching.js"></script>
</body>
</html>

1/ Use on of the jQuery ajax callback to handle your modal close once your ajax call is done.
And then you need to refresh your page content to show the user created. I think the part of your code displaying user is the part with the Ajax call to "url:'http://13.229.164.32/users.json'". You need to call this again after you closed the modal, to rebuild your Page Content with the new content.
$('#addbutton').on('click',function(){
var myForm = document.getElementById("uploadimageform");
var data = new FormData(myForm);
$.ajax({...}).complete(... // handle your modal close + content reload here)
See jQuery Ajax documentation to use the proper callback.
2/ If your Authentication endpoints send user informations on successful login you could directly use them. If not, you will have to create an endpoint to get a specific user. Or alternatively, you could find the user in your "users.json" if you don't have hand on the API.
To reach an optimal result there are a lot of other optimizations to perform, but this should do the job in the first time. You are using $(document).ready(...) twice, then $(function(){...}) which is also similar.

Like stated in the comment you will need to have a method to catch the submit handler, like prevent default. If you want to build your own button component that will fire the ajax method you may also do that.
Since your using jQuery, you may do the following;
$("#formId").submit(function (event) {
e.preventDefault();
// Run client validation,
$.ajax({...options})
.done(function(data){
// do something with the data, like closing the modal
})
.fail(function(jqXHR, textStatus){
// should the method fail, present error in the modal?
});
}
What you do in the button handler is up to you.
Jquery Ajax Documentation
You may also set up your own button, and button click event, but since your using a form, when a user presses the enter key they will submit the form, and you must prevent that event from happening, should you go that route.

How to use loop inside append in jQuery function

i would like to append a new html code, buy clicking a button. however in the append there are a looping to show the html code.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
$.each(day_left,function (i,val) {
$('<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>');
})+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>
actually i could append the html. But there is a bug in my $.each(day_left,function(i,val)){});
its only return the value of day_left which they are like sunday,monday,.... The code doesn't show the html code
My expected is it would be returned like this
but my code is only return :

Please make a function like this
function makeString(day_left,stack){
var str = '';
for(var i = 0; i <= day_left.length ; i++ ){
str += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+day_left[i]+'</label> </li>';
}
return str;
}
and change as following
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Started From Here
makeString(day_left,stack)+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
plnkr https://plnkr.co/edit/aBLj49Yv2g4EakeKjlqI?p=preview

you can do like that......
just use return function or make you iteration returnable.
<script>
var day_left = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
$(".add_schedule").click(function () {
if ($('.day-part').is(':empty')){
alert("You have limit schedule time!")
}else{
var stack = $(this).parent().find('#stack').val();
alert("form-schedule-"+stack);
$(this).before('<div class="form-schedule" id="form-schedule-'+stack+'">' +
'<div class="col-md-4">' +
'<label>Start Time</label><input type="time" placeholder="ex : 00:00" name="time['+stack+'][open_time]" class="open_time form-control" id="open_time'+stack+'">' +
'</div>' +
'<div class="col-md-4">' +
'<label>End Time</label><input type="time" placeholder="ex : 21:00" name="time['+stack+'][close_time]" class="close_time form-control" id="close_time"></div>' +
'<div class="col-md-4">' +
'<label>Pilih Hari</label> ' +
'<div class="dropdown dropdown-payment">' +
'<button class="btn btn-primary btn-sm dropdown-toggle" type="button" data-toggle="dropdown">Select Date <span class="caret"></span></button> ' +
'<div class="dropdown-menu"><div class="everyday-part">' +
'<li> <label> ' +
'<input type="checkbox" id="everyday" class="everyday_check_box form form-control" name="time['+stack+'][everyday]" value="7"> Everyday </label>' +
'</li>' +
'</div>' +
'<div class="day-part">'+
// The Problem is Solved
function(){var s='';
$.each(day_left,function (i,val) {
s += '<li><label><input type="checkbox" checked="checked" id="date_check_box" class="form form-control" name="time[' + stack + '][date][]" value="' + i + '">'+val+'</label> </li>';
});
return s;}
+'</div> </div> </div> </div></div><div class="clearfix"></div><br> ');
// End Of the Problem
stack = parseInt(stack)+1;
$(this).parent().find('#stack').val(stack);
}
});
</script>

How to create dynamic radio button using javascript

Hi my task is to dynamically add fields to a form when I click on a link.
I was successfull for text field, as well as file type, but not when I try to do this for inputs of type radio button.
Suppose I have created two rows and in one row I select gender, e.g. male, and in second row I want to select female then it will disappear the value of radio button from the first row. So I want to select different radio button values for different multiple rows.
Here is my code:
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'</br><strong>Item ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="item[]' + '" type="text" />'
+'<strong>quantity ' + counter + '</strong>'
+'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />'
+'<strong>rate ' + counter + '</strong>'
+'<input id="rate' + counter + '" name="rate[]' + '" type="text" />'
+'<strong>Amount ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="amount[]' + '" type="text" />'
+'<strong>img ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="image[]' + '" type="file" />'
+'<strong>Gender ' + counter + '</strong>'
+'<input id="male_' + counter + '" name="gender[]' + '" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender[]' + '" type="radio" value="female"/>female'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="custom.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
<div id="container">
<p id="add_field"><span>Add Field</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
Please let me know where I am wrong.

Only one radio button can be selected from a list of radio button which have the same name. i.e why you are not able to select radio button for each row. To solve this, make use of counter to give separate names to each row that you add, like
'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'
var counter = 0;
$(function(){
$('p#add_field').click(function(){
counter += 1;
$('#container').append(
'</br><strong>Item ' + counter + '</strong><br />'
+ '<input id="field_' + counter + '" name="item[]' + '" type="text" />'
+'<strong>quantity ' + counter + '</strong>'
+'<input class="qty" id="quantity' + counter + '" name="quantity[]' + '" type="text" />'
+'<strong>rate ' + counter + '</strong>'
+'<input id="rate' + counter + '" name="rate[]' + '" type="text" />'
+'<strong>Amount ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="amount[]' + '" type="text" />'
+'<strong>img ' + counter + '</strong>'
+'<input id="field_' + counter + '" name="image[]' + '" type="file" />'
+'<strong>Gender ' + counter + '</strong>'
+'<input id="male_' + counter + '" name="gender' + counter + '[]" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender' + counter + '[]" type="radio" value="female"/>female'
);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Add your Hobbies</h1>
<form method="post" action="save.php" enctype="multipart/form-data">
<div id="container">
<p id="add_field"><span>Add Field</span></p>
</div>
<input type="submit" name="submit_val" value="Submit" />
</form>
</body>
</html>

When you add more radio button your all radio button name is same, that's why you was select only one radio button.
So, Change your radio button like this :
+'<input id="male_' + counter + '" name="gender_'+counter+'[]" type="radio" value="male"/>Male'
+'<input id="female_' + counter + '" name="gender_'+counter+'[]" type="radio" value="female"/>female'

Categories

Resources