0

I have a form which I submit manually (using JS) and it makes the querystring direct since it appends it with all the controls id (weather they have value or not) I read somewhere that I can avoid this by disabling the controls that have no values, before submitting the form.

Hence, In my form I have text box, checkbox and select (dropdowns), I am trying to write an inline query which will get all the select which have no option/values selected from its list :

This $('form').find('select option:selected[value!=""]') somewhat works but this $('form').find('select option:selected[value=""]') doesn't at all.

Any help would be appreciated.

foo-baar
  • 1,076
  • 3
  • 17
  • 42
  • Is the overall issue that you don't want the form to be submitted using a GET (resulting in all the vars being in the query string)? You can avoid this by using the POST method in your javascript instead. – Twicetimes Oct 14 '14 at 14:30
  • A quick search reveals this: http://stackoverflow.com/questions/10651349/how-to-select-empty-inputs-value-using-jquery - Now we just need to turn it around like this: `jQuery("select").filter(function(){return this.value;})` – somethinghere Oct 14 '14 at 14:31
  • @Twicetimes: Its a records filter page and the site functionality needs the user to be able to share the filtered results, hence used GET. – foo-baar Oct 14 '14 at 14:37
  • Ah ok, in that case I think @owenconti has the answer for the – Twicetimes Oct 14 '14 at 14:39
  • @somethinghere : this.value doesn't work on select types. – foo-baar Oct 14 '14 at 14:43

1 Answers1

1

This is straightforward to do on form submission, by inspecting each element in the form. Make sure that you provide a way for users to actually re-enable the disabled form elements.

A working code would be:

$("#testForm").on("submit", function() {
    $(this).find('select option:selected[value=""]').parent().attr("disabled", "disabled");
    alert("ok");  // for debug purposes
    return false; // this stops the form from actually being submitted
});

Here's a working fiddle that demonstrates widget disabling:

http://jsfiddle.net/sw6v928m/3/

Edit: Updated to actually select disabled elements

Edit 2: Updated to compact the code a bit, after request from the OP

Filippos Karapetis
  • 4,367
  • 21
  • 39
  • The example looks good, can this be done is single line as well ? no I guess ? – foo-baar Oct 14 '14 at 14:48
  • Wow this is beautiful, so I was missing .parent() yea ?? – foo-baar Oct 14 '14 at 15:01
  • I'm not sure what you were missing, you never posted your complete source code :) But you want to target selected values, and disable the actual parent element that holds these values (which, in this case is the select list itself), in order to disable it – Filippos Karapetis Oct 14 '14 at 15:04
  • In the original question I mentioned that I tried $('form').find('select option:selected[value=""]'), anyhow thanks for pointing me to right direction. – foo-baar Oct 14 '14 at 15:05