my application working well in all browsers except IE.
In my application I have a div popup form which contains some fields. In the text box it i pressed any key it was not displaying. If i move the mouse then the entered texts are displaying actual thing is screen not refreshed
How to solve this.
mycode:
<form>
//this is popup form
<div>
<form>
<input type="text"/>
<!-- if i type in the text box in IE it is not displaying but in some pc only -->
</form>
</div>
</form>
Thanks,
If i understand correctly, you want to have a popup, containing a form. The code you pasted is just html; it does not have any of this interactivity.
Let's start with your code. It has a form with a form inside it. The form tag is used to specify the start of a web form. You can specify several thing in this tag:
action: Where will the form be posted to? e.g. send the form to http://www.example.com/processform/
method: Will the form be submitted using the GET or POST method?
Having a second form tag inside it doesn't make sense: your browser will not know where to post the form to. Most browsers will choose to use one of the two tags, but they might choose the wrong one or ignore the form tags entirely.
If you want to have a form in a popup, use an approach like following html code:
<p><span id="clickablelink">Open the form</span></p>
<div class="dialog" style="display: none;">
<form action="/process/" method="post">
<input type="text" />
<input type="submit" name="submit" value="Submit this form" />
</form>
</div>
This code part should be inside the part of your html document.
You cannot open a dialog in the same page, unless you use JavaScript, jQuery or another framework to display this form. An example of this using jQuery UI:
<link type="text/css" href="css/themename/jquery-ui-1.7.1.custom.css" rel="Stylesheet" />
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.7.1.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$(".dialog").dialog({
autoOpen: false
});
$("#clickablelink").click(function(){
$(".dialog").dialog("open");
});
});
</script>
This code block should be inside the part of your html document.
This is just a basic example. It might not be exactly what you are looking for. It is meant to show you in what directions you can look for your specific solution. I would suggest putting more details in your question:
For what purpose are you using this website?
What will this form be used for?
Why are you displaying a form inside a dialog?
Answering these questions and specifying your problem help you understand what you are trying to achieve and help us to answer your question properly.
You can read more about forms and javascript dialogs at the following links:
http://www.w3schools.com/html/html_forms.asp
http://mdrisser.r1designs.net/blog/?p=3
And for information about the jQuery framework:
http://www.jquery.com
http://ui.jquery.com
Related
I have a form on a page in my web app that I want to submit to a different URL, I am using:
<button type="submit"></button>
instead of:
<input type="submit">
because I want to embed an icon in the buttons text.
when the button is clicked instead of submitting data to the forms onsubmit attribute, it sends it to the current page.
How can I make the button submit to a different path or rather add an icon to the input submit button? (preferably without JavaScript and jQuery because I want the submit method to be POST and not GET)
Here are a few ways you can create a link to another page.
First, I have an a tag acting as a button, a simple a tag, and a form set up to direct you to another page. Any of these three methods should work for you.
I am using target="_blank" here for the link opens in another tab.
If you want to add icons for styling, I have used Font Awesome a lot.
I recommend checking out the different stylings.
<button> MDN Web Docs</button>
MDN Web Docs
<form action="https://developer.mozilla.org//" target="_blank">
<input type="submit" value="MDN Web Docs" />
</form>
https://jsfiddle.net/6wu3v9Lc/3/
Font Awesome Example
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
https://jsfiddle.net/6wu3v9Lc/5/
I changed the form onsubmit attribute to action.
I don't quite understand though why action is better than onsubmit.
I've been using HTML5's button form attribute to have my submit button show up outside of the form and still trigger my submit.
My form looks something like this:
<article>
<header>This is my form</header>
<section>
<p>Something explaining what is happening on this form.</p>
<form id="myform" action="/submit" name="myform">
<input type="text" name="thing">
</form>
</section>
<footer>
<button type="submit" form="myform">Submit</button>
</footer>
</article>
I have this working fine in Chrome/Firefox/Safari, but I went to test it in IE10 today and the form doesn't submit!
Besides redesigning all of my pages to not use the form= attribute, does anyone know how to get around this? I want it to work like a normal submit button inside a form, where hitting enter in the text field will submit the form as well as clicking the button.
I'd like to avoid adding click events and listening for enter on text fields to trigger the submit in JavaScript if possible.
It seems the attribute form="myForm" is not supported on IE.
View the table here for more info:
http://caniuse.com/#search=Form%20features
The only way to replicate this will be to use/create a javascript polyfill to replicate the desired behaviour.
You can find a list of cross-browser polyfills here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-Browser-Polyfills
I couldn't find one to fill the form behaviour (but only looked for a min, so check yourself).
I think you will have to write your own custom polyfill for this.
A simple inline onclick would look like this:
<button
type="submit"
form="myform"
onclick="javascript:getElementById(this.getAttribute('form')).submit();"
>Submit</button>
JSFiddle: http://jsfiddle.net/mf63k/4/
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 have ASP.Net code generating my button's HTML for me using divs to get it to look and behave how I want. This question is regarding the HTML produced by the ASP.Net code.
A standard button is easy, just set the onClick event of the div to change the page location:
<div name="mybutton" id="mybutton" class="customButton" onClick="javascript:document.location.href='wherever.html';">
Button Text
</div>
This works great, however, if I want a button like this to submit the form in which it resides, I would have imagined something like below:
<form action="whatever.html" method="post">
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton" onClick="javascript:this.form.submit();">
Button Text
</div>
</form>
However, that does not work :( Does anyone have any sparkling ideas?
onClick="javascript:this.form.submit();">
this in div onclick don't have attribute form, you may try this.parentNode.submit() or document.forms[0].submit() will do
Also, onClick, should be onclick, some browsers don't work with onClick
Are you aware of <button> elements? <button> elements can be styled just like <div> elements and can have type="submit" so they submit the form without javascript:
<form action="whatever.html" method="post">
<button name="mysubmitbutton" id="mysubmitbutton" type="submit" class="customButton">
Button Text
</button>
</form>
Using a <button> is also more semantic, whereas <div> is very generic. You get the following benefits for free:
JavaScript is not necessary to submit the form
Accessibility tools, e.g. screen readers, will (correctly) treat it as a button and not part of the normal text flow
<button type="submit"> becomes a "default" button, which means the return key will automatically submit the form. You can't do this with a <div>, you'd have to add a separate keydown handler to the <form> element.
There's one (non-) caveat: a <button> can only have phrasing content, though it's unlikely anyone would need any other type of content when using the element to submit a form.
To keep the scripting in one place rather than using onClick in the HTML tag, add the following code to your script block:
$('#id-of-the-button').click(function() {document.forms[0].submit()});
Which assumes you just have the one form on the page.
Why does everyone have to complicate things. Just use jQuery!
<script type="text/javascript">
$(document).ready(function() {
$('#divID').click(function(){
$('#formID').submit();
)};
$('#submitID').hide();
)};
</script>
<form name="whatever" method="post" action="somefile.php" id="formID">
<input type="hidden" name="test" value="somevalue" />
<input type="submit" name="submit" value="Submit" id="submitID" />
</form>
<div id="divID">Click Me to Submit</div>
The div doesn't even have to be in the form to submit it. The only thing that is missing here is the include of jquery.js.
Also, there is a Submit button that is hidden by jQuery, so if a non compatible browser is used, the submit button will show and allow the user to submit the form.
A couple of things to note:
Non-JavaScript enabled clients won't be able to submit your form
The w3c specification does not allow nested forms in HTML - you'll potentially find that the action and method tags are ignored for this form in modern browsers, and that other ASP.NET controls no longer post-back correctly (as their form has been closed).
If you want it to be treated as a proper ASP.NET postback, you can call the methods supplied by the framework, namely __doPostBack(eventTarget, eventArgument):
<div name="mysubmitbutton" id="mysubmitbutton" class="customButton"
onclick="javascript:__doPostBack('<%=mysubmitbutton.ClientID %>', 'MyCustomArgument');">
Button Text
</div>
You have the button tag
http://www.w3schools.com/tags/tag_button.asp
<button>What ever you want</button>
I came upon a revelation the other day. When attempting to create a submit button by using an image, I ran into a problem where the image was not displayed but the value text was. At the time, this is not what I wanted, but now, as I look back, I see some potential use for this.
If you need to send data to another page, but none of it requires user input, you can either send it in the link (or form) via GET or through a form via POST. The problem is that the former creates ugly URLs and the latter requires a submit button that looks out of place. Of course, I could come up with an image, but what if I just wanted selectable text.
So, I started playing around a bit and Firefox appears to render the following how I desire, as a clickable link that submits a form. All you have to do is remove the src attribute from the input type='image' tag:
<form action='some_page' method='post'>
<input type='hidden' name='email_address' value='test#test.com' />
<input type='image' value='E-mail User' />
</form>
Does this solution work on other browsers? What are the downsides to doing this (aside from the obvious fact that your link CSS isn't applied properly)?
There's no need to use an image input, why not just use a regular submit button and apply some heavy-handed styling to make it look like regular text?
<input type="submit" value="E-mail User" class="link">
<style>
input.link {
border: none;
background: none;
cursor: pointer;
/* etc */
}
</style>
I like a solution that uses an actual link (hidden) that gets exposed via javascript in conjunction with a button inside a noscript tag.
<form action="some_page" method="post">
<input type="hidden" name="email_address" value="test#test.com" />
E-mail User
<noscript>
<input type="submit" value="E-mail User" />
</noscript>
</form>
$('submit-link').click( function() {
$(this).closest('form').submit();
return false;
})
.show();
Using HTML 4.01 Strict it worked on FF3.5, but not on IE8 or Chrome. The link works, but there is no text just a blank spot for a missing image.
So, this would appear to be a bad idea, since it may only work on one browser. To me that is a pretty big downside, unless your only market is for Firefox browsers, then, go ahead, great idea. :)
As James Skidmore suggested, it is easy to do an onclick with javascript to submit it as a post.
I would suggest unobtrusive JS, so, if someone doesn't have JS on then it will work as a link, doing a GET submission, but if they have JS then it would change the behavior to be POST with no ugly url change.
Or, as was mentioned the background of the image can blend in with the form background.
You could instead submit the form dynamically via JS, or use a regular submit button with a transparent or white background.