convore.json/groups/django-community/how-to-create-a-dynamic-form-based-on-form-field-input/messages.json

[{"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305898102.672956, "message": "for example, i have a form with one drop down that has two selections in it. if a user selects first option, two additional text input fields appear. if the user selects second option a check field appears instead. or something along those line, you get the idea.", "group_id": 81, "id": 1125490}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305900238.484401, "message": "and then option parameter is used to build additional fields...", "group_id": 81, "id": 1125917}, {"user_id": 1930, "stars": [], "topic_id": 36118, "date_created": 1305899682.578619, "message": "is this still valid?: https://code.djangoproject.com/wiki/CookBookNewFormsDynamicFields", "group_id": 81, "id": 1125784}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305900051.1890759, "message": "i suppose.. so 1st step: /form/ loads empty form with just a dropdown field. 2nd step: user selects an option from the drop down, this in turn triggers onChange() JS, which reloads form with smth like /form/?option=1", "group_id": 81, "id": 1125880}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305900110.8362911, "message": "would that be a common approach to this problem?", "group_id": 81, "id": 1125890}, {"user_id": 13325, "stars": [], "topic_id": 36118, "date_created": 1305903783.3440239, "message": "JS is the best solution to this problem. At least from a pure usability standpoint.", "group_id": 81, "id": 1126557}, {"user_id": 13325, "stars": [], "topic_id": 36118, "date_created": 1305903915.67171, "message": "If you catch a form at the right time, you can insert and delete fields all you want. (In Django)", "group_id": 81, "id": 1126589}, {"user_id": 14653, "stars": [{"date_created": 1305915081.625829, "user_id": 20582}], "topic_id": 36118, "date_created": 1305910594.4802279, "message": "And if you don't need to do it in real time, using JS, this is the article you should read http://jacobian.org/writing/dynamic-form-generation/ by @jacobian", "group_id": 81, "id": 1127856}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305915078.2672911, "message": "@maraujop needs to be dynamic i'm afraid... so it'll have to be a onChange() refresh of the form with selection id passed as GET param... unless someone else has any ideas? that aside, very good read, thanks!!", "group_id": 81, "id": 1128655}, {"user_id": 14653, "stars": [], "topic_id": 36118, "date_created": 1305917585.3000591, "message": "@rylis In that case use a Javascript library like JQuery, and load things using events and AJAX if you need something from the server side. Though I recommend you avoiding that if possible.", "group_id": 81, "id": 1129131}, {"user_id": 14653, "stars": [], "topic_id": 36118, "date_created": 1305917602.0098131, "message": "@rytis I mean ritys :)", "group_id": 81, "id": 1129133}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305924343.872221, "message": "@maraujop I've got half way through now, with just a simple onchange, which just reloads the form and passes an argument via GET request. Just out of curiosity, why would you avoid AJAX in this case? (It's not needed in my case, reload is pretty fast and the form is rather small, so impact on usability is minimal)", "group_id": 81, "id": 1130158}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305926967.317117, "message": "not as easy as it seems... reload loses all other fields, so i either need to submit them in GET (which now gets bit too messy) or use ajax to get data and construct the rest of the form in JS...", "group_id": 81, "id": 1130556}, {"user_id": 30035, "stars": [], "topic_id": 36118, "date_created": 1305961307.842788, "message": "@rytis Just output the whole form with all possible fields, but have style=\"display: none;\" set on the hidden ones. Then put an onchange function on your drop-down that checks the selected value and unhides the relevant field (and hides the other one in case it switches). Something like:", "group_id": 81, "id": 1133067}, {"user_id": 30035, "stars": [], "topic_id": 36118, "date_created": 1305961587.7718611, "message": "document.getElementById('the_selector').onchange = function() {\n  if (this.selectedIndex == 1) {\n    document.getElementById('one_field').style.display = 'block';\n    document.getElementById('the_other_field').style.display = 'none';\n  } else if (this.selectedIndex == 2) {\n    document.getElementById('one_field').style.display = 'none';\n    document.getElementById('the_other_field').style.display = 'block';\n}\n", "group_id": 81, "id": 1133086}, {"user_id": 30035, "stars": [], "topic_id": 36118, "date_created": 1305961702.8029301, "message": "Oh, and on the server side, be sure to ignore the appropriate field based on which item was selected, as well (because even though it's hidden, the user might have selected one, filled in some of the info, then selected the other, thereby leaving data in those hidden fields).", "group_id": 81, "id": 1133106}, {"user_id": 20582, "stars": [], "topic_id": 36118, "date_created": 1305962946.2360981, "message": "@Manganeez hmm interesting.. I suppose this is more manageable than reloading the forms, etc. I'll try implementing your suggestion. There aren't that many fields in total (perhaps 30-50, might go up to 100) so should be reasonably fast in terms of page load time. Thanks!", "group_id": 81, "id": 1133197}, {"user_id": 13325, "stars": [], "topic_id": 36118, "date_created": 1305983720.552248, "message": "Yes, that's what I was talking about. Us JS to show and hide fields when appropriately. On the Django side, you can see what was selected in the post, del the fields you don't need, etc., then push the post into the form and validate.", "group_id": 81, "id": 1133858}, {"user_id": 14653, "stars": [], "topic_id": 36118, "date_created": 1306000800.8842959, "message": "@rytis About avoiding AJAX, what I meant, is that some people load via AJAX things that are static and should be in the client side for reducing server side load.", "group_id": 81, "id": 1135392}, {"user_id": 18281, "stars": [], "topic_id": 36118, "date_created": 1306054856.8435831, "message": "Post it to the same view each time, then have nested if statement that checks how far the process is by checking if a field is none or something else. It's none cos your template knows to check for it having a value and draw a dropdown or a hidden field and if it's not been set value equals none. Am I doing it totally the wrong way?", "group_id": 81, "id": 1140508}]