0

How can I prevent parts of a form on my page from submitting based on the width of the page?

i.e. if the page is between 900px and 1200px only form input/select items with class .regular-form would be included in the form submission.

Mi-Creativity
  • 9,554
  • 10
  • 38
  • 47
CRAIG
  • 977
  • 2
  • 11
  • 25
  • You have a couple of solutions but I'd say more details are needed to fully understand how you imagine this would function. – Serg Chernata Dec 27 '16 at 20:00
  • The way your question is stated, the feature does not make sense. I'm *guessing* that this is a responsive form, and the reason you don't want those inputs submitted is because they're not visible at that width. If so, you should not duplicate the "should I display this input?" logic into "should I submit this input?" logic. Instead, use CSS media queries to show/hide them, and use JS to say "do not submit the ones that are hidden." Eg http://stackoverflow.com/questions/1374147/how-to-avoid-sending-input-fields-which-are-hidden-by-displaynone-to-a-server This will be much easier to maintain. – Nathan Long Dec 27 '16 at 20:03

2 Answers2

2

You can make sure that the relevant elements are not part of the DOM, and this will make sure they will also not sent in the submission.

You can use this code to do so:

if($(window).width() > 900 && $(window).width() < 1200) {
    $('input,select,textarea').not('.regular-form').remove()
}
Dekel
  • 60,707
  • 10
  • 101
  • 129
  • I think it should be `not('.regular-form').remove()` according to the OP – Mi-Creativity Dec 27 '16 at 20:02
  • Not a JS Master by any stretch. So, would this be workable code? `` – CRAIG Dec 27 '16 at 20:31
  • Remove the `type="javascript"`. you don't need it. And the syntax looks ok. Don't forget to include the jquery library (and I think you are missing some of the width values, for example 990). Try it and update. – Dekel Dec 27 '16 at 20:33
  • Yes for sure. Thanks for taking the time to answer and for confirming my code as well. Much much appreciate it! – CRAIG Dec 28 '16 at 01:15
  • Hey Dekel. To clarify... Isn't this script removing ALL input, select and textareas if those text areas are NOT .regular-form? So that if the script shows up on another page of the site and there are other form elements on that page those will be removed from the page? If so, how would I make sure it ONLY removes the .shorter-form and the .shortest-form items? – CRAIG Jan 04 '17 at 01:32
  • This will first find all the `input,select,textarea` elements. Then - for each and every one of them - if it is not a `.refular-form` - it will delete it from the page. – Dekel Jan 04 '17 at 01:35
  • Ok, so that is actually a problem then as it is deleting elements I don't want deleting. The class of the entire form is .thequickie so I tried this : `$( '.thequickie' ).children('input,select,textarea').not('.regular-form').remove(); ` but it isn't working. Does it look right to you? Basically I am only wanting to remove elements WITHIN that form ONLY that are not regular-form. – CRAIG Jan 04 '17 at 03:03
  • Create an example of the form, the buttons, the elements and add a link in an comment. You can use http://jsfiddle.net for that – Dekel Jan 04 '17 at 11:53
  • Roger that! Here you go: https://jsfiddle.net/nk4Lyu9w/ In this case, the current JS will ALSO remove the second form on that page (and another other forms on any page the JS exists.) So, I want to make sure that it ONLY applies to the forms within that search bar. – CRAIG Jan 04 '17 at 17:00
  • I don't see where you used there the code from the comments (the part with `.thequickie`) – Dekel Jan 04 '17 at 17:56
  • https://jsfiddle.net/ebgv2m1c/5/ Doesn't use the term quickie, but uses .main-form instead. Same idea. – CRAIG Jan 04 '17 at 19:10
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/132336/discussion-between-craig-and-dekel). – CRAIG Jan 04 '17 at 20:19
0

I don't know if you need to account for the window being dynamically resized or not, so a simple solution would be something like this:

if($(window).width() > 900 && $(window).width() < 1200)
{
    $('.regular-form').prop('disabled', false);
}
Serg Chernata
  • 12,280
  • 6
  • 32
  • 50