How to redirect url after form submit in codeigniter - codeigniter

The problem is to redirect URL for submit button in Codeigniter. I want to fetch data from the database by submitting a query in the form and can't do it as there is a redirection problem.
this is a xampp server.
WELCOMe
<!-- <form action="submit.php" > -->
<form action="submit.php" id="#form" name="#form" >
<div class="row">
<div class="col-md-3">
<div class="form-group">
<label for="s_id">Student ID:</label>
<input type="int" class="form-control" id="s_id" placeholder="Student ID" name="s_id" >
</div>
<div class="form-group">
<label for="s_name">Student Name:</label>
<input type="int" class="form-control" id="s_name" placeholder="Student Name" name="s_name" >
</div>
<div class="form-group">
<label for="training">Training:</label>
<input type="int" class="form-control" id="training" placeholder="Training" name="training" >
</div>
<div class="form-group">
<label for="phone">Phone:</label>
<input type="int" class="form-control" id="phone" placeholder="Phone" name="phone" >
</div>
</div>
</div>
<div class="row">
<div class="col-md-3">
<!-- <input type="submit" calss="form-control btn btn-success" value="Search" name="submitbtn"> -->
<input id='btn' name="submitbtn" type='submit' value='Submit'>
</div>
</div>
</form>
Expected: I want to fetch data from the database by submitting a query in the form and can't do it as there is a redirection problem.
Actual:
404 Page Not Found
The page you requested was not found.

I think you have to use AJAX
<script>
function submitForms(){
//getting values from your form
formData = $("#Form").serialize();
$.ajax({
type:"POST",
url:"<?php echo base_url(); ?>super/user/add",
data:formData ,
success:function(data) {
//response
}
}
});
event.preventDefault();
};
</script>`
In your form
<form method="post" id="Form" name="Form" action="javascript:submitForms();">

Related

Laravel - Display Image in Modal while editing

I am a beginner of laravel. I want to edit a record which contains image, but it just show the input type for file same as insert records, instead of displaying the image. I have no ideas how to make it. Any comments are appreciated. Thanks.
Modal
<div class="modal-body">
<form method="POST" id="memberCardForm" name="memberCardForm" class="form-horizontal" enctype="multipart/form-data">
#csrf
<input type="hidden" name="id" id="id">
<div class="form-group">
<label for="">Card Type</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="card_type" name="card_type" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="">Description</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="card_desc" name="card_desc" maxlength="50" required>
</div>
</div>
<div class="form-group">
<label for="">Entitlement</label>
<div class="col-sm-12">
<input type="text" class="form-control" id="card_entitlement" name="card_entitlement" maxlength="50">
</div>
</div>
<div class="form-group">
<label for="">Card Image</label>
<div class="col-sm-12">
<input type="file" class="form-control" id="image" name="image" required>
</div>
</div>
<div class="modal-footer">
Close
<button type="submit" id="saveBtn" class="btn btn-success">Save</button>
</div>
</form>
</div>
JS for Edit record
//Edit
$('body').on('click', '.editRecord', function() {
var id = $(this).data('id');
$.get("{{ url('membercards/edit') }}" + '/' + id, function(data) {
$('#exampleModalLabel').html("Edit Member Card");
$('#saveBtn').html('Save');
$('#exampleModal').modal('show');
$('#id').val(data.id);
$('#card_type').val(data.card_type);
$('#card_desc').val(data.card_desc);
$('#card_entitlement').val(data.card_entitlement);
$('#image').val(data.image);
})
});

Delete form data after data is displayed or submission of the form

I use the same form to view details of a record that is in the database and make form submission. But an error occurs when I view a log and then register other data. In this case the new registration is registered three times in the database. And the reason this happens is that the form data is cached when I view or register a record. All the solutions I searched on the internet didn't work for me.
This is my form
<div id="form" style="display: none;" class="col-md-12">
<div class="row">
<h5 class="title">Add</h5>
<div class="float-right" style="margin-left: 80%">
<button class="btn btn-secondary" id="close_form">Close</button>
</div>
</div>
<form method="post" id="sample_form" class="form-horizontal" enctype="multipart/form-data">
#csrf
<div class="row">
<div class="col-md-12">
<div class="card card-primary">
<div class="card-header">
<div class="card-tools">
<button type="button" class="btn btn-tool" data-card-widget="collapse" data-toggle="tooltip" title="Collapse">
<i class="fas fa-minus"></i></button>
</div>
</div>
<div class="card-body">
<fieldset disabled>
<div class="row">
<div class="form-group col-md-3">
<label for="inputCity">Código do documento:</label>
<input type="text" class="form-control" id="id_docs" name="id_docs">
</div>
<div class="form-group col-md-8">
<label for="inputCity">Status</label>
<input type="text" class="form-control" id="status" name="status">
</div>
</div>
</fieldset>
<div class="form-group">
<label>Assunto</label>
<textarea class="form-control" id="assunto" name="assunto" required></textarea>
</div>
<div class="form-group">
<label for="inputAddress2">Proveniencia</label>
<input type="text" class="form-control" id="prov" placeholder="Proveniencia" name="prov" required>
</div>
<div class="form-group col-md-4">
<label for="inputCity">Correspondência</label>
<input type="date" class="form-control" id="corre" name="corre">
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12" id="img_cad" style="margin-left: 10px;">
<span class="control-label col-md-4"><b class="span_doc">File:</b></span><br><br>
<input type="file" id="image" aria-describedby="inputGroupFileAddon01" name="image">
<span id="store_image"></span>
</div><br>
<br>
<input type="hidden" name="action" id="action" />
<input type="hidden" name="hidden_id" id="hidden_id" />
<input type="hidden" name="hidden_id_docs" id="hidden_id_docs" />
<button type="submit" name="action_button" id="action_button" class="btn btn-warning">Save</button>
</div>
</div>
</form>
</div>
This is the function to view the details of a record on the form
$(document).on('click', '.edit', function(){
var id_scr = $(this).attr('id_scr');
$('#div_table').hide();
$.ajax({
url:"/scr/"+id_scr+"/edit",
cache: false,
dataType:"json",
success:function(html){
$('#action_button').text("Edit Data");
$('#assunto').val(html.data.assunto);
$('#prov').val(html.data.prov);
$('#corre').val(html.data.corre);
$('#status').val(html.data.descricao);
$('#cod_cadastro').val(html.data.cod_cadastro);
$('#hidden_id').val(html.data.id);
$('#hidden_id_docs').val(html.data.id_docs);
$('#id_docs').val(html.data.id_docs);
$('.title').text("Details...");
$('.span_doc').text("Alter Doc");
$('#action').val("Edit");
$('#form').show();
}
})
});
To clear the form data after viewing a record, I created thisTo clear the form data after viewing a record, I created this function:
$(document).on('click', '#close_form', function(){
$('#sample_form')[0].reset();
$('#form').hide();
$('#div_table').show();
});
And finally, this is the function for registering a new record
$('#sample_form').on('submit', function(event){
event.preventDefault();
$('.progress').show();
if($('#action').val() == 'Add')
{
$.ajax({
url:"{{ route('scr.store') }}",
method:"POST",
data: new FormData(this),
contentType: false,
cache:false,
processData: false,
dataType:"json",
success:function(data)
{
alert('SUCCESSFULLY SAVED');
$('#sample_form')[0].reset();
$('#formModal').modal('hide');
location.reload(); //**This is the only way I found to clear the form after submitting the data**
}
})
}
})
You could try this method :
function submitForm() {
// Get the first form with the name
// Usually the form name is not repeated
// but duplicate names are possible in HTML
// Therefore to work around the issue, enforce the correct index
var frm = document.getElementsByName('contact-form')[0];
frm.submit(); // Submit the form
frm.reset(); // Reset all form data
return false; // Prevent page refresh
}
Or you could just call this method in your submit method

Partial view update on ajax POST redirecting to form's action method

I have created 2 partial views called _ftpsetupDetails.cshtml and _ftpsetupedit.cshtml
On load of the index page i am loading details partial view onto the below div.
now the problem is on post to the controller after save i am returning the ready only mode detail partial view. But instead of loading the partial view or hit done method of ajax it is redirecing the page to /FT/Edit url with detail partial view html on it. How to make sure the page is not redirected? what am i doing wrong?
//Once user clicks on Save button the below code will post the form data to controller
$(document).on("click", "#updateFTP", function () {
$.post("/Ftp/Edit", $('form').serialize())
.done(function (response) {
alert(response.responseText);
});
});
//On page load i am loading the partialview container witih read only view
LoadAjaxPage("/Ftp/DetailsByOrgId", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
//On edit button click i am loading the same div container with edit partial view
$(document).on("click", "#editFTP", function () {
// $("#createUserPartialViewContainer").load("/Users/Create?organizationId=" + orgId + "&organizationType=" + orgTypeId);
LoadAjaxPage("/Ftp/Edit", "organizationId=" + orgId + "&orgType=" + orgType, "#ftpPartialViewContainer");
});
<div id="ftpPartialViewContainer">
</div>
<!--Details HTML partial view code-->
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<div class="row">
<div class="col">
<label for="Name" class="control-label">Name</label>
<input asp-for="Name" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<label for="Password" class="control-label">Password</label>
<input asp-for="Password" class="form-control" readonly />
</div>
</div>
<div class="row">
<div class="col">
<input type="submit" value="Edit" class="btn btn-primary" id="editFTP" />
</div>
</div>
</div>
</div>
<!--Edit HTML partial view code-->
#model MyProject.Models.Ftp
#if (this.ViewContext.FormContext == null)
{
this.ViewContext.FormContext = new FormContext();
}
#using (Html.BeginForm("Edit", "ftp", FormMethod.Post,))
{
#Html.ValidationSummary(true, "Please fix the errors")
<div class="card shadow mb-3">
<div class="card-header">
<p class="text-primary m-0 font-weight-bold"> FTP Setup</p>
</div>
<div class="card-body">
<form asp-action="Edit">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<input type="hidden" asp-for="Pkid" />
<input type="hidden" asp-for="ConnectedTo" />
<input type="hidden" asp-for="ConnectedToType" />
<div class="row">
<div class="col">
<label asp-for="Name" class="control-label"></label>
<input asp-for="Name" class="form-control" />
<span asp-validation-for="Name" class="text-danger"></span>
</div>
</div>
<div class="row">
<div class="col">
<label asp-for="Password" class="control-label"></label>
<input asp-for="Password" class="form-control" />
<span asp-validation-for="Password" class="text-danger"></span>
</div>
</div>
<div class="form-group">
<input type="submit" value="Save" class="btn btn-primary " id="updateFTP" />
</div>
</form>
</div>
</div>
}

How to validate modal form on click with Ajax in Laravel

I have a modal form for login in Laravel project. When I enter false data and click to the button "Log in" the page refreshing and modal is closing. I can see errors only when I open modal again. It's not user-friendly. I want to validate modal with Ajax and show errors if something goes wrong without refreshing page
This is my modal
<form action="/login" method="post">
#csrf
<div class="sign-in-wrapper">
Login with Facebook
Login with Google
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
#error('email')
<strong style="color: red">{{$message}}</strong>
#enderror
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
#error('password')
<strong style="color: red">{{$message}}</strong>
#enderror
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<input id="remember-me" type="checkbox" name="check">
<label for="remember-me">Remember Me</label>
</div>
<div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center">
<button type="submit" class="btn_login">Log In</button>
</div>
<div class="text-center">
Don’t have an account? Sign up
</div>
<div id="forgot_pw">
<div class="form-group">
<label>Please confirm login email below</label>
<input type="email" class="form-control" name="email_forgot" id="email_forgot">
<i class="icon_mail_alt"></i>
</div>
<p>You will receive an email containing a link allowing you to reset your password to a new preferred
one.</p>
<div class="text-center"><input type="submit" value="Reset Password" class="btn_1"></div>
</div>
</div>
</form>
Try this
You need to some custom changes yourself in code.
$('#frmLogin').on('submit', function (event) {
event.preventDefault();
var formData = $(this).serialize();
$.ajax({
type: 'POST',
url: '/login',
data: formData,
success: function (res) {
console.log(res); // get resposnse from controller in json
if (res.emailError) {
$('.error-email').show().text(res.errorMsg);
} else {
$('.error-email').hide();
}
if (res.passwordError) {
$('.error-password').text(res.errorMsg);
} else {
$('.error-password').hide();
}
},
error: function (data) {
alert(data);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="frmLogin" method="POST">
#csrf
<div class="sign-in-wrapper">
Login with Facebook
Login with Google
<div class="divider"><span>Or</span></div>
<div class="form-group">
<label>Email</label>
<input type="email" name="email" class="form-control" name="email" id="email">
<i class="icon_mail_alt"></i>
<strong style="color: red;display: none;" class="error-email">{{$message}}</strong>
</div>
<div class="form-group">
<label>Password</label>
<input type="password" name="password" class="form-control" name="password" id="password" value="">
<i class="icon_lock_alt"></i>
<strong style="color: red;display: none;" class="error-password">{{$message}}</strong>
</div>
<div class="clearfix add_bottom_15">
<div class="checkboxes float-left">
<input id="remember-me" type="checkbox" name="check">
<label for="remember-me">Remember Me</label>
</div>
<div class="float-right"><a id="forgot" href="javascript:void(0);">Forgot Password?</a></div>
</div>
<div class="text-center">
<button type="submit" class="btn_login">Log In</button>
</div>
<div class="text-center">
Don’t have an account? Sign up
</div>
</div>
</form>

Bootstrap contact form sucess with ajax in the same page

I have this:
<form role="form" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
</form>
validar.php recollect all the data (POST) and send and email.
I would like to add ajax/jquery code to show a Sucess Message (f.e: Thxs for all!) bellow the submit buttom when the user clicks in "submit" in the same page that the form and execute validar.php in the index page.
THXS!
// this is the id of the form
$("#idForm").submit(function() {
var url = "validar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#idForm").serialize(), // serializes the form's elements.
success: function(data)
{
$("message").text("Success Message");
}
});
return false; // avoid to execute the actual submit of the form.
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form role="form" id="idForm" method="post" action="validar.php" data-toggle="validator">
<h2>¿Te interesa?<br>
Nosotros te llamamos</h2>
<div class="form-group">
<label for="Nombre">Nombre*</label><input data-error="Debes facilitarnos tu nombre" class="form-control" id="Nombre" name="Nombre" type="text" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Empresa">Empresa</label><input class="form-control" id="Empresa" name="Empresa" type="text">
</div>
<div class="form-group">
<label for="Correo">Correo electrónico*</label><input data-error="Debes facilitarnos tu correo electrónico" class="form-control" id="Correo" name="Correo" type="email" required />
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="Telefono">Teléfono</label><input class="form-control" id="Telefono" name="Telefono" type="tel">
</div>
<div class="form-group">
<label for="Horario">Qué día y hora prefieres</label><input class="form-control" id="Horario" name="Horario" type="text">
</div>
<button type="submit" class="btn btn-image" name="send"><span style="position:relative;top: -20px;">Solicitar información</span></button>
<div class="checkbox">
<label><input type="checkbox" required /><a target="_blank" href="http://www.trisquel.com/privacidad/">Acepto las condiciones</a></label>
</div>
<span id="message"></span>
</form>
Use jquery to serialize your form and post it. Give your form an id so you can reference it(like myForm)
var serializedForm = $("#myForm").serialize();
Then post it with an Ajax call(read the jquery ajax docs).
In the success callback of the Ajax call you do the following.
$('#contactDiv').hide();
$('#successDiv').show();
So you'll need to create some divs around the form and another around the success message.

Resources