0

I'm no expert in javascript/jquery and have searched and searched to find an answer to my situation. Some answers have been close but I'm not sure how to translate it to my own situation.

I have a form on my website which conveniently zooms in on mobile devices for the user to input their data. After they hit 'submit' the screen zoom remains the same and the post-submit message is not seen since it's out of the viewport. Is there a way to reset the screen zoom after form submission?

I've found the metatag 'viewport' and can change that so that the zoom function doesn't trigger at all

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

but I'd still like the zoom function to be there...

JaxJames
  • 81
  • 1
  • 11

1 Answers1

1

You can update viewport on form submit, like:-

  element.on('submit', function(event) {
     var viewportmeta = document.querySelector('meta[name="viewport"]');
     if (viewportmeta) {
        viewportmeta.setAttribute('content', 'width=device-width, maximum-scale=1.0, initial-scale=1.0');
     }
  }

Try this.

khushboo29
  • 906
  • 6
  • 16
  • Do I enter that in as you've written? Or do I need to replace the first 'element' with input[type=submit]? – JaxJames Apr 06 '16 at 02:44
  • And is there a jQuery syntax? If not, do I place it inside or outside of the $(document).ready(function(){ tag? – JaxJames Apr 06 '16 at 02:50
  • Yes, replace 'element' with your form element, because you want to trigger this on form submit. Again yes for 2nd comment, keep it inside doc.ready – khushboo29 Apr 06 '16 at 05:01
  • Ok, does that mean the first line will look like `input[type=submit].on('submit', function(event) {` ? – JaxJames Apr 06 '16 at 05:38
  • No, 'submit' event triggers when form is submitted..use, $('#form_id'). consult for details- http://stackoverflow.com/questions/18545941/jquery-on-submit-event – khushboo29 Apr 06 '16 at 05:53
  • I checked out that link you sent. I've tried: `jQuery(document).ready(function($){ $('#form-id').submit(function(event) { var viewportmeta = document.querySelector('meta[name="viewport"]'); if (viewportmeta) { viewportmeta.setAttribute('content', 'width=device-width, maximum-scale=1.0, initial-scale=1.0'); } }); });` But still doesn't seem to be working. Have I written the code wrong? – JaxJames Apr 07 '16 at 03:50