dynamically creating URL parameter for ajax

Question

I am creating a dynamic form . ie based on user selection from a drop down box. I can have 2 fields to 20 fields depending on the drop down selection. So each time user changes the dropdown we can have various type of different form fields.

to submit the url parameter. is it possible to submit only the form field that is visible and related to the user selection current url string is submitting all the value .

for Scenario 1

when user select say "A" from drop down. we show firstname and lastname input fields and the url?fname=fname&lname=lname

Scenario 2

when user select say "B" from drop down. we show first name , lastname input fields and address and the url?fname=fname&lname=lname&addres=address

Scenario 3

when user select say "Z" from drop down. we show differnt input field like first name , lastname ,address, zip, age, ssn,childname,sex, cell,home, office and the url?fname=fname&lname=lname&addres=address&ddress, zip, age, ssn,childname,sex, cell,home, office

my question is .. Is it possible to build a dyamic URL query string based on the drop down selection? how will it keep track track 20 to 30 different selection. As each selection show different forms.

what is the best approach. does JSOn need to provide the necessary information fro the url query string assembly?

Is there any examples?

Curiousdev · Accepted Answer · 2017-01-24 18:22:11Z

1

I think you have to use .serialize() only serialize those fields which are visible and ignore which is not visible in your case on dropdown hide unnecessary fields and than serialize form and pass as a parameter to ajax request.

for Scenario 1 When user select A from dropdown than hide data except fname & lname and than serialize form as below it will only serialize only visible fields.

$(':input:visible', 'form').serialize();

when user select say "A" from drop down. we show firstname and lastname input fields and the url?fname=fname&lname=lname

and so on...

For example please find belo snippet as well

var serializeData = $(':input:visible', 'form').serialize();
alert(serializeData);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
    <input type="text" name="foo" value="foo" />
    <input type="text" name="bar" value="bar" style="display:none" />
    <input type="text" name="baz" value="baz" />
</form>

answered Jan 24, 2017 at 18:22

Curiousdev

5,7983 gold badges26 silver badges39 bronze badges

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

2 Comments

alexhughesking Over a year ago

Don't exclude fields which aren't visible - you may have type="hidden" inputs that you want to submit. In addition to hiding them, add the disabled property to inputs that shouldn't be submitted. jQuery's serialize will ignore disabled inputs automatically.

Curiousdev Over a year ago

Ohh that's also sounds good thanks for your valuable suggestion I appreciate that I know there are many ways to do the same thing but as per my point of view I prefer this one things gonna change as per different requirements :)

Collectives™ on Stack Overflow

dynamically creating URL parameter for ajax

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related