We Keep Coding

HTML required attribute not working with AJAX submission

HTML required attribute not working with AJAX submission
I have created a model Form and set its input field to require attribute but its not working with ajax
<div class="modal fade hide" id="ajax-book-model" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="ajaxBookModel">Add New Machine</h5>
<!-- <button type="reset" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button> -->
<button type="button" class="btn-close" data-dismiss="modal" aria-label="Close" onClick="window.location.reload();">
</div>
<div class="modal-body">
<form action="javascript:void(0)" id="addEditBookForm" name="addEditBookForm" class="form-horizontal" method="POST">
<input type="hidden" name="id" id="id">
<input type="hidden" name="user_id" id="user_id" value="{{ Auth::user()->id }}">
<div class="row">
<div class="col-sm-12 col-md-4">
<div class="form-group">
<label>Name</label>
<input type="text" id="machine_name" name="machine_name" class="form-control form-control-sm" placeholder="Enter Machine Name" required>
<span class="text-danger">{{ $errors->first('machine_name') }}</span>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="form-group">
<label>IOT Device ID</label>
<input type="text" id="iot_device_id" name="iot_device_id" class="form-control form-control-sm" placeholder="Enter IOT Device ID" required>
</div>
</div>
<div class="col-sm-12 col-md-4">
<div class="form-group">
<label>Local device ID</label>
<input type="text" id="local_device_id" name="local_device_id" class="form-control form-control-sm" placeholder="Enter Local Device ID" required>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-sm btn-gradient-danger mb-2" data-dismiss="modal" onClick="window.location.reload();">Close</button>
<button type="submit" id="btn-save" value="addNewBook" class="btn btn-sm btn-gradient-danger mb-2">Save</button>
</div>
</form>
</div>
</div>
</div>
and this is ajax code
i just want to run simpal html required field validation with ajax
$('body').on('click','#btn-save', function (event){
event.preventDefault();
var id = $("#id").val();
var user_id = $("#user_id").val();
var machine_name = $("#machine_name").val();
var iot_device_id = $("#iot_device_id").val();
var local_device_id = $("#local_device_id").val();
$("#btn-save").html('Please Wait...');
$("#btn-save"). attr("disabled", true);
// ajax
$.ajax({
type:"POST",
url: "{{ url('add-update-piezometer') }}",
data: {
id:id,
user_id:user_id,
machine_name:machine_name,
iot_device_id:iot_device_id,
local_device_id:local_device_id,
},
dataType: 'json',
success: function(res){
window.location.reload();
$("#btn-save").html('Submit');
$("#btn-save"). attr("disabled", false);
}
});
});
i just want to run required field validation with ajax i could not find any solution .

Try changing your btn click event to form submit event.
$('body').on('submit', '#addEditBookForm', function (event) {
event.preventDefault();
var id = $("#id").val();
var user_id = $("#user_id").val();
var machine_name = $("#machine_name").val();
var iot_device_id = $("#iot_device_id").val();
var local_device_id = $("#local_device_id").val();
$("#btn-save").html('Please Wait...');
$("#btn-save").attr("disabled", true);
// ajax
$.ajax({
type: "POST",
url: "{{ url('add-update-piezometer') }}",
data: {
id: id,
user_id: user_id,
machine_name: machine_name,
iot_device_id: iot_device_id,
local_device_id: local_device_id,
},
dataType: 'json',
success: function (res) {
window.location.reload();
$("#btn-save").html('Submit');
$("#btn-save").attr("disabled", false);
}
});
});

The following should help: change to a form confirmation event instead of a Click button event. And do not forget to write this code so that the page does not reload:
event.preventDefault();

Full Calendar prompt function change to popup modal

I have a problem with the full calendar function, is possible to change prompt function var title = prompt("Enter Event Title"); to pop up modal box, because I need to add few inputs in the modal box, for example, I need to add an input field for the color value. I don't want a prompt, because it just only limits 1-time input. I refer to this website to create a full calendar function: https://www.webslesson.info/2017/12/jquery-fullcalandar-integration-with-php-and-mysql.html
<script>
$(document).ready(function() {
var calendar = $('#calendar').fullCalendar({
editable:true,
header:{
left:'prev,next today',
center:'title',
right:'month,agendaWeek,agendaDay'
},
events: 'load.php',
selectable:true,
selectHelper:true,
select: function(start, end, allDay)
{
var title = prompt("Enter Event Title");
if(title)
{
var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
$.ajax({
url:"insert.php",
type:"POST",
data:{
title:title,
start:start,
end:end},
success:function()
{
calendar.fullCalendar('refetchEvents');
alert("Added Successfully");
}
})
}
},
}
</script>
Actually, I want the expected result like below the picture:
Hope someone can guide me on how to solve it. Thanks.
POPUP MODAL EXAMPLE
<div id="createEventModal" class="modal fade" 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">Add Event</h4>
</div>
<div class="modal-body">
<div class="control-group">
<label class="control-label" for="inputPatient">Event:</label>
<div class="field desc">
<input class="form-control" id="title" name="title" placeholder="Event" type="text" value="">
</div>
</div>
<input type="hidden" id="startTime"/>
<input type="hidden" id="endTime"/>
<div class="control-group">
<label class="control-label" for="when">When:</label>
<div class="controls controls-row" id="when" style="margin-top:5px;">
</div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button type="submit" class="btn btn-primary" id="submitButton">Save</button>
</div>
</div>
</div>
</div>

Modal window not getting opened Coding - jquery and php got some issue

My modal window is not getting opened. It seems there is an issue with my php.action action - or within ajax call.
Please can someone have a look?
My javascript - alert shows the record id.
$(document).ready(function(){
// Fetch single data
$(document).on("click","#editId",function(e){
e.preventDefault();
//alert("you click edit button");
var action ='FetchSingle';
var editId = $(this).attr('data-editId');
alert("you click edit button:" + editId);
$('#edit').modal('show'); //This works but not wihtin success:function(data)
$.ajax({
url:"action.php",
method:"POST",
data:{action:action,editId:editId},
dataType:"json",
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(err.Message);
},
success:function(data){
$('#name').val(data.name);
$("#designation").val(data.designation);
$("#sex").val(data.sex);
$('#edit').modal('show');
}
});
});
});});
Here is my action.php
if (isset($_POST['action'])) {
if ($_POST['action'] =='FetchSingle') {
$editId = $_POST['editId'];
$output = '';
$sql = "SELECT * FROM tbl_employee_info WHERE id='".$editId."'";
$data = $DBObj->select($sql);
foreach ($data as $value) {
$output['image'] = $value['image'];
$output['name'] = $value['name'];
$output['designation'] = $value['designation'];
$output['sex'] = $value['sex'];
$output['uploaded_hidden_image'] = '<img width="70px" height="70px" src="upload/'.$value['image'].'">';
}
echo json_encode($output);
} //end of isset post action
} //end of if isset post
my Modal window
<!-- Modal -->
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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">Edit Details</h4>
</div>
<div class="modal-body">
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="name" class="control-label">Name</label>
<input type="text" class="form-control" name="name" id="name">
</div>
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="Designation" class="control-label">Designation</label>
<input type="text" class="form-control" name="designation" id="designation">
</div>
<div class="form-group pmd-textfield pmd-textfield-floating-label">
<label for="sex" class="control-label">Select a sex</label>
<input type="text" class="form-control" name="sex" id="sex">
<select class="select-simple form-control pmd-select2" name="sex" id="sex">
<option></option>
<option value="1">Male</option>
<option value="2">Fmale</option>
<option value="3">Others</option>
</select>
<!-- end of display data here -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.Modal -->
Any suggestions or a way to debug the issue would be highly appreciated. The problems seems to be in my action.php script.

how to post modal information to a api using jquery,javascript,ajax

I have a modal, e.g the modal is in modal.html, the method i wrote in a javascript file modal.js. when I am trying to submit data through modal, it is not working properly. the code is below. please help me someone.
/modal.html
<div class="col-md-12 text-right">
<button type="button" data-toggle="modal" data-target="#myModal">Update User Information</button>
<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">Enter User Information</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" id="user_name" placeholder="User name">
</div>
<div class="form-group">
<input type="email" class="form-control" id="email_id" placeholder="Enter email">
</div>
<div class="form-group">
<input type="text" class="form-control" id="address" placeholder="Enter Address">
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" id="myFormSubmit">Submit</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
/modal.js
$(function() {
$('#myFormSubmit').click(function () {
$.post("/api/adduserInfo/v1",
{
user_name : $("#user_name").val(),
email : $("#email_id").val(),
address : $("#address").val()
});
});
});

You can use something like this (you will have to get the parametres via post on the server side):
<!-- FORM -->
<form id="idform">
<!-- FORM INPUTS -->
<input class="btn btn-large btn-primary" value="Submit" type="submit">
</form>
<script>
// Variable to hold request
var request;
$("#idform").submit(function(event) {
// Prevent default posting of form - put here to work in case of errors
event.preventDefault();
// Abort any pending request
if (request) {
request.abort();
}
var $form = $(this);
// Let's select and cache all the fields
var $inputs = $form.find("input, select, button, textarea");
// Serialize the data in the form
var serializedData = $form.serialize();
$.ajax({
url: '/api/adduserInfo/v1',
type: 'post',
data: serializedData,
beforeSend: function () {
$("#divtoaddresult").html("Processing, please wait...");
},
success: function (response) {
$("#divtoaddresult").html(response);
}
});
});
</script>

Modal Hide Not Working

The modal form submits, returns formSuccess, sends the email, returns the signup alert, but the modal does not hide. Any suggestions?
The modal html:
<div class="modal fade" id="signupModal" tabindex="-1" role="dialog" aria-labelledby="signupModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Provide a few details and we'll be in touch...</h4>
</div>
<div class="modal-body">
<form id="contactForm" role="form">
<input type="hidden" id="theme" name="theme" value="flatly"/>
<div class="form-group">
<label for="name">Name</label>
<input type="text" class="form-control" id="name" name="name" placeholder="Your name" required>
</div>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" name="email" placeholder="Your email address" required>
</div>
<div class="form-group">
<label for="message">Message</label>
<textarea id="message" class="form-control" rows="5" placeholder="Have a question or comment?" required></textarea>
</div>
</div>
<div class="modal-footer">
<button id="form-submit" type="submit" class="btn btn-success">Sign Up</button>
</div>
</form> <!-- add tag v_07 -->
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div>
The signup alerts html:
<div class="container form-message">
<div class="row">
<div id="signupSuccess" class="alert alert-success" style="display:none">
<p id="signupSuccessText">Thanks for signing up for preview access, we'll be in touch! In the meantime join us on Twitter, Facebook, and LinkedIn.</p>
</div>
<div id="signupError" class="alert alert-info" style="display:none">
<p id="signupErrorText">Well this is embarrassing. It looks like we're having trouble. While we fix this, we can be reached at info#timbercheck.net</p>
</div>
</div>
</div>
And here is the code from js file.
$("#contactForm").submit(function(event){
event.preventDefault();
submitForm();
});
function submitForm(){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
}
}
});
};
function formSuccess(){
$("#signupSuccess").show();
$("#signupModal").modal('hide'); // add v_07
};
function formError(){
$("#signupError").show();
$("#signupModal").modal('hide'); // add v_07
};

You should add data-dismiss="modal" instead on your button because you are anyway going to show another modal.
EDIT : Change type from submit to button
<button id="form-submit" type="button" class="btn btn-success" data-dismiss="modal">Sign Up</button>
And try this,
$("#form-submit").click(function(event){
var name = $("#name").val();
var email = $("#email").val();
var message = $("#message").val();
$.ajax({
type: "POST",
url: "php/process.php",
data: "name=" + name + "&email=" + email + "&message=" + message,
success : function(text){
if (text == "success"){
formSuccess();
} else {
formError();
}
}
});
};
function formSuccess(){
$("#signupSuccess").show();
$("#signupModal").modal('hide'); // add v_07
};
function formError(){
$("#signupError").show();
$("#signupModal").modal('hide'); // add v_07
};

Instead of..
$('#myModal').modal('hide')
This worked...
$('#myModal').hide();
$('.modal-backdrop').hide();
Source: https://stackoverflow.com/a/29560331/7069248
Could be related to version of Bootstrap

This solution works for me:
setTimeout(function(){
$('#close-modal').click();
$('#close-modal').click();
},200);