how to send non empty inputs when form submit is done with jQuery?

Question

There is a way to send only non empty inputs (( those who value is not equal to "" )) when user do form submission?

i wanna to acheive this cuz my site offers forms to filter data, and use GET method to indicate query string in the url, but clearly something like this

site.mx/voucher/search/?id=1,2,3,4&date_from=&date_until&comment=&status=6

will be much more prettiest in this way

site.mx/voucher/search/?id=1,2,3,4&status=6

ty ;)

Does it matter what the URL looks like when you're submitting the form with jQuery (I assume you're talking about ajax here) ? — adeneo
– adeneo, Commented Mar 22, 2014 at 0:31
it matter for me, i like perfection* or at least aspire to her — AgelessEssence
– AgelessEssence, Commented Mar 22, 2014 at 0:33
is not an ajax function, is the classic process when user push submit button and then, the form is submitted ;) — AgelessEssence
– AgelessEssence, Commented Mar 22, 2014 at 0:35

bdb.jack · Accepted Answer · 2014-03-22 00:38:26Z

2

Based on what you're saying, you could possibly do something like this with jQuery:

jQuery(function() {
    jQuery(form).on('submit',function(e) {
        e.preventDefault();
        var urlSuffix = '';
        jQuery(this).find(input).each(function() {
            if(jQuery(this).val() !== '' && jQuery(this).val() !== null) {
                if(urlSuffix == '') {
                    urlSuffix += '?';
                } else {
                    urlSuffix += '&';
                }
                urlSuffix += jQuery(this).attr('name') + '=' + jQuery(this).val();
            }
        });
        window.location = 'site.mx/voucher/search/' + urlSiffix;
    });
});

This function first disables your form's "default" submit action, then adds all of the form's fields to the URL and redirects.

However the simpliest method is to simply point the form's action to: site.mx/voucher/search/ and change the method to "GET"

answered Mar 22, 2014 at 0:38

bdb.jack

1471 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

williambq Over a year ago

Yeah, or I guess you can do this! Intercept the browser behaviour and effectively create a poor-man's ajax. +1

AgelessEssence Over a year ago

yea, i like this approach, maybe it can be enhanced disabling empty fields before form submit is done, and enable again when form is already submitted. (( it will provoke send only non empty fields ))

bdb.jack Over a year ago

There really isn't any need to since the page isn't being re-rendered. It's being re-loaded with different parameters in the $_GET array. Technically, if you want the query to be EXTREMELY clean, you could run the entire thing with $_POST or $_REQUEST instead of $_GET, and have the form simply submit to # or nothing at all (action="")

williambq Over a year ago

Yes, if you use this approach, you do not actually SUBMIT the form. You are redirecting the page with a 'GET' url you have composed of the form elements that have values. Thus, when the page returns, the form fields should be blank. However, if you have other code that reads any URL values and resets the form values (to show what was searched, for instance), then you need to handle that.

H Aßdøµ · Accepted Answer · 2014-03-22 00:58:21Z

1

You can do this by selecting only non empty fields using a CSS selector:

$("form#search :input[value!='']").serialize()

I can't comment due my reputation is still under 50, but can you show us how you submit the form?

edited Mar 22, 2014 at 0:58

answered Mar 22, 2014 at 0:38

H Aßdøµ

3,0555 gold badges30 silver badges37 bronze badges

1 Comment

AgelessEssence Over a year ago

i want to use the native form submit event ;)

williambq · Accepted Answer · 2014-03-22 00:40:28Z

0

If your form action is a 'GET' and you are using the browser's native form post/get action to do that, you can't rewrite your browser behaviour (well, maybe you can, but you can't control every one else's browser).

If you DO want to use ajax and manually call the submission form via js/ajax, you can rewrite your URL query string and post that cleaner version. Otherwise.....

answered Mar 22, 2014 at 0:40

williambq

1,1257 silver badges12 bronze badges

3 Comments

AgelessEssence Over a year ago

im thinking in catch* the submit event, disable empty fields, and when form is submitted, then enable empty fields again

williambq Over a year ago

If you 'catch' or preventDefault the submit, you won't actually be submitting the form. Bdb.jack's approach, which is not bad, is effectivly a redirect that loads a 'new' requested page with appended form values (which is what a 'GET' action looks like. Form actions are more often 'POST' actions). So you do not need to disable any form fields. You simply evaluate empty ones and the page is effectively 'reloaded' (via GET method).

williambq Over a year ago

If you do a true ajax, you also are not actually going to submit the page but make a separate request that takes action, returns something, and then you update/change your screen as desired via js depending on the results and logic you want to implement.

Collectives™ on Stack Overflow

how to send non empty inputs when form submit is done with jQuery?

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related