Let say we have the following form code
<form action="post" method="post" name="form">
Your Name : <input name="name" type="text" id="name">
<input type="submit" name="Submit" value="Submit">
</form>
what if i want it to be viewed as image
Why ! in fact i've text-area where i will put some HTML codes and i want the output of that code appears normally as web-browser view but as image , means no way to click on it or operate just appears as image
I do not know if it possible or not but i wonder it it can be and here is example for exactly how this forms i wants to appears
output of the html codes appears as image
so any method any help any function or class can do like this ?!
Thanks
You can do it two ways
Put and transparent block element over it (position: absolute and so on)
disable every input element (disabled:disabled attribute)
see:
http://www.w3schools.com/tags/att_input_disabled.asp
Related
This is my parent form parent-form.html with one submit button.
<form name="parent_form">
Name
<input type="text" id="name" name="name">
<input type="submit" id="submit" type="button" value="Submit"></button>
</form>
<iframe src="iframe_form.html" id="iframe_id" name="iframe_name"></iframe>
This is my iframe form iframe_form.html with one field in it.
<form name="iframe_form">
Address
<input type="text" id="address" name="address">
</form>
I want to submit both address field of iframe as well as name field of parent-form by clicking submit button of parent form.
There were other post related but none appropriate with simple method.
There's nothing wrong with iFrames but in this case, it's not efficient or easy.
If you want to avoid the problem of frames and forms, then use a scrollable division:
<div id="scrollcontent1" style="overflow-y: scroll; height:100px;">
Address: <input type="text" id="address" name="address">
</div>
If you want to have more than one on your page, use a sequence of them making sure the ID has a different name for each. You can then dynamically present what you need using the visible property and whatever javascript triggers you desire. Make sure you set the height property and if you want both scrollbars present, use overflow instead of overflow-y. It's a simple solution and it avoids the headaches of jquery as well as iframes.
Ihope you will get better mileage out of a helpful answer than and snobbish "ask the right question".
I was having this problem with a more complex chunk of code, so I started messing with a html "joke" with the movie The Seven, and realized it was the same problem. Why doesn't it do anything when I click the button? I've tried it adding a function and script as well, get same problem. I want it to show the text inside the (formerly blank) input box when you click the button.
<html>
<body>
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').innerHTML='head of gwyneth paltrow';">
</body>
</html>
innerHTML, as the name suggests, refers to the HTML content of an element. You need to use value
The Box:<input type="text" id="thebox" value="" size=10>
<br><input type="button" value="What's in the booooox?" onclick="document.getElementById('thebox').value='head of gwyneth paltrow';">
See it in action
I have this problem Only on IE7 and IE8.
I have a shadowbox that contains an input type file in it.
When this shadowbox is loaded, the input file is invisible... until I mouse hover it.
It's a reall basic form with a really basic input file:
<form action="" method="post" enctype="multipart/form-data" autocomplete="off">
<input type="file" name="img" onChange="$('#button_img').css('display','');" />
<input type="hidden" name="step_crop" value="1" />
<input type="submit" value="" />
</form>
I tried to delete everything on the file and only leave the form with one element which is, yeah, the evil input file, but still invisible on page load until I hover it.
Someone would have an idea ?
(Video link for the behavior: http://www.screenr.com/6ICH )
Please try to close your div and input tags properly. does it work?
Hi, I can see input field in both IE7 and IE8. Can you please add your view how it looks like before and after
I have a form with <input type="submit">. In Chrome submit doesn't do anything. On a Network tab in developer tools I see nothing. No errors in developer tools either. Meanwhile, if I do save a page and open a saved page, then after I press submit button, I see something appears in Network tab. This happens in Chrome and Firefox. This works as expected in IE.
Does anybody have a hindsight, what should I look at?
I don't need a direct answer, I only need to know, where should I look at. If someone posts a direction and that'll help me to solve my problem, I'll accept it as a correct answer.
Structure of a page looks like this:
html
head
body
div
div
form
form
form
form
form
input
input
table
table
tbody
tr..td..input type=submit
If you are not using any JavaScript for form validation then a simple layout for your form would look like this:
<form action="formHandler.php" method="post">
<input name="fname" id="fname" type="text" value="example" />
<input type="submit" value="submit" />
</form>
You need to ensure you have the submit button within the form element and an appropriate action attribute on the form element is present.
For a more direct answer, provide the code you are working with.
You may find the following of use: http://www.w3.org/TR/html401/interact/forms.html
Are you using HTML5? If so, check whether you have any <input type="hidden"> in your form with the property required. Remove that required property. Internet Explorer won't take this property, so it works but Chrome will.
I faced this problem today, and the issue was I was preventing event default action in document onclick:
document.onclick = function(e) {
e.preventDefault();
}
Document onclick usually is used for event delegation but it's wrong to prevent default for every event, you must do it only for required elements:
document.onclick = function(e) {
if (e.target instanceof HTMLAnchorElement) e.preventDefault();
}
Hello from the future.
For clarity, I just wanted to add (as this was pretty high up in google) - we can now use
<button type="submit">Upload Stuff</button>
And to reset a form
<button type="reset" value="Reset">Reset</button>
Check out button types
We can also attach buttons to submit forms like this:
<button type="submit" form="myform" value="Submit">Submit</button>
Check if you are using any sort of jquery/javascript validation on the page and try disabling it and see what happens. You can use your browser's developer tools to see if any javascript file with validate or validation is being loaded. You can also look for hidden form elements (ie. style set to display:none; or something like that) and make sure there isn't a hidden validation error on those that's not being rendered.
I ran into this on a friend's HTML code and in his case, he was missing quotes.
For example:
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<input type="text" name="fname" id="fname" style="width:90;font-size:10>
<input type="submit" value="submit"/>
</form>
In this example, a missing quote on the input text fname will simply render the submit button un-usable and the form will not submit.
Of course, this is a bad example because I should be using CSS in the first place ;) but anyways, check all your single and double quotes to see that they are closing properly.
Also, if you have any tags like center, move them out of the form.
<form action="formHandler.php" name="yourForm" id="theForm" method="post">
<center> <-- bad
As strange it may seems, it can have an impact.
You can't have a form element as a child (directly or indirectly) of another form element.
If the following does not return null then you need to remove the excess form elements:
document.querySelectorAll('form form');//Must return null to be valid.
check your form is outside the table
I am creating a html form with textboxes. I want default values to be shown in the textboxes when the page loads.
see code below:
<form action="" onsubmit="">
Zip Code: <input id="address" type="textbox" value="">
Zip Code:<input id="address" type="textbox" value="78728"/>
Radius:<input id="radius" type="textbox" value="#session.preferences.view_Radius_Map#"/>miles
<input type="button" value="Add Radius" onclick= "drawCircle()">
<input type="button" value="Undo" onclick=" Undo()">
<input type="button" value="Reset" onclick= "clearMap()">
</form>
for some reason when I try to remove the line that has no value for the Zip Code, the value for the second Zip Code textbox (which has a value set for the zip code) does not display. What is causing this and how can I correct this so that I have to textbox fields Zip Code and Radius in which the default values are displayed when the page loads?
It works fine for me when I remove the first zip code <input>: http://jsfiddle.net/LFYnH/
Try to give the second field a different id. You have two input fields with the same id="address".
Do like this:
Zip Code: <input id="address" type="textbox" value=""/>
Zip Code: <input id="address2" type="textbox" value="78728"/>
try giving them different id. Eg. "Address" and "Address2"
An id is intended for a single use. If you require it to be on more than one element you should use a class instead.
How are you removing the line without a value in it? With Javascript, JQuery?
Both of those lines shouldn't have the same ID. Make them like address1 and address2 or something.
You can then use JQuery or something to remove the first one (or just hide it), by doing like:
$('address1').hide();
You can also check if it doesn't have a value by looking at it's value through JQuery as well:
$('address1').val();
Some of your input tags are missing the closing '/'
Zip Code: <input id="address" type="textbox" value="">
That could be causing a problem.
Change the id in the first two input tags to classes so that they can be re-used and make sure all of your input tags(and other tags) are properly closed. The first input you have isn't properly closed.
using jQuery you can do something like this:
For each input text set a default value
<input type='text' data-default='your default text' />
Then you have to add two step in javascript. First load the default text into the field when the page loads and listen for focus event
jQuery(document).ready(function(){
jQuery(input)
.each(function(index, element){
jQuery(element).val(jQuery(element).data('default'));
})
.focus(function(evt){
var taget = evt.target;
if(jQuery(target).data('default') == jQuery(target).val()) jQuery(target).val("");
});
});
When the input get the focus it checks if the current text is the default text and in this case javascript empty the field otherwise your text is safe into the text box
Remember that ID are unique you can't have two elements with the same id "address"
Hope this helps