Note that there are some explanatory texts on larger screens.

plurals
  1. POjson with hide and else if
    text
    copied!<p>I am building a registration form. #onimg och #offimg are two divs with img. If you fill in an available user name the #offimg will show, and if you choose an allready taken username the #onimg vill show. </p> <p>If you do not write anything at all in the registration field (like if you do delete the text) I want the images to hide. But they dont=(.</p> <p>here is the HTML</p> <pre><code>&lt;ul&gt; &lt;li&gt;Username:&lt;/li&gt; &lt;li&gt;Password:&lt;/li&gt; &lt;/ul&gt; &lt;ul&gt; &lt;li&gt;&lt;input type="text" id="user" name="user" value="" /&gt;&lt;/li&gt; &lt;li&gt;&lt;input type="text" id="pass" name="pass" value="" /&gt;&lt;/li&gt; &lt;li&gt;&lt;input type="checkbox" name="show" value="password"&gt;Show password&lt;/li&gt; &lt;/ul&gt; &lt;div id="onimg"&gt;&lt;/div&gt; &lt;div id="offimg"&gt;&lt;/div&gt; &lt;/fieldset&gt; &lt;button type="button" id="reg" value="" &gt;Register&lt;/button&gt; </code></pre> <p>some css</p> <pre><code>#onimg { z-index:1000; position:absolute; left:300px; top:23px; background-image:url('notavailable.png'); width:20px; height:20px; } #offimg { z-index:1000; position:absolute; left:300px; top:23px; background-image:url('available.png'); width:20px; height:20px; } </code></pre> <p>and here is the jquery</p> <pre><code>$('#user').focusout(function(){ var users = $('#user').val(); $.getJSON( "available.php" , //The URL to perform the lookup {name: users }, //The data you send function (result){ //The function to fire upon return if (!result) { //result is JSON formatted $('#onimg').fadeIn('fast'); } else { $('#offimg').fadeIn('fast'); } }); }); $(function() { $('#user').blur(function() { if($(this).val() == '') { $("#onimge").hide(); $("#onimge").hide(); } }); }); </code></pre>
 

Querying!

 
Guidance

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