ajax form display message - ajax

i have a form that insert in dbase what i write
here is the form,
<form id="contact-form" class="bl_form text-center" action="<?php echo "index.php?page=rooms&room=$rid&rpw=$rpw&r=$r";
?>" method="post" novalidate>
<span class="field-wrap scrollimation fade-right">
<input type="hidden" id="contact-name" name="contactName" type="text"
class="label_better requiredField" data-new-placeholder="Name" placeholder="Name" value="<?php echo "$uid"; ?>" data-error-
empty="*Enter your name">
</span>
<span class="field-wrap scrollimation fade-left">
<label class="control-label" for="contact-message">Message</label>
<textarea id="contact-message" name="message" rows="1" class="label_better
requiredField" data-new-placeholder="Message" placeholder="Message" data-error-empty="*Enter your message"></textarea>
</span>
<p class="text-center"><button name="sy2" id="submit_post" type="submit" class="btn btn-meflat
icon-left" data-error-message="Error!" data-sending-message="Sending..." data-ok-message="Message Sent"><i class="fa fa-paper-
plane"></i>Send Message</button></p>
<input type="hidden" name="submitted" id="submitted" value="true" />
<?php echo "<postfield name=\"message\" value=\"$(message)\"/>"; ?>
</form>
and i want to put a ajax code that display this message from dbase
<?php echo make_clickable($tosay)."$link_delete"; ?>
Can someone provide me an example?Thank you

Look at this
Ajax tutorial for post and get
So, the jQuery
$('body').on('submit', '#contact-form', function(){
$.post({$(this).attr("action"), $(this).serialize(), function(data){
if(data){
alert(data.message);
}
}, 'json');
return false;
});
And the server side
<?php
if($_SERVER['REQUEST_METHOD'] === 'POST'){
// do your thing here
echo json_encode(array("message" => make_clickable($tosay).$link_delete));
die();
}
?>

Related

What is the cause of this wrong image upload error message in my Codeigniter 3 application?

I am working on a basic blog application with Codeigniter 3.1.8 and Bootstrap 4.
There is, among others an "Edit account information" form, which has an image upload field. In the controller, the update() method contains the logic for the image upload action:
public function update() {
// Only logged in users can edit user profiles
if (!$this->session->userdata('is_logged_in')) {
redirect('login');
}
$id = $this->input->post('id');
$data = $this->Static_model->get_static_data();
$data['pages'] = $this->Pages_model->get_pages();
$data['categories'] = $this->Categories_model->get_categories();
$data['author'] = $this->Usermodel->editAuthor($id);
$this->form_validation->set_rules('first_name', 'First name', 'required');
$this->form_validation->set_rules('last_name', 'Last name', 'required');
$this->form_validation->set_rules('email', 'Email', 'required|trim|valid_email');
$this->form_validation->set_error_delimiters('<p class="error-message">', '</p>');
// Upload avatar
$config['upload_path'] = './assets/img/avatars';
$config['allowed_types'] = 'jpg|jpeg|png';
$config['max_size'] = '100';
$this->load->library('upload', $config);
if (!$this->upload->do_upload('userfile')) {
$uerrors = array('uerrors' => $this->upload->display_errors());
$data['uerrors'] = $uerrors;
}
if(!$this->form_validation->run() || !empty($uerrors))
{
print_r($data['uerrors']);
$this->load->view('partials/header', $data);
$this->load->view('dashboard/edit-author');
$this->load->view('partials/footer');
} else
{
$this->Usermodel->update_user($id);
$this->session->set_flashdata('user_updated', 'Your account details have been updated');
redirect(base_url('/dashboard/manage-authors'));
}
}
The (surprising) problem I have is that, even though I am uploading an image, print_r($data['uerrors']); returns You did not select a file to upload. in the browser.
In the view, the same error is returned:
<?php echo form_open(base_url('dashboard/users/update')); ?>
<input type="hidden" name="id" id="uid" value="<?php echo $author->id; ?>">
<div class="form-group <?php if(form_error('first_name')) echo 'has-error';?>">
<input type="text" name="first_name" id="first_name" class="form-control" value="<?php echo set_value('first_name', $author->first_name); ?>" placeholder="First name">
<?php if(form_error('first_name')) echo form_error('first_name'); ?>
</div>
<div class="form-group <?php if(form_error('last_name')) echo 'has-error';?>">
<input type="text" name="last_name" id="last_name" class="form-control" value="<?php echo set_value('last_name', $author->last_name); ?>" placeholder="Last name">
<?php if(form_error('last_name')) echo form_error('last_name'); ?>
</div>
<div class="form-group <?php if(form_error('email')) echo 'has-error';?>">
<input type="text" name="email" id="email" class="form-control" value="<?php echo set_value('email', $author->email); ?>" placeholder="Email">
<?php if(form_error('email')) echo form_error('email'); ?>
</div>
<div class="form-group <?php if(form_error('bio')) echo 'has-error';?>">
<textarea name="bio" id="bio" cols="30" rows="5" class="form-control" placeholder="Add a short bio"><?php echo set_value('bio', $author->bio); ?></textarea>
<?php if(form_error('bio')) echo form_error('bio'); ?>
</div>
<input type="hidden" name="avatar" id="avatar" value="<?php echo $author->avatar; ?>">
<label for="avatar">Upload avatar</label>
<div class="form-group">
<input type="file" name="userfile" id="uavatar" size="20">
<p><?php print_r($uerrors); ?></p>
</div>
<div class="form-group">
<div class="w-50 pull-left pr-1">
<input type="submit" value="Update" class="btn btn-block btn-md btn-success">
</div>
<div class="w-50 pull-right pl-1">
Cancel
</div>
</div>
<?php echo form_close(); ?>
The error message I was expecting, considering that the image I was trying to upload is larger then the specified limit (100KB) is: The file you are attempting to upload is larger than the permitted size.
What am I doing wrong?
Try this
<?php echo form_open_multipart(base_url('dashboard/users/update')); ?>
<div class="form-group">
<input type="file" name="userfile" id="userfile" size="20">
<p><?php print_r($uerrors); ?></p>
</div>
Try to change your form opening, from :
<?php echo form_open(base_url('dashboard/users/update')); ?>
to
<?php echo form_open_multipart(base_url('dashboard/users/update')); ?>
To change the form encoding type from text/plain to multipart/form-data to support image data upload. Here is the difference between each encoding type.

Is it possible to call confirmation dialog from controller in codeigniterr?

I am using codeigniter of version 3. When I submit that form, i have to save the data of that form and a confirmation dialog with yes no option has to appear. If user clicks yes i have to redirect to a page and if use clicks to no i have to redirect to another page .How can i do that?
My View code:
<form id="saveRenewFirm" action="<?php echo base_url() ?>firm/saveFirmInfo" method="post" role="form">
<div class="row">
<div class="col-25">
<label> Name of the firm:</label>
</div>
<div class="col-75">
<input type="text" id="firm_name" name="firm_name" value="<?php echo $firmDetail->firm_name; ?>" <?php echo $status;?> style="width:50%;" />
</div>
</div></p>
<div class="row">
<div class="col-25">
<label>Category :</label>
</div>
<div class="col-75">
<input type="text" name="category" id="category" value="<?php echo $firmDetail->category; ?>" <?php echo $status;?> />
</div>
</div>
<div class="row">
<div class="col-25">
<label>Phone no :</label>
</div>
<div class="col-75">
<input type="text" name="phone_no" id="phone_no" value="<?php echo $firmDetail->phone; ?>" <?php echo $status;?> />
</div>
</div>
<div class="row">
<div class="col-25">
<label>Address :</label></div><div class="col-75"><input type="text" name="address" style="width:400px;" id="address" value="<?php echo $firmDetail->address; ?>" <?php echo $status;?> />
</div>
</div>
<button value="submit" name="action" type="submit" class="button" >Submit</button>
<?php echo form_hidden('renew_id',$firmDetail->renew_id);?>
</form>
My controller:
public function saveFirmInfo() {
$this->setValidation();
if($this->form_validation->run() == FALSE){
$this->index();
} else {
$data = array(
'firm_name' => $this->input->post('firm_name'),
'category' => $this->input->post(category),
'phone_no' => $this->input->post('phone_no'),
'address' => $this->input->post('address'));
$new_id = $this->renewed_firm_model->insert($data);
if($new_id>0){
$this->session->set_flashdata('success', 'Firm Detail submitted. Do you want to continue to payment?');
}else {
$this->session->set_flashdata('error', 'Error during processing, please try again...');
}
redirect('member/profile','refresh');
}
I want to bring a confirmation dialog instead of flash message to continue for payment . If user clicks yes then i have to redirect to payment page and if user clicks no another page has to be opened.
You can either do this 2 ways.
The first way, and the easiest given your current code would be to redirect to a page after the user submits the form that has a question and 2 options (yes or no).
The second way would be to submit the form via ajax and launch a modal on success function. This would be more intensive, and require substantial changes to your current save function.

Posting data from form Codeigniter

I need to post data from a form that creates fields from looping through some ids, so the fields have the same id and names but different data which i need to pass to my controller an eventually save
My Form View
<form class="form" id="addForm">
<div class="panel-body">
<?php foreach ($lab_result->result() as $results){?>
<div class="form-group">
<div class="col-md-5">
<input type="hidden" id="request_details_id" name="request_details_id" class="form-control" value="<?php echo $results->id; ?>"/>
<label class="col-sm-12 control-label"><span class="text-warning"><strong>Requested Service : </strong></span> <span class="text-success"><?php echo $results->service_name; ?> - <?php echo $results->service_description; ?></span></label>
<label class="col-sm-12 control-label"><span class="text-warning"><strong>Service Costs : </strong></span> <span class="text-success">Ksh. <?php echo $results->service_price; ?></span></label>
</div>
<div class="col-sm-7">
<textarea class="form-control" rows="2" id="results" name="results" placeholder="Input Lab Results, if none type N/A"></textarea>
</div>
</div>
<?php }?>
</div><!-- panel-body -->
<div class="panel-footer">
<button type="submit" class="btn btn-primary">Send Results</button>
</div>
</form>
Ajax to post data
$.ajax({
url: '<?php echo base_url(); ?>laboratory/addLabResult',
type: 'post',
data: $('#addForm :input'),
dataType: 'html',
success: function(html) {
$('#addForm')[0].reset();
bootbox.alert(html, function()
{
window.location.reload();
});
}
});
If i print_r in my controller, I only see the post from the last row
You need to use input name in array format to upload all values
<input type="hidden" id="request_details_id" name="request_details_id[]" class="form-control" value="<?php echo $results->id; ?>"/>
and
<textarea class="form-control" rows="2" id="results" name="results[]" placeholder="Input Lab Results, if none type N/A"></textarea>

Validate with codeigniter

I dont know what am i doing wrong with the validation.
here is my Controller
function update_user() {
$this->load->library('form_validation');
$this->form_validation->set_rules('sirname', 'First Name', 'trim|required|alpha|min_length[3]|max_length[30]|xss_clean');
$this->form_validation->set_rules('name', 'Last Name', 'trim|required|alpha|min_length[3]|max_length[30]|xss_clean');
$this->form_validation->set_rules('email', 'Email ID', 'trim|required|valid_email');
if ($this->form_validation->run() == FALSE)
{
// fails
$this->load->view('update_view');
}
else
{
$data = array(
'surname' => $this->input->post('sirname'),
'name' => $this->input->post('name'),
'email' => $this->input->post('email'),
);
$this->Account_model->update_user(31,$data);
$this->show_user();
$this->session->set_flashdata('msg','<div class="alert alert-success text-center">You are Successfully Updated!</div>');
redirect('home');
}
}
here is my view
<form method="post" action="<?php echo base_url() . "account/update_user"?>" >
<div class="form-group">
<label for="name">First Name</label>
<input class="form-control" name="sirname" placeholder="Your First Name" type="text" value="<?php echo $user->surname; ?>" />
<span class="text-danger"><?php echo form_error('sirname'); ?></span>
</div>
<div class="form-group">
<label for="name">Last Name</label>
<input class="form-control" name="name" placeholder="Last Name" type="text" value="<?php echo $user->name; ?>" />
<span class="text-danger"><?php echo form_error('name'); ?></span>
</div>
<div class="form-group">
<label for="email">Email ID</label>
<input class="form-control" name="email" placeholder="Email-ID" type="text" value="<?php echo $user->email; ?>" />
<span class="text-danger"><?php echo form_error('email'); ?></span>
</div>
<div class="form-group">
<button name="submit" type="submit" class="btn btn-default" onclick="account.php">Update</button>
<button name="cancel" type="reset" class="btn btn-default">Cancel</button>
</div>
<?php echo form_close(); ?>
<?php endforeach; ?>
<?php echo $this->session->flashdata('msg'); ?>
i need to display the value already in the database as im doing an update info for user.. so how do i implement the set_value('name') as well.
First preference is for form_error(),
so in value for each input fields,
value="<?php form_error("surname") ? echo set_value("surname") : echo $user->surname; ?> ?>"
Which means, if form error, then echo set_value() else echo database value.
in home controller where you redirect to success load :
$this->load->library('form_validation');
it will be ok!
You can use CI's built-in set_value function, which lets you set the values of a form field. It has a second (optional) parameter, to set the default value for the field.
<? echo form_label('Last Name', 'name'); ?>
<input class="form-control" name="name" id="name" type="text" value="<? echo set_value('name', $user->name) ?>">
<? echo form_error('name', '<span class="text-danger">','</span>');?>
In the code above, when loaded for the first time, the form will show the value from the database. But when returned after failing form validation, it will show the user input.

how to validate a field in tab?

I need that the customer field is required, if it is empty when pressing the continue button, this not must allow continue to next step and it then should appear a message indicating that the field is empty and need be completed.
Please, i need a help or advice about how to could make the validation.
Using boostrap.
<ul class="nav nav-pills nav-justified" id="NotTab">
<li class="active disabledTab">1. <?php echo $tab_customer; ?></li>
<li class="disabled disabledTab">2. <?php echo $tab_payment; ?></li>
</ul>
<div id="tab-customer" class="tab-pane active">
<div class="control-group">
<label class="control-label" style="color: #F00;"><b><?php echo $entry_customer; ?></b></label>
<div class="controls">
<input type="text" name="customer" value="<?php echo $customer; ?>" class="span3" onclick="this.select();">
<input type="hidden" name="customer_id" value="<?php echo $customer_id; ?>">
<input type="hidden" name="customer_group_id" value="<?php echo $customer_group_id; ?>">
</div></div>
<div class="form-actions">
<button class="btn btn-primary prevtab" type="button" onclick="return showNext()"><span class="glyphicon glyphicon-arrow-right"></span> Next </button></div>
</div>
<script>
var $tabs = $('#NotTab li');
function showPrev() {
$tabs.filter('.active').prev('li').removeClass("disabled");
$tabs.filter('.active').prev('li').find('a[data-toggle]').each(function () {
$(this).attr("data-toggle", "tab");
});
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').tab('show');
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').each(function () {
$(this).attr("data-toggle", "").parent('li').addClass("disabled");
})
}
function showNext() {
$tabs.filter('.active').next('li').removeClass("disabled");
$tabs.filter('.active').next('li').find('a[data-toggle]').each(function () {
$(this).attr("data-toggle", "tab");
});
$tabs.filter('.active').next('li').find('a[data-toggle="tab"]').tab('show');
$tabs.filter('.active').prev('li').find('a[data-toggle="tab"]').each(function () {
$(this).attr("data-toggle", "").parent('li').addClass("disabled");;
})
}
</script>
Thanks.
You can use a simple check, to check if the input is empty.
if( !$('[name=customer]').val() ) {
alert('Input is empty');
return;
}

Resources