Develop Reference

Hide HTML Form Before the page loads using javascript

I would like to hide a HTML Form before even the page loads using javascript.
I was able to use display='none' style property to hide the form using javascript but the form content loads visible for a second before disappearing.
var searchbar = document.getElementById("searchform");
searchbar.style.display = 'none';
I have read many solutions in stackoverflow adding some css code in the page and display the content later using removeClass.
Problem is I do not have access to code behind the web page to add the CSS content. However I can add some custom javascript code only in header or a footer.(cannot use jQuery as well).
Please let me know if its possible hiding the form element as expected.
I am quite new to javascripting. Please provide your valuable suggestions.

edit: Sorry, if you only can use some javascript and cannot access the html or css there is probably no solution for your problem.

You can store all you form in a javascript variable, and write it in your div when the page is ready
Simple example :
function showForm(){
var container = $('#formContainer');
var form = '<input type="text" name="myInput">'; // Or you can load it from an external file
container.html(form);
}
$(document).ready(function(){
showForm();
});
But the best way is adding a css rule to hide your form, and show it when the page is loaded.

Web browser first render HTML. It takes time, while browser download css or js file. Best apprach would be to use inline display='none', not in css file.
<form style="display:none;">
...
</form>

How to get visible div inputs in a page through php?

I have been trying to get the names of the visible div inputs there are two visible..!
but it's getting difficult for me..I got a way out with javascript but I really want to to do it in PHP..! as names of divs and inputs are changing on every visit and reloading the page..! so it's quite difficult to target by any permanent name or ID..!
Here is how I got it from a user in javascript :
var isCandidateRegion=function(node){
return (node.innerText.indexOf('Username')>-1 && node.innerText.indexOf('Hours')>-1);
};
//Find the last table in th document that contains 'Username' and 'Hours'
var candidateRegions=[].filter.call(document.querySelectorAll('table'),isCandidateRegion);
var targetRegion=candidateRegions[candidateRegions.length-1];
var isVisible=function(node){
return (node.offsetWidth && node.offSetWidth >0) || (node.offsetHeight && node.offsetHeight>0);
};
var inputs=[].filter.call(targetRegion.querySelectorAll('input'),isVisible);
var usernameInput=inputs[0].name;
var hoursInput=inputs[1].name;
console.log(usernameInput,hoursInput);
So what I want is to get the names in a php variable so that I can use it in php now..I can see the names of the inputs in console but I want it to store in a PHP variable..!
So if there is any way please or alternative of using jQuery or Javascript as PHP will be great..!

PHP is a server side language which for all intents and purposes relating to how I understand your question, is basically there only to serve and read HTML code. Unless you have something actually written on a DOM element, there is no way for PHP to know whether it is visible or not, as it can't automatically detect its styling like JavaScript can.
JavaScript on the other hand is designed for working with DOM page elements and detecting styles, or manipulating elements.
To make your PHP see what elements are visible, you need to explicitly tell PHP what is and isn't visible by putting it into HTML using JavaScript (or jQuery). This can be done by:
Adding a specific class onto your div that you want to make known to PHP e.g. <div class="visible"> ... </div> or <div class="hidden"> ... </div>.
Adding a data attribute to your element e.g. <div data-visibility="visible"> ... </div> or <div data-visibility="hidden"> ... </div>
In your PHP, on the method reading info from the page you can traverse the DOM and get all div's that have the appropriate class or attribute.

Is it possible in JavaScript to get html page code and replace TextBoxes with it's values?

I kind of need to create html page copy by clicking on button in this page, but where all <input type = 'text'... replaced with it's values.
I think, I can handle the second part, but how first to get html code?
Are this ever possible?
I need this for generating html reports.
Page is shown in internal browser of my prog. The basic idea, the student see the page with inputs, then when he fill all, he press button inside HTML page, some JS handler work and send to my prog same page, but without inputs for later review for teacher.

If you want to get the html for the body of the document, use this:
document.body.innerHTML
You can then modify it as needed and change it:
document.body.innerHTML = ... modified html ...
There are better ways to achieve the result though, like manipulating the DOM with jQuery.

You can use document DOM element and serialize it:
(new XMLSerializer()).serializeToString(document);
for cross-browser compatibility see this post

If you have a <form> you can post to the same page adding ?post=1 to the action.
Then in the php
if ($_GET["post"]==1) {
//same table or div structure getting the values submitted by the form
}
Do you know how to do it? was this you needed?

Javascript innerHTML with Popup

I can't understand why this inner html script isn't working. I posted the javascript on jsFiddle. You can see it here: http://jsfiddle.net/JyV73/1/
I have two versions of the link. In the first the rewrite link is within a popup that needs to be closed and another opened with the proper text within the textarea.
In the second, there is just a link on the page that when it is clicked should hopefully open the popup with the proper text within wht textarea.
The only problem is that it doesn't work for the second version because of I must close the popup. If I comment out that first document.getElementById(id).style.display = 'none' then the plain link works, so my first thought is to create two function. But since this javascript is part of a php template file that is included I think it would be simpler on the php code to just solve this using pure javascript.
I'm still learning javascript, and any help would be appreciated. I hope I was clear. Thank you so much.
HTML
open
<div id="popup" class="popup"> Rewrite
</div>
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
<!-- This is the stuff that doesnt work for some reason Rewrite
<div id="new" class="popup">
<textarea id="new-text"></textarea>
</div>
-->
The Javascript
function rewrite(id, text) {
document.getElementById(id).style.display = 'none';
document.getElementById('new-text').innerHTML = text;
}

I am not entirely clear on what you are trying to do here, but from the way I read your code you want to set the value of the text area to a specific value.
here is how you do that: http://jsfiddle.net/JyV73/9/
function rewrite(id, text) {
$('#new-text').val(text);
}
You're not using pop-ups, you're using modals, which means its' a div inside the page that toggles visibility. You can access information from those components whether they are visible or not, fyi.
Still, Im not entirely sure on what you're trying to do here.

I changed document.getElementById('new-text').innerHTML = text; to document.getElementById('new-text').value = text; because it's the value attribute of the text box which you want to set.
Also each element on the page with an ID needs to have a unique ID (it seems like you might have been trying to reuse IDs at one point but maybe I'm wrong!)
I still haven't worked out exactly what you're trying to achieve but those changes needed to be made no matter what.
This code is sufficient to achieve your second goal though: http://jsfiddle.net/JyV73/19/
I added an onClick attribute (onClick="rewrite('popup', 'blah')") to your "open" link to do the writing to the textbox. :)

Positioning inside an HTML table

I have a HTML table inside which I have a submit button. Now, I call a function in my JavaScript file, that is supposed to create a captcha, and place it in the HTML page within the table where I have the submit button.
And in the JavaScript, I am doing a document.write() and pasting the image from the JavaScript file into the HTML page. Now I want both this image and submit inside the same table, but the submit needs to be on the HTML page and the image has to be in the JavaScript file only. Unfortunately, the image is pasted somewhere at the bottom of the page. I don't understand how this positioning works. Is there any solution where I can put them into the same table, in spite of both controls being in separate files?
Sample code:
in the HTML page: the submit button is placed inside a table in the form tag...
in the JavaScript file:
document.write("img position=\"relative\" src=\"" + decodeURIComponent(imgdir) + imgid + ".jpg\" height=\"50\" width=\"100\" align=\"left\" style=\"margin-left: 4px;\" height=\"80\");
}

You could try to define the html img tag where you want it in the table, and just hide it in css style until you set the source with your javascript. You also need to set id on it to get access in the javascript.
In the table you define the html table cell like this:
<td>
<!-- Your submit button goes here... -->
<img id="imagePlaceholder" style="display:none;margin-left:4px;" height="50" width="100" align="left" />
</td>
In the javascript you do this:
var image = document.getElementById("imagePlaceholder");
image.src = decodeURIComponent(imgdir) + imgid + ".jpg" ;
image.style.display = "inline"; // Make the image tag visible

In addition to the prior comment I would strongly avoid the use of document.write as it is so easily abusive to the semantics of the HTML. I would suggest always using innerHTML to write elements and fill them dynamically. innerHTML is not a standard, but it is 2.5 to 3.5 times faster than using DOM methods. I also strongly suggest validation your dynamically generated HTML to discover flaws introduced by your JavaScript.

document.write() appends HTML to the end of the page. You probably want to use something like appendChild() to insert your image into the right table cell. For example:
var img = document.createElement('img');
img.src = decodeURIComponent(imgdir) + '.jpg';
// set the rest of the attributes...
var imgTd = document.getElementsById('imgDestination');
imgTd.appendChild(img);
Some suggestions:
Use a JavaScript library like jQuery—it makes stuff like this trivial.
Move the image's styling off of the element and into a <style> element or an external CSS file.