I need some help with sequencing (not sure if this is the right term) two jQuery functions so that both can co-exist together.
What I am trying to do is to add a new functionality that makes a field uneditable to the users, like disabled="disabled". Catch is that if I only apply disabled="disabled" to the filed the form will not send its value with the form submit.
Therefore, I have written some JS code, which enables the fields prior submitting and permits that their values are sent when form is submitted.
All works fine once the page is loaded.
Problem is when the user leaves one of the mandatory fields blank and tries to submit the form. Then there is another jQuery that fires - to validate the field contents.
This second validation function triggers the enable field function and all fields become editable again.
Need some help on how to prevent the second function to override the enable one.
Here is the code - the enable function is placed right before the form like this:
<script>
jQuery(function($) {
$('form').bind('submit', function() {
$(this).find(':input').removeAttr('disabled');
});
});
</script>
<form name="RegFrm" id="RegFrm" action="" method="post">
<select class="validate[required] text-input" disabled="disabled">
<option value="">Please Select</option>
</select>
<input name="sbtFrm" type="submit" value="Submit" />
</form>
And here is the second field validation function that is placed on a separate file. It is being invoked from files_include.php every time the page loads:
var genVar = jQuery.noConflict();
genVar(document).ready(function(){
genVar("#RegFrm").validationEngine();
});
How can I prevent the second function triggers the first one?
Thank you?
Thank you all for the comments. Although, no solution proposed you guys gave me an idea how to fix it.
I basically decided to check on form submit if form validates and only if true, then the enable function triggers.
This is the code:
jQuery(function($) {
$('form').bind('submit', function() {
if($("#RegFrm").validationEngine('validate')){
$(this).find(':input').removeAttr('disabled');
};
});
});
Related
I have two list boxes that I can move items to and from using jQuery. A summary of the code follows:
<select multiple size="10" id="from">...</select>
<select multiple id="to" size="10" name="subitted array[]">...</select>
Some buttons that when clicked move the items from the above list boxes:
>...
<
<<
The jQuery functions:
function moveAll(from, to) {
$('#'+from+' option').remove().appendTo('#'+to);
}
function moveSelected(from, to) {
$('#'+from+' option:selected').remove().appendTo('#'+to);
}
I also have the following function that I call on submit:
<form name="selection" method="post" onSubmit="return selectAll()">... </form>
function selectAll() {
$("select option").attr("selected","selected");
}
But this only returns by POST the values in the right list box. I would also like to submit other fields present in the form (e.g. hidden fields). How can I do this?
Many thanks.
If your dropdown lists are inside your form, you dotn need any special treatment, just submit your form and all fields inside it, will be send to your controller.
In JS:
$('#formId').submit();
In your html:
<button type="submit">Send</button>
Any of this 2 options would suit your problem, if i understand workgly your problem, please let me know.
Also you should remove this code "onSubmit="return selectAll()" and leave form submit work normally, will send all your data into the form
I need to update (submit) form without refresh. I know it should be done using Ajax, so I found many examples on this website, but none of them was useful in my case. Here's the catch - I don't need to display any "success" or similar messages when form was submitted, I need to display exactly the same form, but with new values.
Examining examples on this site, I got it working, but when form is submitted via ajax (this part works fine), I see two forms displayed. Here's the example - http://www.lipskas.com/form/ (the whole source is available to view)
What should I change here?
P.S. If I change "$('#msg').html(html);" to "$('#myForm').html(html);" duplicated form doesn't appear, except one "little" problem - the form can be submitted only for the 1st time. Then no more values are properly submitted.
In case you are interested why I need to display exactly the same form (but with updated fields) again, it's because I built some type of calculator which has many fields, and when user updates ANY field, re-calculations are made ( http://lipskas.com/bandymas/ )
Get rid of the "onclick" in the submit button and add this in the header above the chk function
<body>
<form id="myForm">
<input type="text" name="username" value="submitted - "><br/>
<input type="text" name="password" value="submitted - "><br/>
<select name="some_array[1]"><option value="1">1</option><option value="2">2</option></select>
<select name="some_stuff[2]"><option value="3">3</option><option value="4">4</option></select>
<input type="submit" name="submit_ok" value="test me">
</form>
</body>
function chk(this)
{
$.ajax({
type:"post",
url:"index.php",
data: this.serialize(),
cache:false,
success: function (html){
$('body').html(html);
}
});
}
$(function(){
$("body").on("submit","#myForm",function(){
chk($(this));
return false;
});
});
I have the following form as part of my webpage:
<form id="collabAccess" onsubmit="submitCollabForm()" >
<div id="row-1">
<div class="two-col" id="email"><input type="text" placeholder="Enter email addresses separated by commas"/></div>
<div id="collabSelect" class="collab two-col styled-select">
<select id="collabaccess">
<option>Can Read</option>
<option>Can Write</option>
<option>Can Read & Write </option>
<option>Administrator </option>
</select>
</div>
</div>
<div id="message">
<textarea id="personalMessage" cols="154" rows="10" placeholder="Optional: include a personal message"></textarea>
</div>
<div id="submit-wrapper"><input type="submit" value="Add Collaborators" id="addCollaborators" disabled='disabled' class="small-btn disabled"/></div>
</form>
The function submitCollabForm() is as follows:
function submitCollabForm() {
console.log('in submitCollabForm');
var valid = validateEmails();
if (valid == false) {
var email = document.getElementById('email');
email.addClass('error');
}
}
where validateEmails() is just another js function for validating that the email addresses int he form have the correct format.
However, it looks like onsubmit is not being called at all. Even if I change things to onsubmit="console.log('xyz'), no console statement is being output. I've also checked for javascript errors in the console, but I am getting nothing.
Is there any reason why onsubmit is not working properly?
Your validation function needs to return false to stop the form from submitting. It's better to have
onsubmit="return submitCollabForm()"
See With form validation: why onsubmit="return functionname()" instead of onsubmit="functionname()"? for details.
The onsubmit handler is not called, because the form cannot be submitted by any normal means, i.e. the submit event cannot be caused. There is only one submit control, and it is declared as disabled.
if you feel all code is correct still it's not working then,
Simple steps to do,
1) create one script tag in the same page where your form is, create one function and set one alert and test it. If it is working then try following steps.
2) Try to check the path of your javascript file.
3) if path is correct, then change the name of your javascript function sometimes your name tag conflicts with your function name, and submit points to it, so your call is not reaching at your function. It happened with me. so I posted it here, hope it will be helpful to someone.
So I have these forms:
django template:
{% for F in forms %}
<input type="text" name="name/>
<input type="number" name="number/>
<input type="submit" class="button" [onclick="this.disabled=true,this.form.submit(); ??]> #how can I make this work?
{%endfor%}
What the template code does is render out multiple forms based on the value of forms> I want the user to submit the form and then have the form either disappear(preferable) or at least disabled so that they can resubmit. How can I do this?
If you have multiple forms on the page and want to handle them with JavaScript, I would suggest you to use jQuery. You could make something like:
$('input[type="submit"]').click(function() {
// here comes your logic
// and the next line removes the corresponding form
$(this).parents('form').remove();
});
But as Marc B pointed out, you should submit the form via Ajax. I don't know what do you intend to do with the user input, but if you want to use Ajax then you could make something like:
$('form').submit(function() {
$.ajax({
// your logic
});
});
Check the official documentation of jQuery for more details and adapt the examples to your needs.
EDIT:
if you want to prevent the form from submitting and refreshing the page, please change it slightly to:
$('form').submit(function(event) {
$.ajax({
// your logic
});
event.preventDefault();
});
I have a form which has fields pre-filled with a default value, like this:
<input type=text name=first value="First Name" class="unfilled" />
When the textbox is clicked, the class unfilled is removed from the textbox, and the textbox is made blank so the user can type in his/her own info.
The problem is that when the form is submitted, its getting submitted with these default values, which is messing up the server side validation. How can I do it so that when the form is submitted, all the fields which have a default value are made blank, so the server side validation would throw the error: 'Please fill in this field'?
I'm trying the following code which isn't working:
$("#myForm").submit(function()
{
$(".unfilled").val('');
}
);
This does make the fields blank, but the server still receives them with their previous default values.
I think you simply have a syntax error. You're missing the closing parenthesis on your submit method.
I just whipped this up and it works fine
<!DOCTYPE html>
<html>
<body>
<?php
var_dump($_POST);
?>
<form action="test.php" method="post">
<input type="text" name="first" value="First Name" class="unfilled">
<input type="submit">
</form>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(function($) {
$('form').submit(function() {
$('.unfilled').val('');
});
});
</script>
</body>
</html>
You need to stop the form execution first, change the values, and then manually submit the form.
$("#myForm").submit(function(e)
{
// Stop the form submit
e.preventDefault();
$(".unfilled").val('');
$(this).submit();
}
You have to return true; if you want the form to submit, or false, if you don't.
The problem with this approach is that the fields will 'blink' before posting the values, thus creating a bit of unprofessional feel.
It is better to use hidden values and set them in submit() event.
I think you need the .click() function of JQuery.
Example:
$(function () { // shorthand for document.ready
$('.unfilled').click(function () {
$(this)
.val('')
.removeClass('unfilled');
})
});
UPDATE
Sorry, i missunderstand you, thought you need a feature like a placeholder.
Of couse you can do it with return false;, but this cancel the submitting. Or like GreenWebDev says to use e.preventDefault();.