Develop Reference

show confirmation modal dialog after form submission

I have a form and I need it to do 2 things once the submit button is clicked:
I need the form data to be processed in the acknowledge.php that I have created.
I need the modal dialog to display confirmation.
My form:
<form class="quote-form" method="post" action="acknowledge.php">
<div class="form-row">
<label>
<span>Full Name</span>
<input type="text" name="name">
</label>
</div>
<div class="form-row">
<label>
<span>Email</span>
<input type="email" name="email">
</label>
</div>
<div class="form-row">
<label>
<span>Phone</span>
<input type="number" name="phone">
</label>
</div>
<div class="form-row">
<label>
<span>Nature of Enquiry</span>
<select name="enquiry">
<option selected>General Enquiry</option>
<option>Logo Design</option>
<option>Web Design</option>
<option>Branding</option>
<option>Social Media</option>
<option>Email/Web Hosting</option>
</select>
</label>
</div>
<div class="form-row">
<label>
<span>Message</span>
<textarea name="message"></textarea>
</label>
</div>
<div class="form-row">
<button type="button" name="send">Get A Quote</button>
</div>
</form>
I'm new to Javascript and AJAX but I have copied some code from some similar threads and tried to customize it to my site
<script type="text/javascript">
$(".quote-form").submit(function(e) {
e.preventDefault();
$.ajax({
type: 'POST',
data: $(".quote-form").serialize(),
url: 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
<!--Modal container-->
<div id="myModal" class="modal">
<!-- Modal content-->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
When the submit button is clicked nothing happens. Even the acknowledge.php does not execute. What am I doing wrong?

you need to wrap your code in a document.ready() function:
<script type="text/javascript">
$(function(){
$(".quote-form").submit(function(e){
e.preventDefault();
$.ajax({
type : 'POST',
data: $(".quote-form").serialize(),
url : 'url',
success: function(data) {
$("#myModal").modal("show");
}
});
return false;
});
});
</script>
UPDATE
you need to change the type of your button to submit like this
<button type="submit" name="send">Get A Quote</button>

A number of things that have been holding you up:
In your javascript, you have a trailing }); right at the end.
Your button is doing nothing to trigger the submit event in the javascript. You should alter the button or use a proper submit input. Or use type="submit".
You're not doing anything with data in your success callback. So when the modal opens, nothing else happens.
Your URL in the AJAX request is not set. You could use this.action to use the form's action URL here.
I've made some changes that you can preview in my fiddle.
There are some parts of the fiddle that you should ignore, such as the ajax url and data options. Those should be something like:
$.ajax({
type: 'POST',
url: this.action,
data: $(this).serialize(),
//...
});
What we obviously do not know now is whether you have included your dependency scripts like jQuery and bootstrap into your page.
For example: <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> is the bootstrap javascript.
Make sure that jQuery is above bootstrap, or bootstrap will fail to load as it depends on jQuery. You may need to use the bootstrap CSS as well.
Lastly, you need to check that your action in the form is the correct URL, and that the data in your form that is sent is processed and echoed back as HTML.
You will also want to go to the bootstrap documentation, get a better example of the modal, and check out the forms area to spruce up this form.
You could use developer tools in your browser and note any errors thrown by javascript in the console if you still have problems. (Ctrl+Shift+I).
You didn't need to wrap anything in a document ready.

You doing two things wrong
First you need to wrap your code with document.ready
$(function(){
});
Then you need to fix your url
var form = $(".quote-form");
$.ajax({
type : 'POST',
data: form .serialize(),
url : form.attr('action'),
success: function(data) {
$("#myModal").modal("show");
},
error: function (jqXHR, textStatus, errorThrown) {
alert(errorThrown);
}
});

how to send id of button into controller in codigniter

i am new in codeigniter and i am trying to post the button id from view to controller..
i have a button with pop-up, clicking on the button will open the form in popup, i want to update that from input into the database with the help of button id, but i am not able to get the id from view.
VIEW-:
<a data-toggle="modal" data-target="#Add_comm" data-href="javascript:addC(<?php echo $id;?>);">
<button" class="pull-right btn btn-info" name="user_id"><?php echo $id; ?></button>
</a>
JS-:
function addC(id) {
url = 'controller_foldr/contoller/add_cm/'+id;
passAjaxGetSubmit(url);
}
Controller
function add_cm(){
$this->load->model('modl_name');
$id=$this->input->post('id');
$update_cm = $this->input->post('update_cm');//i am getting this value from the popup form..
I don't know i am doing right thing to perform this action..
someone please guide me if i am wrong..please help...

<form action="#" method="post">
<input type="hidden" id="field_id" value="20" name="id"/>
<button class="pull-right btn btn-info" name="user_id" id="butn">edit values</button>
</form>
<script type="text/javascript" >
$(function(){
id = $('#field_id').val();
$('.btn').click(function(){
alert("clicked");
$.ajax({
url :'index.php/test/ajax',
type: "POST",
data : {field_id: id },
success: function (data) {
alert("values succesfully edited" + data);
},
error: function(jqXHR, textStatus, errorThrown) {
alert(textStatus);
alert(errorThrown) ;
}
});
});
});
i have updated the code please replace your code and put this code. Your problem was the anchor tag and all the unnecessery data elements inside.
Your controller should look like this
class Test extends CI_Controller
{
public function ajax(){
$id = $this->input->post('field_id');
echo $id;
}
}
This code will alert the id for you when the form is submitted. Try this code out instead of yours..

CodeIgniter PHP: change value in database when checkbox is mark/unmark

Ok, I manage somehow to get value of checkbox, but now i have another issue.
This is my view, rssFeeds.php
<?php foreach( $feeds as $row ) : ?>
<div class="row">
<div class="col-md-2 col-sm-3 text-center">
<a class="story-title"><img alt="" src="http://www.solostream.com/wp-content/uploads/2014/06/20140110080918_0555.jpg" style="width:100px;height:100px"></a>
<label class="checkbox-inline">
<input type="checkbox" class="chkbox" value="chkbox_<?php echo $row->category; ?>_<?php echo $row->id; ?>"> Mark Read
</label>
</div>
<div clas="col-md-10 col-sm-9">
// here are my feeds....
</div>
</div>
<?php endforeach; ?>
I have this script, which take checkbox value, and send it to my controller:
<script>
$(document).ready(function(){
$(document).on('click','.chkbox',function(){
var id=this.value;
$.ajax( {
type: "POST",
context: "application/json",
data: {id:id},
url: "<?php echo site_url('rssFeedReader/markReadUnread'); ?>",
success: function(msg)
{
// what should i do here ?....
}
})
});
});
</script>
In my controller, i just load a model which change a value on my database, 0 or 1( meaning read or unread).
The problem is that nothing change on my table...
I need to put something in that .succes function in ajax ? What.. ? I just need to change one value in my database....

#James-Lalor has the answer you are looking for, but I'll expand upon it.
You can give inputs the same name (radio buttons, checkboxes) to have them interact with each other. In the case of radio buttons it's actually required to have the same name to mark and unmark others. However in this case we will use <input name=example[]> note the [], this means when you do an ajax post (or any post) it will send all the values checked as an array.
So following James' suggestion, you would do a <input name="checkbox[<?php echo $row->id?>]" to which you can post using $.post(url, data, callback), the easiest way to do this would be to put it into a form, assign the form an id, do a serialized post. You could do something like:
<form id="rss_form" method="post" action="javascript:rssUpdate();">
<input name="checkbox[<?php echo $row->id?>]" type="checkbox"/>
<input type="submit" value="submit"/>
</form>
<script>
function rssUpdate()
{
$.post(url/to/post/to, $("#rss_form").serialize());
}
</script>

What is possible with event.PreventDefault() and ajax POST method?

Problem?
I have a problem where i can't use a normal HTML POST as it refreshes my webpage causing a JS controlled 'Tab' to close. Thus forcing the user to reopen the tab to see the feedback from the submitted form.
How it should work
The user enters their data into the form and then clicks submit, the form POSTs the data to itself, emailing the data to an email address. once the data is sent a message should replace the form saying the email had been sent. (all without the tab that contains the form closing)
Sudo Code
If (email) is complete
{Send Email}
echo "thank you for for your email"
}else{
Display email form
Solution i am trying?
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>
$('#form1').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
}
});
});
</script>
Now this would be great as it stops the page refreshing and it sends the email but it stops the "thank you you message has been sent" html from replacing the form.
So for all intents and purposes the user doesn't know if the email has been sent as the form is still there displaying the data they inputted.
Possible workaround?
Somehow getting the ajax post to insert the "thank you" message into the correct div on success of ajax post?! Is this possible?
Or am i doing something wrong, implementation wise?!
Actual Code I'm using
<div id="tabsContainer">
<div class='tab one'>
<ul>
<li>Inquiry Form</li>
</ul>
</div>
<div class='content one'>
<div id="contact-form" class="clearfix">
<?php
if ($_POST["email"]<>'') {
$ToEmail = 'dancundy#hotmail.com';
$EmailSubject = 'EasyScrap Enquiry';
$mailheader = "From: ".$_POST["email"]."\r\n";
$mailheader .= "Reply-To: ".$_POST["email"]."\r\n";
$mailheader .= "Content-type: text/html; charset=iso-8859-1\r\n";
$MESSAGE_BODY = "Name: ".$_POST["FName"]." ";
$MESSAGE_BODY .= $_POST["SName"]."<br>";
$MESSAGE_BODY .= "Tel: ".$_POST["CTNumber"];
$MESSAGE_BODY .= "<br>"."email: ".$_POST["email"]."";
$MESSAGE_BODY .= "<br>"."Address: ".$_POST["STName"]." ".$_POST["PCode"];
$MESSAGE_BODY .= "<br>"."Comment: ".nl2br($_POST["Comment"])."";
mail($ToEmail, $EmailSubject, $MESSAGE_BODY, $mailheader) or die ("Failure");
?>
<h3>Contact Us</h3>
<P>Your message was sent, thank you! You will recieve an automated response within the next few minutes and will hear back from a Plymouth Easy Scrap representive shortly.</P>
</div>
</div>
</div>
<?php
}else{
?>
<fieldset>
<legend>
<h3>Contact Us</h3>
</legend>
<div id="contact-area">
<form id="form1" method="post" action="">
<label for="FName">Name:*</label>
<input name="FName" type="text" required placeholder="Enter your name" />
<label for="SName">Surname:</label>
<input name="SName" type="text" placeholder="Enter your surname" />
<label for="STName">Street:</label>
<input name="STName" type="text" placeholder="Enter the address" />
<label for="PCode">PostCode:</label>
<input name="PCode" type="text"placeholder="UK Postcode" />
<label for="Email">Email:*</label>
<input type="email" name="email" required placeholder="Enter a valid email address"/>
<label for="CTNumber">Contact:</label>
<input name="CTNumber" type="text" placeholder="Enter a contact number"/>
<label for="comment">Message:</label>
<br/>
<textarea name="Comment" rows="20" cols="20" id="Message"></textarea>
<input type="submit" name="submit" value="Submit" class="submit-button" />
</form>
<div style="clear: both;"></div>
</div>
<div class="FormInfo">
<p> </p>
<p>*Denotes a required field</p>
</div>
</fieldset>
<?php
};
?>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script><script>
$('#form1').submit(function(e)
{
event.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
}
});
});
</script>
Here is the actual site which will give you a better idea what i mean when i say 'tab' and hopefully expand on the problem more.
http://www.cundytech.com/SWCF/indextest2.php
The tab with the form is "enquiry form" in the menu.
I really hope someone can help?

once the messsage is sent , replace the form with the thank you message.
this could be done by replacing the dom structure containing the form with the thank you message within ajax success block
ajax code:
$('#form1').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
// replace the email form with thank you message
$('#targetForm').html("<div class="info">Thank you for your message !!!<div>");
}
});
});
Happy Coding :)

Solution
The Solution posted by #deamweiver worked a treat. Using the Success part of the ajax post function i was able to swap out the form for a thank you message after successfully posting form data.
This is the code needed
('#form1').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
$('#form1').html("<div class=\"info\">Thank you for your message !!!<div>");
}
});
});

Try following things:
indextest2.php page:
function index(){
//Do whatever receiving the data
if(Your job is done){
echo "Success";
}else{
echo "Error";
}
}
ajax Call:
$(document).ready(function(){
$('#form1').submit(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
if(response=="Success"){
$('#contact-area').html("<div>thank you you message has been sent</div>")
}else{
$('#contact-area').html("<div>Sorry Something went Wrong !</div>")
}
},
error: function (xhr) {
alert(xhr.responseText);
console.log(xhr.responseText);
}
});
});
The e you are using here is the event that generates after submitting the form or clicking the submit button. Then the browser refresh and goes to the action="" url that you have entered in form tag. Whenever you use e.preventDefault than it stops the action of form submission and does the code you write below of e.preventDefault. Generally people use preventDefault to stop refreshing browsers on a tag and submit buttons of form. Good Luck.

what is event in your javascript?
In your argument you use event and in the function body you use e.
argument and variable must be same.
For your solution it should be e.
Following code may help you...
$('#form1').submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
url: 'indextest2.php',
data: $("#form1").serialize(),
success: function(response) {
}
});
});

Getting the value of the child of sibling jquery/ajax?

I'm currently trying to make a ajax comment function work once a user clicks "open comments".
Currently I'm getting data back from my php script and the status of the ajax call is "200 OK" so it definetely works but I'm just unable to get the correct value for the current comment which has been clicked on in order to post it to the php script.
What I'm asking is how do I get the value of the ".posted_comment_id" class and then how do I load the data which is returned into the ".commentView" class?
jQuery/AJAX:
$(".closedComment").click(function(){
var $this = $(this);
$this.hide().siblings('.openComment').show();
$this.siblings().next(".commentBox").slideToggle();
$.ajax({
type: "POST",
url: "http://example.dev/comments/get_timeline_comments",
data: {post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").val()},
dataType: "text",
cache:false,
success:
function(data){
$this.closest(".commentView").load(data);
}
});
return false;
});
HTML:
<div class="interactContainer">
<div class="closedComment" style="display: none;">
open comments
</div>
<div class="openComment" style="display: block;">
close comments
</div>
<div class="commentBox floatLeft" style="display: block;">
<form action="http://example.com/comments/post_comment" method="post" accept-charset="utf-8">
<textarea name="comment" class="inputField"></textarea>
<input type="hidden" name="post" value="13">
<input type="hidden" name="from" value="5">
<input type="hidden" name="to" value="3">
<input type="submit" name="submit" class="submitButton">
</form>
<div class="commentView"></div>
<div class="posted_comment_id" style="display:none;">13</div>
</div>
</div>

Replace .val by .html or .text. This will return the innerHTML of the element.
data: {
post_id: $this.siblings().next(".commentBox").find(".posted_comment_id").text()
}
You might need to convert the string to an integer to make it work.
If the query selector fails, this selector might do the job instead:
$this.parent().find(".posted_comment_id")
To add the returned data on your webpage, use the success handler. Here's an example of how it's done:
success: function(json) {
// Parse your data here. I don't know what you get back, I assume JSON
var data = JSON.parse(json),
content = data.whatever_you_want_to_print;
// Assuming your selector works, you put in in the element using .html
$this.closest(".commentView").html(content);
}
});

You probably want to do something like:
$(this).parents('.interactContainer').find(".posted_comment_id").text()