Showing posts with label html. Show all posts
Showing posts with label html. Show all posts

Wednesday, 12 July 2017

Multiple submit buttons in an HTML form

Question: Let's say you create a Wizard in an HTML form. One button goes back, and one goes forward. Since the back button appears first in the markup when you press Enter it will use that button to submit the form.
Example:

<form>
  <!-- put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

What I would like to do, is get to decide which button is used to submit the form when a user presses Enter. That way, when you press Enter the Wizard will move to the next page, not the previous. Do you have to use tabindex to do this?

Solution:

I'm just doing the trick of floating the buttons on the right.

This way the Prev button is left of the Next button but the Next comes first in the HTML code:

.f {
  float: right;
}
.clr {
  clear: both;
}

HTML
<form action="action" method="get">
  <input type="text" name="abc">
  <div id="buttons">
    <input type="submit" class="f" name="next" value="Next">
    <input type="submit" class="f" name="prev" value="Prev">
    <div class="clr"></div><!-- This div prevents later elements from floating with the buttons. Keeps them 'inside' div#buttons -->
  </div>
</form>

Friday, 7 July 2017

Determine a User's Timezone

Question: Is there any standard way for a Web Server to be able to determine a user's timezone within a web page? Perhaps from a HTTP header or part of the user-agent string?

Solution:  To submit the timezone offset as an HTTP header on AJAX requests with jQuery.


$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        xhr.setRequestHeader("X-TZ-Offset", -new Date().getTimezoneOffset()/60);
    }
});

Percentage width child element in absolutely positioned parent on Internet Explorer 7

Question: I have an absolutely positioned div containing several children, one of which is a relatively positioned div. When I use a percentage-based width on the child div, it collapses to '0' width on Internet Explorer 7, but not on Firefox or Safari.If I use pixel width, it works. If the parent is relatively positioned, the percentage width on the child works
  1. Is there something I'm missing here?
  2. Is there an easy fix for this besides the pixel-based width on the child?
  3. Is there an area of the CSS specification that covers this?
Solution: 

The parent div needs to have a defined width, either in pixels or as a percentage. In Internet Explorer 7, the parent div needs a defined width for child percentage divs to work correctly.

Here is some sample code. I think this is what you are looking for. The following displays exactly the same in Firefox 3 (mac) and IE7.


#absdiv {
  position: absolute; 
  left: 100px; 
  top: 100px; 
  width: 80%; 
  height: 60%; 
  background: #999;
}

#pctchild {
  width: 60%; 
  height: 40%; 
  background: #CCC;
}

#reldiv {
  position: relative;
  left: 20px;
  top: 20px;
  height: 25px;
  width: 40%;
  background: red;
}

<div id="absdiv">
    <div id="reldiv"></div>
    <div id="pctchild"></div>
</div>