CODEWITHSUNDEEP
javascriptjqueryjsonajax
user244394
user244394

Reputation: 13448

dynamically creating URL parameter for ajax

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?

Upvotes: 1

Views: 835

Answers (1)

Curiousdev
Curiousdev

Reputation: 5778

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>

Upvotes: 1

Related Questions