jqgrid - how do not show edit form if condition not met - javascript

Another jqgrid question. On my page i got a select drop down. If nothing is selecting and the user click to add record, the edit form should no popup. I can't seems to find how to do this in google. Here is what I have:
afterShowForm:function(formid) {
if ( ($('#listbox').val()) == "" ) {
alert('Please select an option.');
$('#'+formid, form).hide();
return false;
}
}
The above code is not working. It actually got error - form is not defined. Should I be using afterShowForm or is there a more proper way to do it.
Thanks.

Ok guys. I found a 'solution' but I am not sure if that is the best way to do it (I think it is not :) ) but it gets the job done.
Instead of using formid pass in through the function, I have view source and get the id of the edit form id. For my case the id is #editmodmy_table. So to hide the form from showing, I just use jquery to do it.
$('#editmodmy_table').hide();
Other than that, we have to get rid of the overlay that is attached to the edit form modal as well. Hiding the edit form don't hide the overlay automatically. So we have to do this:
$('.jqmOverlay').hide();
Hope this helps someone.
Please post a better solution to this if any. Thanks.

The error in this code means that the variable 'form' is not defined.
If I understand this correctly that variable is not needed.
To find the form and hide it you could try something like this instead:
$('form#'+formid).hide();

Related

Form validation not running onsubmit

I am trying to run a form validation on an HTML form to make sure the person has filled out the two fields. I put together a JSFiddle here:
http://jsfiddle.net/yCqqj/
It has worked previously for me and I don't know what's going on now. I made a JSFiddle to pull it out of my site to make sure nothing else was conflicting with it but I'm realizing now that it's something in the code. The two fields are name "emailaddress" and "Name" respectively and it looks like I'm checking their values correctly. Basically, I'm looking for an alert (and NOT a submittal of the form) if they've left either field blank. Thanks for helping me track down the problem. I appreciate it.
function ValidateForm(){
var emailID=document.MailingList.emailaddress
var nameID=document.MailingList.Name
if ((nameID.value==null)||(nameID.value=="")){
alert("Please Enter your Name");
nameID.focus();
return false;
}
if ((emailID.value==null)||(emailID.value=="")){
alert("Please Enter your Email ID");
emailID.focus();
return false;
}
}
​
Even though there is not return true, the form still submits.
the problem is that you haven't defined ValidateForm in the Head section.
i have edited the jsfiddle.check demo.
I can see two problem:
First, what is echeck? If I take that code away it will work.
Second you should not do return after your control of the nameID.value. If you do that your control of the emailID.value will not be done.
To piggyback on Behnam's answer, it is because ValidateForm isn't defined in the head section as he said. But here's how to fix it:
In jsfiddle, in the upper left area in Frameworks & Extensions, set it to no-wrap . Then update and set as base to save your changes.

The state of checkbox looks updated, but it is not updated actually

I have strange issue. I am developing something for Magento. I added link "Select all categories" and add a jQuery event to check all checkboxes when I click on it. It works great, but somehow the html is not updated and Magento can't see that all inputs are selected. But when I manually click on a checkbox, it updates html (I am looking at the console) and Magento save button works just fine.
How to resolve this issue? I am not sure what else should I do to perform updating html. It look like it works (checkboxes are selected), but please take a look at the console and html. Html must be updated.
I created jsfiddle: here
try this:
.attr('checked', 'checked');
Just check all checkboxes, like this .
Your is(':checked') IF statement seems wrong as it should be enclosed on an .each() so it applies to all checkboxes, try the more simple approach on the fiddle I linked.
Did you try prop('checked', true); instead of prop('checked', 'checked'); ?
That's what I see in all the examples.
I figured it out. It was Magento issue. Magento doesn't use that form, it uses hidden input and collects selected checkboxes. Will upvote all answers anyway. Thanks
You can use something like :
// custom jQuery added
jQuery(function() {
var to_check = false;
jQuery(".select-all-categories").click(function(){
if (!to_check)
to_check = true;
else
to_check = false;
jQuery("#banner-categories input[type=checkbox]").each(function(){
if (!to_check)
jQuery(this).removeAttr("checked");
else
jQuery(this).attr("checked","checked");
});
return false;
});
});
Code can be optimized

Form Validation event issue

So I'm trying to write an interactive form, where clicking a radio button will unhide another field in the form. It is for display purpose, so I'm not submitting anything. I'm attempting to use Javascript to validate, but needless to say, it's not working very well. A run through of my code would be appreciated.
Since it's so much code, I'll pastie it to you for convenience...
http://pastie.org/3615669
Thanks :)
Your code:
function getShrimpa(radio, name, ext){
//Use of form 'shrimpa'.
var form = document.shrimpa;
document.form.name.style.display = 'block'; // <---- this is not valid
document.getElementById('shrimpa').innerHTML = ext;
}
You cannot use the variable name like that. It's a string and it will not get "replaced" or whatever you were hoping would happen. You'll need to use document.getElementsByName(name) to select that element. But that will give you a node list so you probably want to use ids instead there.

Need help populating 2 form fields using a link?

I have a form with 2 input fields. With the click of a link I would like to populate these 2 form fields. I posted on jsfiddle ( http://jsfiddle.net/6AMNb/9/ ) what I have so far but I believe my syntax is incorrect somewhere. Any help would be HUGELY appreciated! Thanks, Mitch
.populate() is not a default method of jQuery. You need to include the Populate plugin.
Here is an example of populating the form inputs: http://jsfiddle.net/jasper/6AMNb/12/
I added the following code to your click handler for the .AddCart link.
$('#QOCode').val('ML10854');
$('#QOQty').val('1');
--UPDATE--
I changed the code to increment the quantity on subsequent clicks of the .AddCart link: http://jsfiddle.net/jasper/6AMNb/14/

Setting the "type" attribute of an input does not work with jQuery attr() method

I looked into previous questions, but they didn't seem to answer what's happening to me.
In my real code i'm creating a form on the fly and adding to it two buttons, one for submission and another for other function. For this I'm setting the "type" attribute of the buttons to "submit" for one and "button" for the other. The problem is that in Chrome both buttons submit the form.
Code for the form:
form = $(document.createElement('form')).attr('method', 'get').attr('action', defaults.action).appendTo(object);
Code for the buttons:
form.append(
$(document.createElement('div')).
attr('class', classesHash.buttonsContainer).
append(
$(document.createElement('button')).
attr('type', 'submit').
addClass(classesHash.submitButton).
attr('title', i18n('Filter')).
attr('value', i18n('Filter')).
append(i18n('Filter'))
).
append(
$(document.createElement('button')).
attr('type', 'button').
addClass(classesHash.addButton).
attr('title', i18n('Add filter')).
attr('value', i18n('Add filter')).
append(i18n('Add filter')).
click(addFilter)
)
);
I made a more simple test with this HTML code:
<form action="" method="get"><button id="test">test</button></form>
When Chrome doesn't finds a submit button, any button submits the form.
The following doesn't works, the form gets submitted on button click:
$('#test').attr('type', 'button');
The following does works, the form does not submit on button click:
document.getElementById('test').setAttribute('type', 'button');
The form and the button are being generated dynamically and I'm using jQuery so attr() is the most obvious method. Is something wrong with the jQuery core and Chrome's JS specification? It works fine in Firefox. Thanks a lot.
First, the correct approach:
To do what you want in this case, go with the vanilla JavaScript solution, but test it in IE!
The why:
The reason type doesn't work is because it fails in IE (you can't chagne the type of an input after it's added to the DOM, and it's handled in this same way), so jQuery throws an error when you try. It does this specifically for <input> and <button> elements when changing the type attribute.
If you look in your console you'll see this:
Error: Uncaught type property can't be changed
Here's a quick test showing this, check the console to see the error jQuery throws.
Use prop instead of attr. It`ll work for sure.
Please look at the below sample code:
$("input[name='email']").focusin(function() {
console.log("alert");
$('#email').prop('type','number');
});
Let me know your thoughts on this.
Thanks
jQuery is working fine for me in Chrome ... all the functions I've thrown at it today are running just fine, including .attr()...
I'm not 100% sure what you're asking, but I think you're asking about preventing the submission of a form with a button click in Chrome. If that is the case, why not use preventDefault?
$("#test").click(function(e) {
e.preventDefault();
//more work here....
});
EDIT:
I agree with Nick that in order to do what you are trying to do, go with the straight JavaScript approach. But in that case, you're applying attributes to a button that don't make sense (or at least aren't valid). Since you're already using jQuery, why not handle it properly and prevent the default action of a button click in a form?
So this post was helpful to me, but my solution was to clone the button in question and replace it
$new = $(this).clone();
$new.attr('type','hidden');
$this_form.append($new);
$(this).remove();

Categories