We Keep Coding

Textboxes to show and edit data

I currently have text boxes that have the border removed so they don't appear as text boxes and are read only. I also have an edit button that shows the border and allows a user to edit the information and save it to a database.
My question should I be displaying data in a text box? It just makes it easier to edit otherwise I would have to add the text box dynamically when the edit button is clicked.

Another option is a 'span' or 'div' with the html5 attrtibute 'contenteditable' set to true;
<div contenteditable="true"/>
You can toggle true/false on click button event.

You could just use a div tag and load your output there.
<div id="output"></div>
It would remain invisible until used, and it would not be editable, and of course you could mark it up any way you like if you want the output area to stand out later.

You can try like this with jquery-
Html :
<input type="text" id="data" disabled="true" value="sampel data"/>
<input type="button" id="button" value="Edit" />
Jquery:
$("#button").click(function(){
$("#data").attr("disabled", false);
});
Live Preview

How to add a loading screen while waiting for search result to show up?

I have a home page that contains a texfield that reads the user input, sends the value of whatever is typed in and sends it to another page where the search will happen and display the search results.
<div>
<form action="****.jsp" method="get" id="search-id">
<input type ="text" name = "search" id="search" size="70"/><br>
<br />
<input type="Submit" value="Search" class="button rounded">
</form>
<br />
<br />
<br />
</div>
But the thing is that it takes some time before the actual second page shows up, therefore I wanted to make a little loading gif to appear while waiting for that page to actually load up. I have a gif file ready to use, but I can't figure out how to implement it into the website so that it would show up after I click on the search button.
I'm very new to HTML/JS and I been searching for a possible way for days. Is this possible at all?

Add a submit event handler to your form, that makes the animated gif appear and doesn't prevent the form submission. Example with JQuery:
$('#search-id').submit(function() {
$('#animated-gif').show();
});
assuming you have the animated gif hidden somewhere in the page:
<img src="..." style="display: none;" id="animated-gif"/>

Since you are new to HTML, you will need to search more about ajax and jquery. That will ideally answer your question. Have a look on this similar question as well. Hope this will help you.

Why customized radio buttons are not getting disabled?

I am using this plugin to customize check boxes and radio buttons on a page.
These radio buttons are in a div#Main element which comprise of some other HTML elements also. I need to disable everything in this div on a button click (I am using jQuery). For this I have the following code,
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
Script
$(function(){
$('#DisableElements').click(function(){
$('#Main').find('*').attr('disabled', 'disabled');
});
});
Issue: Everything got disabled correctly except the radio buttons.
Behind the scenes, the plugin script hides the actual radio button and
put a span over the radio buttons like a blanket. This span has
got a background image sprite with different states (on and off) which
gets updated accordingly on radio button selection. This was the
working of this plugin.
I could have used the inbuilt method of the plugin to disable/destroy the functionality but I did not find any method for this.

images loads with little delay after the DOM has finished loading,
so you can try calling your function in $(window).load().
hope it will help.

The solution i made can be thought of as a patch but works nice (for my scenario at least). What should have been the right approach for this would be using some existing API method to reflect the change, something like disable() or similar but i did not find such method or something like this.
Solution: Making the radio buttons appear like disable (non clickable).
Because i do not want to dig into the plugin js file. For this i made a transparent div with some width and height enough to cover the radio buttons and place it over them like a layer between radio buttons and cursor. This div is hidden by default and show this while making controls disable. keeping it short and sweet, here are the code changes.
HTML
<input type="button" id="DisableElements" value="Disable elements" />
<div id="Main">
<div id="Blanket"></div>
<input type="radio" class="styled" name="reg-all"/>
<input type="radio" class="styled" name="reg-all"/>
<select id="MyList">
<option value="1">Choice-1</option>
<option value="2">Choice-2</option>
</select>
<textarea id="Comments" rows="4" cols="5"></textarea>
</div>
CSS - for blanket div
#Blanket
{
position:absolute; /*Imp: otherwise it will disturb the UI*/
width:100px;
height:100px;
display:none;
/* top/left adjustments, if required! */
}
Script
$(function(){
$('#DisableElements').click(function(){
$('#Blanket').show();
$('#Main').find('*').attr('disabled', 'disabled');
});
});
This solution however needed to drop the fear of what if someone using developer tools to out smart the application but that does not matter any way. Besides, you can-not 100% block the user from using such tools.
Another solution which worked and looks more appropriate: Placing invisible blanket over input controls sounds like a patch and can be easily snapped. The plugin script adds a CSS class named styled and requires to add following styles to achieve customized look and feel.
input.styled
{
display: none; // hides the parent input element
}
Because of this, even if we switch button states to disable, the changes did not reflect because the parent element was hidden making the other listeners difficult to attach. By changing the styles to following, everything worked.
input.styled
{
position: absolute;
opacity: 0;
}
It makes the parent input element invisible but completely active on DOM behind the scenes.

JQuery and find on the TD Element for removing BR

I'm trying to figure out how to remove BR tags underneath a particular TD element with a specific ID. So far I've had no success. Here is some example code via jfiddle:
HTML:
<br>
<table border='1'>
<tr>
<td id="attachmentsOnClient">
<span dir="ltr">
<input id="ontidIOFile" type="file" />
<br>
</span>
<input id="fileupload1" type="file" />
<br>
<input id="fileupload2" type="file" />
<br>
</td>
<td>
Leave <br> This <br> Alone <br> Here
</td>
</tr>
</table>
Javascript onload:
$('#attachmentsOnClient').find('br').remove();​
​
Changing the HTML above so that it's no longer a table, but the "attachmentsOnClient" TD is a div, the above javascript works, however on a TD element it fails. I'm not sure if I'm selecting it correctly or not, this is only my second foray into JQuery
An example in jfiddle can be seen Here.
EDIT: As talked about below, the newlines are due to the formatting of the input file blocks through jfiddle. The JQuery itself is indeed working.

The reason you are seeing this is that the file upload input is rendered in part by the browser, but also by the operating system. For instance, different browsers will show them different, but also the same browser on different operating systems (windows 2000, windows xp, mac etc) will display them differently.
Your best bet here is to use some custom style using CSS with a combination of CSS where you use display: inline-block; on the container and some position:relative; on the input and then place there where you would like. You are also likely, due to the fact that you have multiple, have a need to put a class on each one so that you are able to position them relative to each other. You could add the class attributes either through the markup, or through the jQuery code for example.
EDIT NOTE: As proof that your jQuery IS working, the following alerts (3), then (0):
alert($('#attachmentsOnClient').find('br').length);
$('#attachmentsOnClient').find('br').remove();
alert($('#attachmentsOnClient').find('br').length);

Cannot enable XHTML submit input/button which is disabled by default

I have this simple button in XHTML:
<input type="submit" name="submit" value="Test" disabled="disabled" onmouseover="this.disabled=''" />
The problem is, no matter what I try, when I hover over the button, it won't re-enable from the disabled attribute it has. In XHTML, you are required to use disabled="disabled" which seems to completely break the option to enable/disable it with JavaScript. I've tried running this.disabled='', this.disabled=false, and even this.removeAttribute('disabled') but nothing seems to be capable of re-enabling the button. Weird thing is, if I remove the ='disabled' part of the attribute (making it invalid XHTML), the script enables the button just fine. Is this not possible without using invalid XHTML?
Note: I'd really prefer to only use JavaScript for this specific example, not jQuery.
I thought this would be something simple that would take like 5 seconds but apparently not.

Disabled elements for some reason do not seem to fire mouseover/out events along with click.
The following is not the best solution in the world, but you can wrap it in another element and use the wrapping element's mouseover event to enable it.
<div style="display:inline-block;padding:1px;" onmouseover="document.getElementById('submit').disabled=false">
<input type="submit" id="submit" name="submit" value="Test" disabled="disabled" />
</div>

disabled=false is correct.
The problem is that a disabled element doesn't receive events. See the question Javascript OnMouseOver and Out disable/re-enable item problem.