Change URL of button for 480 width Javascript

Question

I'd like to change the url of the button when they hit submit if they are on a mobile screen 480 width or less.

Example:

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>

But on mobile devices 480 wide or less I'd like it to change to:

<form name="myform1" action="mylink-mobile.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>

The page is PHP but I'm thinking I can use javascript screen.width to detect <= 480 but I'm not sure how to dynamically change the form action url based upon the screen width. How would I do this?

score 1 · Accepted Answer · edited May 23 '17 at 11:56

Well without JavaScript you can use CSS media to show and hide the different forms.

form[name="myform1"] {
    display: block;  
}

form[name="myform2"] {
    display: none;  
}


@media (max-width: 400px) {

  form[name="myform1"] {
    display: none;  
  }

  form[name="myform2"] {
    display: block;  
  }
  
}

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form> 

<form name="myform2" action="mylink-mobile.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>

If you want to use JavaScript to change the action, you want to read the window size

Thank you, an elegant solution to the issue! – KeithW Mar 30 '15 at 14:11 — KeithW, Mar 30 '15 at 14:11

score 1 · Answer 2 · answered Mar 30 '15 at 13:12

You can do this with no JavaScript at all.

<form name="myform1" class="wide sense" action="mylink.php" method="post"> 
  <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>
<form name="myform1" class="narrow sense" action="mylink-mobile.php" method="post"> 
  <input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>

Include both forms with different class values. Then in your CSS:

form.sense { display: none; }
@media screen and (min-width: 481px) {
  form.sense.wide { display: block; }
}
@media screen and (max-width: 480px) {
  form.sense.narrow { display: block; }
}

That'll work when a user goes from portrait to landscape without you having to monitor the orientation or screen geometry from JavaScript.

score 0 · Answer 3 · answered Mar 30 '15 at 13:10

0

HTML

<form name="myform1" action="mylink.php" method="post"> 
<input type="image" name="submit" src="/Button1.jpg" border="0" alt="Submit" />
</form>

JS

window.onload = function (){
if (window.innerWidth <= "480")
document.getElementsByTagName("form")[0].setAttribute("action", "mylink-mobile.php");
}

answered Mar 30 '15 at 13:10

Kawinesh S K

3,148
1
16
29

Would the tag name be myform1 vs form in your example since there may be multiple forms on a page? – KeithW Mar 30 '15 at 13:57

score 0 · Answer 4 · edited May 23 '17 at 12:06

The idea is to detect if they're on a mobile device and act accordingly, right? After all, you're changing the form submission action, so I'm assuming something different is going on behind the scenes.

That said, I would go with mobile device detection instead of using the screen size. See this thread for more info (disregard the "jquery" part as the information provided has non-jquery solutions as well): What is the best way to detect a mobile device in jQuery?

The majority seem to use user agent detection to determine if you're on mobile using something like this:

if (navigator.userAgent.match(/Mobi/)) {
    // mobile!
}

Fabrizio Calderan · Answer 5 · 2015-03-30T14:07:02.803

0

You could define two submit button with a different value attribute

<form action="action.php" method="post"> 
   ...
   <input type="submit" name="submit" value="480" />
   <input type="submit" name="submit" value="over480" />
</form>

and you show just one input, depending on the viewport size

CSS

[value="480"] { display: none; }
[value="over480"] { display: block; }

@media all and (max-width: 480px) {
    [value="480"] { display: block; }
    [value="over480"] { display: none; }
}

then in the action.php check which one actually submitted your form and — depending on that parameter sent via POST — apply a different server side logic.

Pros:

no need to duplicate the markup of the form
no need to use javascript to detect a size change of the viewport
the server side logic is in one single entry point

Example (github gist):
https://gist.github.com/anonymous/64b9e1d42c00356f5874

edited Mar 30 '15 at 14:07

answered Mar 30 '15 at 13:16

Fabrizio Calderan

120,726
26
164
177

I like where you are going here, but I'm unclear how to tie the value to the action url. I'd like to send them to a mobile url when they submit the form if the max width is <= 480 – KeithW Mar 30 '15 at 13:56
try to check the value of `$_POST['submit']`, hopefully you should see either `480` or `over480` – Fabrizio Calderan Mar 30 '15 at 13:57
@KeithW see https://gist.github.com/anonymous/64b9e1d42c00356f5874. depending on the value you call a script or another one – Fabrizio Calderan Mar 30 '15 at 14:15

Change URL of button for 480 width Javascript

5 Answers5