I have a problem with the ckeditor. I downloaded the current version and included it to my form as follows:
<form action="/news.php?frame=edit&id=185" enctype="multipart/form-data" method="post" accept-charset="utf-8">
<textarea class="edit" name="news_content" id="news_content" rows="30" cols="32" style="width:95%;">{$news_content}</textarea>
<script type="text/javascript" src="ext/ckeditor/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace( 'news_content' )
</script>
<input type="submit" accesskey="s" value="Eintragen (Alt+S)" class="button">
</form>
It is loaded correctly and I can use the editor to make any changes. However, when submitting the form using a normal submit button (no AJAX or JS at all here), there is no entry "news_content" in the $_POST array, nor is there any other element containing the data at all.
How can I make use of the content after submitting the form using a normal submit button?
Thanks in advance and best regards
Daniel
You have to run a function to update the actual form field, I had the same issue let me find my code. The actual form data doesn't get updated until you run a function to move the CKEditor data into the form field.
function updateAllMessageForms()
{
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}
This worked for me:
if( $('.ckeditor').length > 0){
$('form').on('submit', function(e){
for (instance in CKEDITOR.instances) {
$('#' + instance).val(CKEDITOR.instances[instance].getData());
}
});
}
i had the same problem in jquery ui dialog. this code has worked for me:
function updateAllMessageForms(){
for (instance in CKEDITOR.instances) {
CKEDITOR.instances[instance].updateElement();
}
}
CKEditor does do this for you automatically, as far as I know. I ran into the same problem, my POST variable for the textarea was blank. Turned out I had an error in my javascript onsubmit function that did validation. The javascript would error out and the form would be submitted, but the CKEditor code to populate the original textarea would not fire, due to that error.
I looked around in the source code, I think this updates the original textarea on submit:
// Integrate with form submit.
if ( editor.config.autoUpdateElementJquery && $element.is( 'textarea' ) && $( element.form ).length ) {
var onSubmit = function() {
$element.ckeditor( function() {
editor.updateElement();
} );
};
// Bind to submit event.
$( element.form ).submit( onSubmit );
// Bind to form-pre-serialize from jQuery Forms plugin.
$( element.form ).bind( 'form-pre-serialize', onSubmit );
// Unbind when editor destroyed.
$element.bind( 'destroy.ckeditor', function() {
$( element.form ).unbind( 'submit', onSubmit );
$( element.form ).unbind( 'form-pre-serialize', onSubmit );
} );
}
Related
I'm trying to implement the isClicked() feature of submit buttons in symfony2. I followed the documentation but it doesn't work for me. I always get false.
Form:
$builder
->add(
'draft',
'submit'
);
Controller:
$form = $this->createForm(
new PageType(),
$page
);
$form->handleRequest($request);
if ($form->isValid()) {
// set status draft if draft button is clicked
if ($form->get('draft')->isClicked()) {
$page->setStatus(Page::STATUS_DRAFT);
}
}
Did I miss something?
Okay that's stupid. I added this script a long time ago:
$("form").submit(function () {
$('[type=submit]', this).attr('disabled', true);
});
I used it to avoid multiple clicks on the submit buttons. But if your button is disabled it won't add it to the post request. So that's why it failed. xurshid29 solution wouldn't help for this issue because php will never know which button was clicked when it's not part of the request.
I've also faced this problem, and solved it with a little different way, like this:
$clickedButton = $productListForm->getClickedButton()->getName();
if ($clickedButton == 'enable') {
$product->setStatus(Product::STATUS_ENABLED);
}
if ($clickedButton == 'delete') {
$product->setDeleted(true);
}
EDIT:
Disabled elements wont be posted by POST or GET methods. If you want to disable double click in submission, you can create a submit button, hide it with CSS, create an another span or p element, style it like submit button, attach to it a litle javascrpt to pass an event to actual submit button:
template:
<div class="form-actions">
<div class="disable-product">
<input type="submit" <!-- other attributes --> class="element-hidden" />
<p class="button-style">Disable</p>
</div>
<div class="remove-product">
<input type="submit" <!-- other attributes --> class="element-hidden" />
<p class="button-style">Remove</p>
</div>
</div>
js:
jQuery(document).ready(function() {
$('.button-style').on('click', function() {
$(this).siblings('input').mousedown();
});
});
It was the javascript that was messing me. I had the following:
$( '#form_accept' ).click(function( e ) {
var confirmResponse3 = confirm('{{ 'popup.accept.body'|trans( {} , 'bundle' )|escape('js') }}');
if( confirmResponse3 == true ) {
$(this).parents( 'form' ).submit();
}
return confirmResponse3;
});
When I submitted the form manual, Symfony didn't know. But when I removed the if statement (like below) is worked just fine.
$( '#form_accept' ).click(function( e ) {
var confirmResponse3 = confirm('{{ 'popup.accept.body'|trans( {} , 'bundle' )|escape('js') }}');
return confirmResponse3;
});
I'm trying to submit a little contact form.
Here is my jquery to POST:
<script>
$(document).ready(function(){
function submit_contact()
{
$.post("http://www.domain.com/wp-content/themes/toronto/handlers/contact.php", {
contact_text: $("[name='contact_text']").val(),
contact_email: $("[name='contact_email']").val(),
}, function(data){
console.log( data );
});
}
});
</script>
Here is my html that handles the form:
<form method="post" >
<textarea id="contact_me_text" name="contact_text">Ask me anything!</textarea>
<div>
<input type="text" name="contact_email" value="Email"/><br/><br/>
<a id="contact_submit" href="javascript:submit_contact()">Submit</a>
</div>
</form>
Everything seems to look ok but the form is not submitting. I've run the .php file through a regular submit and it works fine.
Any thoughts?
You need to declare your function outside of $(document).ready() and then call it using anything.
Why can't I ?
As Local Variables cannot be accessed from outside, similarly local functions cannot also be accessed.
Try this:
<script>
$(document).ready(function(){
function submit_contact()
{
$.post("http://www.domain.com/wp-content/themes/toronto/handlers/contact.php", {
contact_text: $("[name='contact_text']").val(),
contact_email: $("[name='contact_email']").val(),
}, function(data){
console.log( data );
});
}
$('#contact_submit').on('click', function(){
submit_contact();
return false;
});
});
</script>
and then remove the JS inside HREF attribute.
You need to declare the function outside ready function of jQuery. Moreover you can use serializeArray to determine data to send. By using this you will not need to mention every control name. On server side you can receive the input with same names you have mentioned in your form.
function submit_contact()
{
var params = $("#formId").serializeArray();
$.post("http://www.domain.com/wp-content/themes/toronto/handlers/contact.php", params, function(data){
console.log( data );
});
}
I want to perform an onclick and onsubmit at the same time, is this possible? Or if this is bad practice how can I merge the two codes to perform both events?
I have this piece of code checking a mandatory field on the form tag:
onsubmit="return formCheck(this);"
I then have this piece of code on the submit button for the same form:
onClick="jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"
The problem I have is that on clicking the submit button it completely ignores the onsubmit code. How can I merge them together?
UPDATE I want it to check the mandatory fields first then send the form if all is ok.
UPDATE: I've pasted the whole code here, I'm really struggling as this was done by a previous developer. If someone could literally put the solutions into the code that would be great. I'll up the reward.
Put your onClick code in the same function as the onSumbit code.
UPDATE
At the end of your onClick code you return false;, this stops the normal propagation of events and stops the onSubmit event from firing. So if you want the submit button to submit the form, remove return false; from it's onClick handler.
When you click a submit button you will fire a click event on the button and a submit event on the form in which the button is nested (unless you stop the propagation of events with something like return false;).
So you really only need a submit event handler that does the job of both of your current handlers.
Also since it appears that you have jQuery Core included in your page you can attach event handlers like this:
$(function () {
$('#form-id').on('submit', function () {
var $this = $(this);//$this refers to the form that is being submitted
jQuery.facebox({
ajax : 'wishlist.php?emailme=true&name=' + $this.find('#name').val() + '&country=' + $this.find('#country').val() + '&email=' + $this.find('#email').val() + '&department=' + $this.find('#department').val()
});
//now we run your normal onSubmit code and return it's return value of this event handler
return formCheck(this);
});
});
If you are sending the whole form to the jQuery.facebox function then you can use jQuery's .serialize() function to create the necessary query-string:
$(function () {
$('#form-id').on('submit', function () {
jQuery.facebox({
ajax : 'wishlist.php?' + $(this).serialize()
});
return formCheck(this);
});
});
Here is a demo: http://jsfiddle.net/vAFfj/
Docs for .serialize(): http://api.jquery.com/serialize
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind() of older versions.
UPDATE
If you want to check the return value from the formCheck() function before running the facebox plugin then you can do this:
$(function () {
$('#form-id').on('submit', function () {
//check if the form data is valid
if (formCheck(this) === true) {
//if the form data is valid then run the facebox plugin
jQuery.facebox({
ajax : 'wishlist.php?' + $(this).serialize()
});
//also return true to stop running this function
return true;
}
//if the form data is not valid then return false to stop the submission of the form
return false;
});
});
Make the onclick function submit the form.
Not sure if you have a specific requirement for using both onSubmit() and onclick(), but this might help.
Here's the HTML:
<form id="my_form">
Name: <input type="text" id="name" size="20" />
<br />Country: <input type="text" id="country" size="20" />
<br />Email: <input type="text" id="email" size="20" />
<br />Department: <input type="text" id="dept" size="20" />
<br /><input type="submit" id="submit" value="Login" />
</form>
And here's the JS:
$(document).ready(function() {
$('#my_form').submit(function() {
var name = $('#name').val();
var country = $('#country').val();
var email = $('#email').val();
var dept = $('#dept').val();
/* Validate everything */
if (name != '' && country != '' && email != '' && dept != '') {
/* Validation succeeded. Do whatever. */
jQuery.facebox({
ajax : 'wishlist.php?emailme=true&name=' + name + '&country=' + country + '&email=' + email + '&department=' + dept
});
}
else {
alert('Validation failed.');
}
return false;
});
});
Now, you can do two things:
1) If you're using AJAX to do your form stuff, you might want to keep the return false; in the second-last line, as this will prevent your form from submitting.
2) If you want to post your form anyway, just remove return false;. You can also post your form using $('#my_form').submit() whenever you want.
Here's the fiddle:
http://jsfiddle.net/vAFfj/1/
Hope this helps.
I suggest you to write a separate function which do the same task as onClick event.
First check if all required fields have been entered on onSubmit event, if no return false else if all required fields have been entered call the function which perform the same job as function in 'onClick' event.
First of all, you don't need both actions. In your scenario you only need to use the onSubmit attribute on the form tag.
Second, it would be a lot better (for too many reasons) if the actions on the attributes would contain references to functions, and not inline code.
That said, I would change the code as follows :
//some js file included in the page's header
function formSubmitActions(element) {
if (formCheck(element)) {
jQuery.facebox({
ajax : 'wishlist.php?emailme=true&name=' + element.name.value
+ '&country=' + element.country.value
+ '&email=' + element.email.value
+ '&department=' + element.dept.value
});
return true;
}
return false;
}
//the form
<form [...] onsubmit="return formSubmitActions(this)">
[...]
Hope it helps!
there are 2 issues in your code,
1 - form can be submitted by pressing "enter" on any input field. so the onclick event wouldn't be triggered.
2 - if the user clicks the button (assuming you've added a few hacks and both the onclick and onsubmit events are triggered), but the formcheck returns false, the form wouldn't be submitted, but the click event will be successful (you'll have a request sent to wishlist.php)
my suggestion would be as below,
onsubmit = "readyToSubmit(this); return false"
function readyToSubmit(a){
if(formCheck(a)){
jQuery.ajax({
url : ...,
success : function(data){a.submit()}
})
}
}
You submit form in the onclick event now (jQuery.facebox({ ajax:) so simple move this to on submit event handler (in the bottom of formCheck function after all validations passed)
.click(function(e)
{
e.preventDefault();
// click code
});
.submit(function(e)
{
// submit code
});
and ajax async param to FALSE
Why not just make put them together? the submit will occur on submit and on click so you can do
onsubmit="return formCheck(this);jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) }); return false;"
You can do one thing, just write code for submitting your form, like $('#form_id').submit();, instead of return false;. So it will submit the form, after completion of .onclick() code functionality.
Try combining the two like this:
onClick="if (formCheck(this)) { jQuery.facebox({ ajax: (\'wishlist.php?emailme=true&name=\' + this.form.name.value + \'&country=\' + this.form.country.value + \'&email=\' + this.form.email.value + \'&department=\' + this.form.department.value) });} return false;"
i have this form:
<form id="myform" name="myform" action="test.php" method="post">
<input type="text" name="shout-in" id="proShoutIn" maxlength="80" />
<img src="post.gif"/>
</form>
how can i do a ajax post so that i can use if (isset($_POST['shout-in'])){..do something..}?
i need to get the value that gets entered in the <input> and do a post with it.
any ideas?
thanks
$('#add_shout').click(function () {
var $form=$('#myform');
$.post($form.attr('action'), $form.serialize());
});
$.post() - $.ajax() shorthand for the POST method
.serialize() - creates a text string in standard URL-encoded notation
With the 3rd (optional) parameter of $.post() you can specify a callback function which will receive anything that was sent back as its only parameter. It will run when the AJAX query successfully finished (so you can do DOM modifications that depend on the AJAX call, etc.).
You also might want to prevent default form submission (in a lot of browsers pressing Enter in the input field would trigger it) and run the AJAX submission:
$('#myform').submit(function (e) {
$('#add_shout').click();
e.preventDefault();
});
$.post("test.php", $("#myform").serialize(),
function(data) {
// do something with the response
}
);
$("#myform").submit(function (e) {
$.post(this.action, $(this).serialize(), function (data) {
//handle response
});
//prevent form from submitting. In jQuery, do not use return false
e.preventDefault();
}
Nettuts plus:
Submit A Form Without Page Refresh using jQuery
i made this form:
<form id="form" name="msgform" method="" action="">
<input type="text" size="40" id="msg" name="message"/>
<input type="submit" id="button" name="clicker" value="click" />
</form>
and this jquery script:
$(document).ready(function(){
$("#button").click(function(){
$("#form).submit(function(){
var submision= $("#form).val();
$.post("txt/process.php", submision, function(data){
alert(data);
});
});
});
});
and this is the process.php file:
<?php
echo $_POST['message'] . "";
?>
now when i click the button the form is submited, but it sends it using the GET method because i can see it in the adress bar, but it never gets sent to the php file, and i checked to see if the names are correct and if i specify the POST method it still doesnt go to the php file.
is the server or browser ignoring the code? or am i doing the whole thing wrong?
thanks
Please find the following code, it works and please go through with the documentation, it will tell you that what the mistake was being done.
$(document).ready(function(){
$("#button").click(function(){
$("#form").submit(function(){
/* var submision= $("#form).val();
THIS DOESN'T WORK TO GET ALL OF THE ELEMENTS IN
FORMAT TO PASS TO $.post EVENT,
We can do this as I did in following example
*/
$.post("txt/process.php", { msg: $("#msg").val() }, function(data){
alert(data);
});
/* Also you didn't put return false statement just at the end
of submit event which stops propagating this event further.
so it doesn't get submitted as usually it can be without ajax,
So this stops sending the form elements in url. This was because
by default if you define nothing in method property for form
then it consider it as GET method.
*/
return false;
});
});
});
Let me know please you are facing any issue.
You don't need to register the submit event for the form inside the click handler of the button. As it is a submit button it will automatically try to submit the form for which you register the corresponding handler:
$(function() {
$('#form').submit(function() {
// Get all the values from the inputs
var formValues = $(this).serialize();
$.post('txt/process.php', formValues, function(data) {
alert(data);
});
// Cancel the default submit
return false;
});
});
$("#form).submit(function(){
see if this selector is missing a "
$("#form").submit(function(){