last day (14 days later) » 

8:12 AM
0
A: Submit form within bootstrap modal using ajax and codeigniter without page change

Shyam ShingadiyaInstead of function you have to write jquery code like below. Remove function submitContactForm(e){} Add $(document).on('submit', '#myform', function(e) { }) $(document).on('submit', '#myform', function(e) { var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i; var name = $('#inputN...

 
The image upload stops, if I use the above
 
You got error in console.? Please share
 
No error in console, the error function of ajax is executed
hey after the alert the page keeps loading and then again {"msg":"ok"} is displayed on new page. Is it because e.preventDefault() is not written?
 
Yes, If you use e.PreventDefault() then jquery will invalidate all default methods.
 
Without e.preventDefault() , the code didnt work. Is anything wrong with html?
 
8:12 AM
Please share your current code in question so I can guide you.
 
Yes now this one is current code.
 
I Just updated my answer
Please check
$(document).on('submit', '#myform', function(e) {
var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var name = $('#inputName').val();
var email = $('#inputEmail').val();

if (name.trim() == '') {
alert('Please enter your name.');
$('#inputName').focus();
return false;
} else if (email.trim() == '') {
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
} else if (email.trim() != '' && !reg.test(email)) {
alert('Please enter valid email.');
$('#inputEmail').focus();
return false;
 
The above code will come inside ' $(document).ready(function() { ' or outside?
 
outside
 
ok
(index):1088 Uncaught TypeError: Cannot read property 'files' of undefined
at HTMLFormElement.<anonymous> ((index):1088)
at HTMLDocument.dispatch (jquery.min.js:5)
at HTMLDocument.i (jquery.min.js:5)
 
8:22 AM
Name will be file1
 
Failed to load resource error also
 
As you have already specified in Form
Also I suggest you to remove action from <Form > tag and add that in AJAX URL
 
yes..already specified..checked again also
 
See here is the request Pay Load
------WebKitFormBoundaryqA6VBv5AVabBj8H8
Content-Disposition: form-data; name="uname"

Jhon Doe
------WebKitFormBoundaryqA6VBv5AVabBj8H8
Content-Disposition: form-data; name="new_email"

Jhon@doe.com
------WebKitFormBoundaryqA6VBv5AVabBj8H8
Content-Disposition: form-data; name="file1"; filename="1.png"
Content-Type: image/png


------WebKitFormBoundaryqA6VBv5AVabBj8H8
Content-Disposition: form-data; name="submit"

Save Changes
------WebKitFormBoundaryqA6VBv5AVabBj8H8--
 
What is this?
 
8:27 AM
This is the request in your console
Can you show me your controller function?
 
yes
public function edit_profile_c()
{
if($this->session->userdata('uemail'))
{
$uemail = $this->session->userdata('uemail');

$uname = $this->input->post('uname');

$new_email = $this->input->post('new_email');

$configUpload['upload_path'] = './profile_photos';

$configUpload['allowed_types'] = 'gif|jpg|png|bmp|jpeg';

$configUpload['max_size'] = '0';

$configUpload['max_width'] = '0';

$configUpload['max_height'] = '0';

$configUpload['encrypt_name'] = false;

$this->load->library('upload', $configUpload);
 
Okay
Let me check
Where is your profile_photos located
Can you share me path
I think here is the error
$configUpload['max_size'] = '0';
$configUpload['max_width'] = '0';
$configUpload['max_height'] = '0';
Please change this variable values and check again
 
/public_html/konnect_staging/staging/code/profile_photos
@ShyamShingadiya what should I change it to?
 
$configUpload['upload_path'] = FCPATH . '/profile_photos';
 
earlier all changes were getting reflected..but it was redirected to blank page
with a statement {"msg":"ok"}
database mai..I could see the changes
 
8:37 AM
So file uploaded.?
 
now I no changes are taking place in database too
now no changes *
 
Okay
Just give me database table, I will configure it in my local machine and give you working code
 
with the code posted on stackoverflow ....changes in database were reflected
 
No worries,
Everything will work
Just I need table
 
ok..i ll send u..please send me ur email id
 
8:41 AM
No no
What is your table name
 
user
konnect database
 
Okay
show create table user;
Fire this query in mysql query window
and share me query output
 
columns that need to be changed - uname, uemail, uimg
 
I am not able to select query from there
 
8:44 AM
You are using phpmyadmin.?
 
user CREATE TABLE `user` (
`uid` int(20) NOT NULL AUT...
no..server
ha...matlab phpmyadmin only
 
9:03 AM
Hello
 
yes
 
Please change your ajax function
 
to?
 
$.ajax({
type: 'POST',
url: '<?= base_url('teacher/assessment/result/up') ?>',
contentType: false,
cache: false,
processData: false,
data: new FormData(this),
success: function(data) {
console.log(data);
if (data.msg == 'ok') {
$('#inputName').val('');
$('#inputEmail').val('');
$('.statusMsg').html('<span style="color:green;">Changes have been saved successfully.</p>');
} else {
$('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
}
$('.submitBtn').removeAttr("disabled");
Add your url
 
9:50 AM
same page got refreshed again
 
You added e.preventDefault()?
 
no
 
Then please add
 
ok..
Cannot read property 'files' of undefined
On click of Submit button..this error comes in console
At this line error is displayed
var files = $('#file')[0].files[0];
 
`$(document).on('submit', '#myform', function(e) {
e.preventDefault();
var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var name = $('#inputName').val();
var email = $('#inputEmail').val();

if (name.trim() == '') {
alert('Please enter your name.');
$('#inputName').focus();
return false;
} else if (email.trim() == '') {
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
} else if (email.trim() != '' && !reg.test(email)) {
alert('Please enter valid email.');
$('#inputEmail').focus();
I hope you are using this function
 
9:57 AM
FOrm
 
var files = $('#file')[0].files[0];
 
<div class="statusMsg"></div>
<form id="myform" method="post" enctype="multipart/form-data">
<label>Full Name : </label>
<input class="name_styling" type="text" placeholder="Enter name" id="inputName" name="uname">

<label>Email Id : </label>
<input class="email_styling" type="email" placeholder="Enter email" id="inputEmail" name="new_email">

<div class="controls">
<label>Profile Photo : </label>
<input type="file" name="file" id="file" />
<span class="filename"></span>
</div>

<center>
<input class="submitBtn" id="submit" type="submit" value="Save Changes" name="submit" >
In controller instead of file1 use file
 
ok
file1 hi rakha tha..and it worked
thanks alot!!
Changes have been saved successfully. got this message
aree...no database mai change nahi hua
:D
but i was happy looking at the message..!
 
I think database also change
Please verify
 
i refreshed twice...
 
10:05 AM
What is your model function.?
Can you share.?
 
ok..
public function edit_profile_m($uname,$uemail,$data1,$new_email)
{
$data = array(
'uname' => $uname,
'uemail' => $new_email,
'uimg' => $data1
);

$this->db->where('uemail',$uemail);
$result = $this->db->update('user',$data);

return $result;
}
 
On which bases you are updating user?
 
in ajax data mai the below will come na?
data: $(this).serialize(),new FormData(this),
 
Because your email will new
RIght
 
on old session email
 
10:08 AM
Then you have to pass That also
To model function
 
yes..$uemail is old email..and $new_email is new email
 
Okay
Then also its not updating record.?
 
i m checking again now
i m getting unexpected identifier after I added
data: $(this).serialize(),new FormData(this),
I am trying this
var fd = new FormData(this); and
data: $(this).serialize(),fd,
The above doesnt give error in console but didnt work too
I network I checked...so over there I get u did not select a file to upload
uname=unnati+m&new_email=unnati1233%40gmail.com
Request PayLoad :
FormData:
uname:dfgdfgd
new_email:unnati1233@gmail.com only
 
10:31 AM
Okay
        var myFormData = new FormData();
        e.preventDefault();
        var inputs = $('#myForm input[type="file"]');
        $.each(inputs, function(obj, v) {
            var file = v.files[0];
            var filename = $(v).attr("data-filename");
            var name = $(v).attr("id");
            myFormData.append(name, file, filename);
        });
        var inputs = $('#myForm input[type="text"],input[type="email"]');
        $.each(inputs, function(obj, v) {
            var name = $(v).attr("id");
Can you please replace all your ajax function and add this
 
ok..
 
I mean your last else part in jquery
 
accha
e.preventDefault(); is written at the beginning..so I shall remove it from the above code na?
 
No No
That will remain there
$(document).on('submit', '#myform', function(e) {
e.preventDefault();
var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var name = $('#inputName').val();
var email = $('#inputEmail').val();
if (name.trim() == '') {
alert('Please enter your name.');
$('#inputName').focus();
return false;
} else if (email.trim() == '') {
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
} else if (email.trim() != '' && !reg.test(email)) {
alert('Please enter valid email.');
$('#inputEmail').focus();
 
ok..will keep both
 
10:50 AM
Request PayLoad:
------WebKitFormBoundarycyfsu8bGTrm9uTcl
Content-Disposition: form-data; name="image_file"; filename="Lighthouse.jpg"
Content-Type: image/jpeg


------WebKitFormBoundarycyfsu8bGTrm9uTcl
Content-Disposition: form-data; name="inputName"

unnati m123
------WebKitFormBoundarycyfsu8bGTrm9uTcl
Content-Disposition: form-data; name="inputEmail"

unnati1233@gmail.com
------WebKitFormBoundarycyfsu8bGTrm9uTcl--
On click of submit button..nothing happens ...means the message is not displayed..and also no change in database
 
11:03 AM
I executed once more, in Network -> response message is displayed...You did not select a file to upload
 
You changed name from uname to inputName in form..?
and new_email to inputEmail?
 
I executed once more, in Network -> response message is displayed...You did not select a file to upload
@ShyamShingadiya yes this I had done a day before something
I did not change name
I changed id
name was kept the same
<form id="myform" method="post" enctype="multipart/form-data">
<label>Full Name : </label>
<input class="name_styling" type="text" placeholder="Enter name" id="inputName" name="uname">

<label>Email Id : </label>
<input class="email_styling" type="email" placeholder="Enter email" id="inputEmail" name="new_email">

<div class="controls">
<label>Profile Photo : </label>
<input name="file1" type="file" id="image_file" />
<img id="blah" class="logoupload" src="#" alt="your image" />
<span class="filename"></span>
 
and new_email to inputEmail?
 
@ShyamShingadiya means?
 
Please keep id same as name
 
11:15 AM
oh
 
Else
Hold
you can change here
var name = $(v).attr("id");
to
var name = $(v).attr("name");
 
ok..
will do this
var name = $(v).attr("name");
var email = $(v).attr("name");
this way?
 
Find this lines
var name = $(v).attr("id");
myFormData.append(name, file, filename);
 
Replace with
var name = $(v).attr("name");
myFormData.append(name, file, filename);
In ajax
 
var name = $(v).attr("name");
var email = $('#inputEmail').val();
oh..sorry understood
 
11:24 AM
:)
 
var myFormData = new FormData();
e.preventDefault();
var inputs = $('#myForm input[type="file"]');
$.each(inputs, function(obj, v) {
var file = v.files[0];
var filename = $(v).attr("data-filename");
var name = $(v).attr("name");
myFormData.append(name, file, filename);
});
var inputs = $('#myForm input[type="text"],input[type="email"]');
$.each(inputs, function(obj, v) {
var name = $(v).attr("name");
var value = $(v).val();
myFormData.append(name, value);
});
var xhr = new XMLHttpRequest;
xhr.open('POST', '<?php echo base_url(); ?>index.php/User/user_index_c/edit_profile_c/', true);
see..changed here
 
Perfect!
 
hey
hua change database mai
but message was not displayed
 
i ll execute once more
 
11:30 AM
Ya I know
 
oh
 
But image uploaded.?
I will gives you code for message also
 
yes
image also uploadede
yipee
 
Okay
Give me a minute
 
cool
 
11:33 AM
Now you have to check reponse status code
like below
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
$('#inputName').val('');
$('#inputEmail').val('');
$('.statusMsg').html('<span style="color:green;">Changes have been saved successfully.</p>');
}
}
};
===================
Please add this lines after xhr.send(myFormData); LINE
 
ok..
yup
done
database changed and message was also displayed
 
thanks a lot!
 
Let me update answer in StackOverflow
 
ok..
$(document).on('submit', '#myform', function(e)
{
e.preventDefault();
var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var name = $('#inputName').val();
var email = $('#inputEmail').val();

if (name.trim() == '')
{
alert('Please enter your name.');
$('#inputName').focus();
return false;
}
else if (email.trim() == '')
{
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
}
else if (email.trim() != '' && !reg.test(email))
{
alert('Please enter valid email.');
$('#inputEmail').focus();
Please paste this entire code in answer
so I can also refer for next time easily
 
11:41 AM
Done
Thank You
 
Thank you :D
 
Please accept and upvote if you got expected functionality
 
yes definitely
 
@Unnati: glad to help you out from this hurdle.
 
It took lot of time too..thanks for ur precious time!
 
11:44 AM
Not at all
We learn new things when we help someone
 
yup..thats very true
hey
i want this also..
$('.submitBtn').attr("disabled", "disabled");
$('.modal-body').css('opacity', '.5');
where to add these
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
 
This is before send or after success..?
 
immediately after Save changes button is clicked
 
You need to this lines befor below lines
var myFormData = new FormData();
$('.submitBtn').attr("disabled", "disabled");
$('.modal-body').css('opacity', '.5');
=======================
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
}
};
+++++++++++++++++++++++++++++
and I also suggest you don't use like this
$('.submitBtn').attr("disabled", "disabled");
 
oh
then what should I do?
 
11:53 AM
add below line to make button Inactive
$('.submitBtn').prop("disabled", true);
 
add below line to make button Active
$('.submitBtn').prop("disabled", false);
 
@ShyamShingadiya where to add this?
 
4 mins ago, by Shyam Shingadiya
You need to this lines befor below lines
 
you gave an upvote to my question?
 
3 mins ago, by Shyam Shingadiya
=======================
xhr.onload = function() {
if (xhr.readyState === xhr.DONE) {
if (xhr.status === 200) {
$('.submitBtn').removeAttr("disabled");
$('.modal-body').css('opacity', '');
}
}
};
Yes
 
11:55 AM
ok..cool
$(document).on('submit', '#myform', function(e)
{
e.preventDefault();
var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
var name = $('#inputName').val();
var email = $('#inputEmail').val();

if (name.trim() == '')
{
alert('Please enter your name.');
$('#inputName').focus();
return false;
}
else if (email.trim() == '')
{
alert('Please enter your email.');
$('#inputEmail').focus();
return false;
}
else if (email.trim() != '' && !reg.test(email))
{
alert('Please enter valid email.');
$('#inputEmail').focus();
Yup done
Now add this one as answer..
 
I hope everything is working now
 
yup
perfect
 
Thanks once again!
 

last day (14 days later) »