0

On a wordpress I have created I am using a drop down to show 1 of 3 hidden forms via JQuery.

The first problem is when a form is invalid (ie. missing field, bad email ect.) the form resets the page so everything is no longer visible until you have selected that form from the drop down again.

The second is that the form is a plug in so I do not direct access to the submit operation and if I were to go into the plug in files, it would likely be overwritten by update in the near future.

HTML:

<div class="ginput_container ginput_container_select"> <select id="app_pick" class="medium gfield_select"> <option value="">Choose Here</option> <option value="Greek_Dance">Greek Dance</option> <option value="Greek_School">Greek School</option> <option value="Youth_Group">Youth Group</option> </select></div>

JQUERY:

 jQuery(document).ready(function($){ $('#gform_wrapper_3').hide(); $('#app_pick').on('change', function() { if ( this.value == ''){ $('.f1').css('display', 'none'); $('.f2').css('display', 'none'); $('.f3').css('display', 'none'); } else if ( this.value == 'Greek_Dance'){ $('.f1').css('display', 'block'); $('.f2').css('display', 'none'); $('.f3').css('display', 'none'); } else if ( this.value == 'Greek_School'){ $('.f1').css('display', 'none'); $('.f2').css('display', 'block'); $('.f3').css('display', 'none'); } else if ( this.value == 'Youth_Group'){ $('.f1').css('display', 'none'); $('.f2').css('display', 'none'); $('.f3').css('display', 'block'); } else { $('.f1').css('display', 'none'); $('.f2').css('display', 'none'); $('.f3').css('display', 'none'); } }); });

F1,F2,F3 are the respective forms which are Display: none by default.

My goal is to have the form selected in the drop down stay Display: block; after the submit has occurred.

Improve this question
4
  • i think the problem is if the page is submitted and it forces a page reload then you will also reload all the js etc so, you would need to convert to a ajax attempt or somehow js cookies ect Commented Aug 15, 2016 at 19:37
  • You'll need to post more code. Post the form that is displayed and the jQuery that is processed on submit if it isn't a simple action in the HTML <form> tag Commented Aug 15, 2016 at 19:41
  • If you could submit some kind of answer utilizing a js cookie or ajax I would be more than ope to trying it out. My knowledge with those two fields are quite limited, I am however experienced with php if there is something I could do in that regard. Commented Aug 15, 2016 at 19:41
  • @Steve I'm having difficulty finding the jquery being processed by the form. The method is post, so on submit it probably does the refresh then executes what ever jquery, not including my own, which would require human input anyways after refresh unless there was some way of saving that information through the post. Commented Aug 15, 2016 at 19:50

1 Answer 1

Reset to default
1

I refactored your solution a bit to get rid of the if-else construct:

var form = localStorage.getItem('showForm'); if (form) { $('.' + form).show(); $('#app_pick').val(localStorage.getItem('option')) } $('#app_pick').on('change', function() { var showForm; $('.f1, .f2, .f3').hide(); switch (this.value) { case 'Greek_Dance': $('.f1').show(); showForm = 'f1'; break; case 'Greek_School': $('.f2').show(); showForm = 'f2'; break; case 'Youth_Group': $('.f3').show(); showForm = 'f3'; break; } localStorage.setItem('showForm', showForm); localStorage.setItem('option', this.value); });

What I'm doing here is saving the selected value and its accompanying form into the localStorage to use it when the page reloads.

Example

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

7 Comments

That actually does seem to work with a refresh, have not tested it on a Post yet. Is this completely cross browser compatible? Also a reason for useing display: none over visibility: hide is so that it does not occupie any space.
@Flo see here for the browser support of the localStorage. Everything else is plain JS or basic jQuery so it should work.
@Flo .hide() in jQuery will always set the element on display:none; and .show() on display:block;
@Flo you can use sessionStorage instead of localStorage. Then the values will be resetted after the user closes the page or browser. Or you can manually call localStorage.removeItem() after a certain time. This could help you.
@Flo if the browsertab with your site is closed in that case then yes
|

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.