Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>You could use the HTML5 placeholder element all the same, but test for placeholder support and then polyfill for it if not available, for example</p> <pre><code>//test function placeholderIsSupported() { var test = document.createElement('input'); return ('placeholder' in test); } //polyfill if(!(placeholderIsSupported())) { $('[placeholder]').focus(function () { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); input.removeClass('placeholder'); } }).blur(function () { var input = $(this); if (input.val() == '' || input.val() == input.attr('placeholder')) { input.addClass('placeholder'); input.val(input.attr('placeholder')); } }).blur(); $('[placeholder]').parents('form').submit(function () { $(this).find('[placeholder]').each(function () { var input = $(this); if (input.val() == input.attr('placeholder')) { input.val(''); } }) }); </code></pre> <p>However, strictly speaking what you're doing is providing labels rather than example values for the inputs, so it would probably be more correct/standards-y to use elements <code>&lt;label&gt;</code> and position them behind the inputs, and then hide them when the inputs are focused/have non-empty values, eg:</p> <p>HTML:</p> <pre><code>&lt;p class="row"&gt; &lt;label for="name"&gt;Name&lt;/label&gt; &lt;input id="cname" name="name" size="25" class="required noName" value=""&gt; &lt;/p&gt; </code></pre> <p>CSS:</p> <pre><code>.row { position: relative; } input, label { display: block } label { position: absolute; /*tweak these until label correctly positioned behind input*/ top: 0; left: 0; } input { background-color: transparent; } input:focus, input.has-value { background-color: #fff; //hide the label behind the bg color when focused or non-empty } </code></pre> <p>jQuery:</p> <pre><code>//toggle a class depending on whether an input has content or not input.on('blur', function(){ var $this = $(this); if ($this.val === "") { $this.removeClass('has-value'); } else { $this.addClass('has-value'); } }); </code></pre> <p>This second option is more semantic and more accessible too, given that screen reader support for <code>placeholder</code> is patchy</p>
    singulars
    1. This table or related slice is empty.
    1. POValidate optional form fields with default values
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USTom Davies
    1. USTom Davies
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. COIt seems like all he really needs to solve his original problem is your code that removes the default value in the `.submit` handler. The problem, in either case, is ensuring that his handler runs before the validate plugin's handler, so it doesn't see the defaults.
      singulars
      1. PO
      1. USBarmar
    2. COMy point was really that even though that would solve the problem as the OP framed it, its much more graceful (and accessible) to use a label. Input values should be for exactly that - values - not labels.
      singulars
      1. PO
      1. USTom Davies
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload