I pulled the template for this idea from jquery.com and included it around my form. On submit, the form is still following the action and submitting to and showing condoupdate.php, even with the 'preventDefault' event set. Testing on FF with WAMP.
<div style="display:block;margin:0px 10px 0px 10px;width:99%;">
<form id="condoupdate" name="condoupdate" method="post" action="condoupdate.php">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr valign="top">
<td><img src="img/details.png" /></td>
<td><textarea name="detail" cols="45" rows="5"><?php ECHO $extras; ?></textarea><BR /><BR /><input type="submit" class="unitBtn" name="svUnit" id="svUnit" value="Save"/> <input type="reset" class="unitBtn" name="resetUnit" value="Reset"/><div id="result" style="margin-left:10px;display:inline;"></div>
</td>
</tr>
</table>
</form></div>
<script>
$("#condoupdate").submit(function(event) {
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page
url = $("#condoupdate").attr("action");
// Send the data using post
var posting = $.post(url);
// Put the results in a div
posting.done(function(data) {
var content = $(data).find("#content");
$("#result").empty().append(content);
});
});
</script>
Related
For some reason this form keeps refreshing the page and I have no idea why as I have another form on the page with a different id but same script and it doesn't refresh. I have tried using preventDefault(); as well but it doesnt work either. Can someone please tell me where I have gone wrong in this form or script?
Thanks
Top of page
<script type="text/javascript" src="../JS/jquery.js"></script>
<script type="text/javascript" src="../JS/jquery-ui.js"></script>
<script type="text/javascript" src="../JS/member_info.js"></script>
The Form
<form id="central">
<table width="40%" class="search">
<tr>
<td width="39%" align="left"><p><b>Inception Date:</b></p><input size="10" maxlength="10" id="creddate" type="text" value="<?php echo $creddate; ?>" /></td>
<td width="41%" align="left"><p><b>Surety:</b></p><input size="15" maxlength="15" id="surety" type="text" value="<?php echo $surety; ?>" /></td>
<td width="20%" align="left"><p><b>Credit Limit:</b></p><input size="15" maxlength="15" id="creditlimit" type="text" value="<?php echo $credlimit; ?>" /></td>
</tr>
</table>
<br />
<table style="margin:0 auto">
<tr>
<td><input type="hidden" id="code" size="12" readonly="true" value="<?php echo $code; ?>" /></input></td>
<td><input type="submit" value=" Save " /></input></td>
<td><p align="center" id="central_status"></p></td>
</tr>
</table>
</form>
The Script - Linked from member_info.js
$(document).ready(function(){
$("form#central").submit(function() {
var code = $('#code').val();
var inception = $('#creddate').val();
var surety = $('#surety').val();
var credit = $('#creditlimit').val();
$.ajax ({
type: "POST",
url: '../members/edit_central.php',
data: {code: code, creddate: creddate, surety: surety, creditlimit: creditlimit},
success: function(data) {
$('#central_status').html(data);
}
});
return false;
});
});
Make sure you preventDefault() immediately after the form is submitted. Don't do anything else before you do that (like calling Ajax).
E.g.:
$("form#central").submit(function(e) {
e.preventDefault();
// Your other long running (possibly async)
// operations here
}
Also, make sure you are not adding the form dynamically to the page. If you do so, you need to attach the submit event live. Like so:
$(document).on('submit', 'form#central', function(e){
// same as above
});
use input type button insted of submit
<input type="button" value=" Save " name="saveButton" id="saveButton" />
in simple return false at the end of the click event handling do the trick for example :
$('form input[type="submit"]').click(function() {
....
return false;
})
I'm increasing my system by entering the functionality of loading a page inside a div dynamically, in the other words, the central area of the page is updated. For this I am using the JQuery. But even I having a problem which is the following, when submitting the same FORM one has to load the next page via JQuery-Ajax to send the post to use the data on this second page.
The funny thing is that I'm not getting the pick. Submit() the FORM always and only in one case. I will post the HTML below the two situations:
In the html code below warning test that I created within the form.submit () is being displayed.
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/fwsibe/index.php/acesso/listarSistemasValidar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Dados</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SIBE:* </b>
</td>
<td>
<select name="slSibe">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
</form>
In the second code warning. Submit () is not displayed, or is not recognized submission form:
<form id="form" accept-charset="utf-8" name="frmPadrao" method="POST" action="HTTP://localhost/sibe/index.php/almembal/motivoajustealm/pesquisar">
<br>
<fieldset id="tabelainfo" style="width: 560px;">
<legend style="color: #083C06;">
<b>Filtrar por:</b>
</legend>
<br>
<table id="tabelainfo">
<tbody>
<tr>
<td>
<b>SubTipo Produto:* </b>
</td>
<td>
<select name="slSubTipo">
</td>
</tr>
<tr>
<td>
<br>
</td>
</tr>
<tr>
<td colspan="2">
<input class="button" type="submit" value="Confirmar" name="btConfirmar">
</td>
</tr>
</tbody>
</table>
</fieldset>
<br>
<br>
<div>
<a title="" onclick="window.open('HTTP://localhost/sibe/index.php/almembal/motivoajustealm/incluir', '_blank', 'width=800,height=600,scrollbars=yes,status=yes,resizable=yes,screenx=0,screeny=0');" href="javascript:void(0);">Incluir</a>
</div>
<br>
<table id="tabelainfo">
<tbody>
<tr id="corpotabela">
<td align="center">Não existem Motivos de Ajuste cadastrados para esta pesquisa.</td>
</tr>
</tbody>
</table>
</form>
Below the JQuery script that is already properly initialized in the HEAD of the page, in addition, already tested for other enventos as $ (this). Click and everything is ok.
$(document).ready(function() {
$("#form").submit(function() {
alert("SUBMIT FORM");
// alert($(this));
// console.log($(this));
// $.post($(this).attr("action"), $(this).serialize(), function(data) {
// $("#divCentral").html(data);
// });
// return false;
});
});
Could you help me find the bug that causes. Submit () is not recognized by JQuery?
Edited:
I already discovered the source of the problem. Looks like that when the component is drawn for a page loaded by jquery-ajax, the event .submit() doesn't works, but when the page is loaded for default away, the event works.
The problem is that the is loaded by Ajax, and the JQuery function don't recognize it. I'am creating the function for load the central page of the template by a ajax request to a file. I have two functions, the first just for test, and the second I'am creating for works with the $_POST. The JQuery function for now is well:
function carregaUrl(url) {
//alert("carregaUrl=" + url);
$("#divCentral").load(url);
console.log($('form').attr('name'));
}
function carregaUrl2(url) {
var data = $("form").serialize();
$.ajax({
type: "POST",
url: url,
data: data
}).done(function(data) {
$("#divCentral").html(data);
});
}
What is happening here, is that the handler fires, starts the alert, and then form submit occurs, effectively reloading your page.
You need your event handler to return false if you want to prevent this submit and stay on your current page, or add an alert to the page you're going with this submit.
If you want to stay on your current page, try this:
jQuery(function($){
function formSubmit(form) {
$.post(form.attr('action'), form.serialize(), function(data){
$("#some-outer-container-with-form").html(data);
});
$("#form").submit(function(){ return formSubmit(form) }); //we need to rebind
return false;
}
$("#form").submit(function(){ return formSubmit( $(this) ) });
});
i've added a textarea control in my PHP page, using the CKEditor's class.
Now if the textarea loads empty, CKEditor works. But if i try to load a PHP variable in the textarea, the page show correctly the editor, but it won't show the content (and the editor appears to be blocked).
Here's my code:
<div id="dialog-edit" title="Edit" style="display: none;">
<table cellspacing="10">
<tr>
<td>
<table>
<form method="post" name="form">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<br/>
<textarea class="ckeditor" name="html" id="html" style="width: 766px; height: 390px; margin-left: 6px;"><?php echo htmlentities($html) ?></textarea><br/>
<input type="submit" name="save" id="save" value="Salva modifiche" class="button" />
</form>
</td>
</tr>
</table>
</div>
<script type="text/javascript">
function showDialogEdit()
{
$( "#dialog-edit" ).dialog({
width: 680,
height: 620,
modal: true,
open: function(event, ui)
{
}
});
}
</script>
The textarea must show the content (saved in a MySQL database as an HTML code), into the textarea, but it isn't doing this.
What's making this issue?
Thanks.
Try following the "replace by code" example in the CKEditor demo folder instead:
Remove the "ckeditor" class from the textarea.
Modify the the jQueryUI dialog "open" event to trigger it after the dialog is opened.
http://jsfiddle.net/mblase75/g2HFn/4/
$("#dialog-edit").dialog({
width: 680,
height: 620,
modal: true,
open: function (event, ui) {
CKEDITOR.replace('html');
}
});
Write in config file of ckeditor (config.js)
CKEDITOR.editorConfig = function( config ) {
/* ALLOW <?php ... ?> tags */
config.protectedSource.push(/<\?[\s\S]*?\?>/g);
config.extraAllowedContent = 'style';
};
I have this script,so it goes to ../AdsCreate/CreateCar.php reads the form and inserts into databse and loads page into a certain div which all works fine.
I have one problem one part of the form is to upload an image,now that it does not do I have been told it's because that script below serialize the data and does not do that for file based.
Here is the script.
<script type="text/javascript">
jQuery(document).ready(function($) {
$("#Submit").click(function() {
var url = "../AdsCreate/CreateCar.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#myForm").serialize(), // serializes the form's elements.
success: function(html){ $("#right").html(html); }
});
return false; // avoid to execute the actual submit of the form.
});
});
</script>
Here is my form
<form method="post" enctype="multipart/form-data" id="myForm">
<table class="default1" style="width: 100%" align="center">
<tr>
<td class="content1" colspan="3"><h3><b>Car Ads</b></h3></td>
</tr>
<tr>
<td class="content1" width="70%">Make: <input type="text" name="name"></td>
<td class="content1" width="15%">Model: <input type="text" name = "email"></td>
<td class="content1" width="15%">Year: <input type="text" name = "phone"></td>
</tr>
<tr>
<td class="content1" colspan="3">Main Photo: <input type="file" name="photo"></td>
</tr>
<tr>
<td class="content1" colspan="3"><input type="submit" value="Upload" id="Submit"></td>
</tr>
</table>
</form>
How can I change the script so I can upload a form that also has a file upload??
You can upload file separately using this plugin:
http://blueimp.github.com/jQuery-File-Upload/
You can also use jQuery Forms to upload File:
http://www.malsup.com/jquery/form/#file-upload
Make sure to disable submit button once a file is selected so it will upload the image first before the user can submit the form.
<div><input type="button" id="changePwd" value="Change your password"/></div>
<br/>
<div id="form_pwd">
<form method="POST" action="google.com" id="pwdChange">
<table>
<tr>
<td width="175px"><label for="oldPwd">Enter your password</label></td>
<td><input type="password" name="newPwd" id="newPwd" size="35"/></td>
</tr>
<tr>
<td><label for="oldPwd_>"Re-enter your password</label></td>
<td><input type="password" name="newPwd_" id="newPwd_" size="35"/></td>
</tr>
<tr>
<td></td><td><input type="submit" value="Save Password" /></td>
</tr>
</table><br/>
</form>
</div>
<script>
$("#changePwd" ).click(function ()
{
if ($("#form_pwd").is(":show"))
{
$("#form_pwd").slideDown("normal");
}
else
{
$("#form_pwd").hide();
}
});
</script>
i would like to not display the form until the user click the button but I fail to make it work, it displays by default when the page shows up. thank you
add display:none to your div
<div id="form_pwd" style="display:none;">
Try this one.
<script type="text/javascript">
$("#form_pwd" ).hide();
$('#changePwd').click(function() {
$('#form_pwd').slideToggle('slow', function() {
});
});
</script>
$("#form_pwd" ).hide(); will hide your form on page load and only show once you click on change your password button.
Simply use CSS to do this
<div id="form_pwd" style="display:none;">
This will hide your div element until the click event occurs upon which jquery will slide the element down and automatically remove the display none for you
Or you can do :
$("#form_pwd" ).hide();
what is :show??? I'm guessing you mean :visible...
use this...
$("#changePwd").click(function() {
if (!$("#form_pwd").is(":visible")) {
$("#form_pwd").slideDown("normal");
}
else {
$("#form_pwd").hide();
}
});
demo