I am using facebox to display a contact form, however when the user selects submit I would like the action which for this example I shall call action="contact_send.php" to also open in a facebox. Currently it is easy to open a link into a facebox by declaring the rel attribute as facebox
e.g.
Contact
This opens contact.html in a facebox window, I would however like the action of this form to also open in a lightbox, does anyone have any suggestions that might help?
thanks in advance
-Ashutosh
Your HTML FORM
<form id="contactfrm" method="post" onsubmit="return false;">
....your form elements
<input type="submit" onclick="submitContact();" />
</form>
EDIT :
Your Script
Now use jquery to submit form
<script type="text/javascript">
function submitContact() {
$.facebox(function() {
$.ajax({
data: { 'name' : $('#name').val(), 'message' : $('#message').val() }, //Make sure to change these values that reflects yours.
error: function() {
$.facebox('There was error sending your message.');
},
success: function(data) {
$.facebox(data); // the data returned by contact_send.php
},
type: 'post',
url: 'contact_send.php'
});
});
}
</script>
When you click submit button on your page, this code opens facebox and processes the variable you sent to contact_send.php page and returns the output from that page to the facebox.
Related
I don't get why the modal is showing my html's body content when I submit an input instead of the result of php.
I tried debugging it,then i found out that the modal shows its own content when I add data-toggle and data-target to the input/form, but the problem is that the modal shows after I click on the input even before I can even type something,and even I managed to type something, the same problem still exists
Here's the form:
<form id="form_id" action="some_php.php" method="POST">
<input id="input_id" type="text" name="input_name">
</form>
Here's the script:
$(document).ready(function()
{
$("#form_id").submit(function(e)
{
e.preventDefault();
$.ajax({
type: 'POST',
data: $("form_id").serialize(),
url: 'some_php.php',
success: function(data) {
$("#fetched-data").html(data);
$("#myModal").show('show');
}
});
return false;
});
});
I want after I type text in the textbox and click the button for that text to appear in the div above the form but I keep getting a php error undefined index: chattext
HTML:
<div class="chatdiv"></div>
<form id="chatform" action="chat.php" method="post">
<textarea name="chattext"></textarea>
<button>Send</button>
</form>
CHAT.PHP
<?php
echo $_POST['chattext'];
?>
JQUERY:
$(function () {
$('button').on('click', function(e) {
$.post('chat.php', $(this).serialize(), function(data) {
$('.chatdiv').html(data);
});
e.preventDefault();
});
}); // end ready
You are serializing the button:
$(this).serialize()
not the form. Change it to:
$("#chatform").serialize()
For future reference, when you're getting little issues like this, take a look at your web browsers developers tool, under network. It will show you what data is being posted to the web server.
You're not referencing the form in serialize(), the line should be:
$('#chatform').serialize()
You need to bind the event listener to your form in order to use $(this).serialize();
$('form#chatform').on('submit', function(e) {
I am using jquery to change my div contents in the main.php file without refreshing the page,
but issue here is in the new div which is loaded contains a form, in the form action i want the form to be submitted to the same page(div) , but am redirected to the main.php which i don't want. What changes i have to make to the action to stay on the same page with the same div.
This is the code which i use to dynamically change the div.
main.php:
<li id="nav-home"><a class="button" href="main.php">Home</a></li>
<li id="nav-page1"><a class="button" href="page1.php">Page1</a></li>
<li id="nav-page2"><a class="button" href="page2.php">Page2</a></li>
<li id="nav-page3"><a class="button" href="page3.php">Page3</a></li>
<script>
$(function(){
$('.button').on('click', function(e){
e.preventDefault();
$('#content').load($(this).attr('href'));
});
})
</script>
example: when i click on the Page1 in the main.php the div content is being replace by the page1 where in page1 i have a form, when i submit the form i want to stay in the same page.
this is the code which handles the form in the page1:
<form name="form" id="form" method="POST" action=""> //my form elements </form>
<script type="text/javascript">
$(document).ready(function(){
$("#form").validate({
debug: false,
rules: {
//rules
},
messages: {
//messages
},
submitHandler: function(form) {
// do other stuff for a valid form
$.post('scripts/formhandler.php', $("#form").serialize(), function(data) {
$('#results').html(data);
});
}
});
});
</script>
You can use the form.submit function, and handle the submit in there using ajax
$('#form_id').submit(function()
{
e.preventDefault(); // Prevent the default form action
/*now add ajax code here to do form submit*/
});
Of course if you're loading the form after the page has already been loaded, you would need to use the jquery.live or jquery.on function to set the form handler instead of the above code. Example:
$('#form_id').on('submit', function()
{
// Code in here
});
You can read up more on .live and .on from the jquery site
You appear to be using validate plugin, and you can use the ajaxSubmit method which will basically wrap a submit call with preventDefault, handle all the form serialization, etc.
http://docs.jquery.com/Plugins/Validation/validate
i.e.
submitHandler: function(form) {
$(form).ajaxSubmit();
}
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
Enter button on Keyboard refreshes rather than submitting
I have the following form structure
structure of my form:
<form name="form">
<label>Name:</label>
<input type="text" name="name" id="id" size="50"/></br>
<label></label>
<input type="button" value="Get Info" onClick="get();">
</form>
<div id="age"></div>
My javascript for the get function is as follows:
function get() {
$.post('XXX.php', { name: form.name.value },
function(output){
$('#age').html(output).show();
});
}
Now when i use button(input type="button") to post information it works well,But when i fill the information and press enter on the keyboard page gets refreshed.
How can i make Enter button to post the info?
Many times the default behavior in a form when enter is pressed in a non-textarea field is to submit, even when a submit button was not pressed or even present.
Try this:
<form name="form" onsubmit="get();return false;">
In fact, using this technique, you would be able to change your input button to a submit to simplify the form with the same outcome:
<input type="submit" value="Get Info"/>
try return false; in your function. This will stop the button from having its usual behaviour:
function get() {
$.post('XXX.php', { name: form.name.value },
function(output){
$('#age').html(output).show();
});
return false;
}
I do it a little differently (which probably means its the wrong way). I dont make a form at all. I just create inputs, selects, etc.. and then when i do my POST i just get the values wen the function is called..
$.ajax({
type: "POST",
url: "someFile.php",
data: { 'name': $("#ElementID").val()},
success: function(data) {
//some function....
{
});
Hope that may be helpful....
I see you posted this as jQuery so I figured I'd give you a solution using that.
$('form[name=form]').submit(function(e) {
var $form = $(this);
$.post( $form.attr('action'), $form.serializeArray(), function( result ) {
$('#age').html( result ).show();
});
e.preventDefault();
});
This will keep you from having to create a crazy json object for the data parameter and from repeating yourself with the form's action attribute. This will also keep the browser's behavior where pressing enter when on an input will submit the form.
Here goes some code I have from an example earlier. The only thing in the form's action file is <?php print_r($_POST); ?>.
I have an HTML form in a PHP file like the attached snippet:
When I hit the "Save Details" button, I want the page to load a jQuery UI modal dialog. That dialog will execute a controller action (ex:savedetails) through Ajax.
Essentially, the controller action will get all the POST details in "frmEmployees" and saves the changes to a database through Ajax.
I am interested in the logic to load the dialog with the Ajax content in it (Get all the POST variables through the controller action, say "/public/empdetailcontroller" via Ajax). So, far I have something like the HTML below.
Any Ideas?
Snippet:
<form name="frmEmployees" id="frmEmployees" method="POST" action="">
<table>
<tr><td>Name:</td><td><input type="text" name="empName" size="50"></td></tr>
<tr><td>City:</td><td><input type="text" name="empCity" size="50"></td></tr>
<tr><td>Country:</td><td><input type="text" name="empCountry" size="50"></td></tr>
<tr><td colspan=2 align=center><input type="button" name="btnsubmit" value="Save Details"></td></tr>
</table>
</form>
<div id="dialogSaveChanges"
title="Saving.."
style="display:none;"><p><span
class="ui-icon
ui-icon-info"
style="float:left; margin:0 7px 20px 0;"
></span><span id="dialogText-savechanges"></span></p></div>
<script language="JavaScript>
$(document).ready(function() {
$('#dialogSaveChanges').dialog({
autoOpen: false,
width: 400,
modal: true,
title: titleText,
closeOnEscape: false,
open: function(event, ui) { $(".ui-dialog-titlebar-close").hide(); },
resizable: false,
buttons: {
Ok: function() {
$(this).dialog('close');
}
}
});
$('#btnSaveChanges').click(function() {
$('#dialogSaveChanges').dialog('open');
$("span#dialogText-savechanges").html("Your Changes have been saved successfully.");
});
});
</script>
You'll need to submit the form in order for the form values to be sent. The logic will follow something like this:
Bind function (e.g., submitForm) to form's submit event, returning false to prevent normal (non-AJAX) form submission.
submitForm function makes $.ajax call.
AJAX call is configured to open the dialog before the the request is sent (event: beforeSend).
Dialog box is populated with "Loading..." text/image.
On success or failure of the ajax call (events: success/failure), the dialog box is populated with the results or an error message.
Code might look like:
$('#frmEmployees').submit( function() {
$.ajax({
url: this.attr('action'), // Make sure your form's action URL is correct.
method: 'POST',
data: this.serialize(), // this = $('#frmEmployees')
// Add hidden form inputs to send any control
// parameters to your server script.
beforeSend: openDialogFunction,
success: handleFormSuccess,
failure: handleFormFailure
});
return false; // prevent normal form submission.
});
If you program it like this, your page will also work without javascript, it just won't have the dialog box.
Not sure I completely understand what you are trying to do, but let me try...
So, you want to:
Send form details to a controller via AJAX.
Save the form data to the DB from the controller.
On success, show a dialog box with a "Success" message and the saved items.
On error (you didn't mention this), I assume you would display an alternate method, correct?
Look into the jQuery Ajax methods.