Probably simple but it's confusing me at the moment.
If you look at this jsfiddle: fiddle
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form id='adminForm'>
<input type="text" />
<!--<input type="password" />-->
</form>
<script>
$(document).ready( function(){
$("#adminForm").submit(function() {
alert('submit');
return false;
});
});
</script>
</body>
</html>
If i press ENTER to submit the form, it works fine and i get the alert. But if I then uncomment the other input and try it again, nothing happens. Doesn't make any difference which input is commented, it seems that in IE and Firefox it is only working when there is 1 input in the form instead of multiple ones... Whereas in Opera it works fine with multiple inputs.
Any clues?
Cheers.
well, yeah you need submit button but if you don't want to show it you can either
<input type="submit" style="visibility:hidden;" />
or
<input type="submit" style="position:absolute;left:-9999px;width:1px;height:1px;" />
Related
I want to open my form and focus automatically on first input or text area, and the .focus() function I used is working on Chrome and Safari(even in IE). But unfortunately it is not working in Firefox and IOS chrome.
$(document).ready(function() {
alert("Check whether it is focused on first text area!");
$("#form input:text").first().focus();
//$(":input:first").focus();
//setTimeout(function (){$("#form input:text, #formId textarea").first().focus(); }, 0);
$('#do').on('click', function() {
alert("Thanks!");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form name="form" id="form">
<input type="text" id="firstelement" value="myvalue" /><br>
<input type="text" id="anotherelement" value="myvalue2" />
<input type="submit" id="do" />
</form>
I have Tried setting timeout but it is also not working.
I have created a jsfiddle for it in this for chrome, the focus is happening (blue shade around the text area). but for Firefox it is not(dotted line around the area).
Is it a bug in Firefox? Can anyone help me on this?
You could try using the autofocus HTML5 attribute if you so desire.
I tested autofocus on IE11, Chrome and Firefox. Only does not seem to be working in a stack snippet. ( iframe shenanigans ? )
<!DOCTYPE html>
<html>
<head></head>
<body>
<form name="form" id="form">
<input type="text" id="firstelement" value="myvalue" autofocus>
<br>
<input type="text" id="anotherelement" value="myvalue2">
<input type="submit" id="do">
</form>
</body>
</html>
I would like to have a button to the right of a textbox which when clicked would populate the textbox with a message.
I am assuming I can accomplish this with Javascript but the "onclick" method doesn't seem to work for me. I am probably doing it wrong.
Using JavaScript and HTML :
I am guessing what you need is, may be as follow:
<!DOCTYPE html>
<html>
<head>
<script>
function ButtonClick_Test()
{
document.getElementById("result").value= ' your text here';
}
</script>
</head>
<body>
<form>
Click Here:<br/>
<input type="button" value="Click Here" name="no" onclick="ButtonClick_Test()">
<input type="text" id="result" size="20">
</form>
</body>
</html>
Assuming you are using jQuery(http://jquery.com/):
$('#buttonID').click(function() {
$('#textareaID').val('Your text goes here');
}
I have a website where I want people to be able to type something in a text box and get sent to that directory based on what they entered.
Say customer numbers, so we have customer # 155. His invoices are in folder /invoices/155 directory. I want him to be able to type in his customer # and be directed with a button click to his directory with all his invoices.
Now I have coded the below code but it only works when I click on the button with the mouse. In Internet Explorer When I press enter it gives me a bunch of gook in the address bar and doesn't do anything. It looks like this in the address bar:
file:///C:/Users/My%20Name/Desktop/test.html?dir=%2Finvoices%2F&userinput=155
Instead of loading the folder /invoices/155/.
<html>
<head>
<title>test</title>
</head>
<form name="goto" action="">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="button" value="try me" onclick="window.location=this.form.dir.value+userinput.value">
</form>
Can anyone tell me what is wrong with the code and what can I do to fix it? Thanks in advance.
In some browsers the form will be posted when you press enter, eventhough there is no submit button. Use a submit button, and catch the submit, then you handle all cases:
<form name="goto" action="" onsubmit="window.location=this.dir.value+this.userinput.value;return false;">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text"> <input type="submit" value="try me">
</form>
It won't work, if you use file protocol. Especially in IE. You need a real web server.
And to let a customer type in his on id is extremely insecure. Anyone could type in any id. Use a login.
It is really*** important to sanitize every user input to prevent abuse.
It is a long way to go.
I think you should go for onsubmit on <form>
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<script>
function handleFormSubmit(form)
{
window.location = form.dir.value + form.userinput.value;
return false;
}
</script>
</head>
<body>
<form onsubmit="return handleFormSubmit(this)">
<input name="dir" type="hidden" value="/invoices/">
<input name="userinput" type="text">
<input type="submit" value="try me" >
</form>
</body>
</html>
BTW:
Inlining javascript is not so good. Use script tag or external .js-file.
Edit:
Oops! OK, the error was that I wrote this.form.dir but it needed to be this.dir because this already referred to the form, now that the javascript handler was on the form tag (onsubmit="<handler-code>"). That works - http://jsfiddle.net/Q875a/
Edit 2:
Inlining javascript means that you write javascript code in your html tags (form, input,...) in the onXXX attributes - it's not readable. Having your script in a script tag within a handler-function (i.e. handleFormSubmit) makes it much more readable especially if your site gets more and more script in it - see current script and onsubmit-attribute.
Finally, if you want to to take a step further to crossbrowser, powerful javascript development you should take a look at jQuery - it's imho the door to really professional and exiting javascript programming!
JSFiddle to test:
http://jsfiddle.net/yNTK5/
jQuery-links concerning the topic:
http://api.jquery.com/submit/
http://api.jquery.com/on/
http://api.jquery.com/ready/
I have this piece of simple code.
<html>
<head>
<script type="text/javascript">
function changeText()
{
var form = document.forms['detail'];
form.desc.value="success";
}
</script>
</head>
<body>
<form name="detail">
<input type="text" name="desc" id="desc" >
<input type="submit" value="changetext" onClick=changeText()>
</form>
</body>
</html>
When i run this in Mozilla browser the value of the textbox named "desc" changes but disappears immediately...i.e it is not shown forever and becomes empty.
How can I fix it.
Regards,
Vijay
Try using:
<input type="submit" value="changetext" onClick="changeText(); return false;">
It looks like your page is refreshing, and that is probably why your field text disappears. If your onClick listener returns false, it will prevent this default behaviour.
you can give that textbox an id
and then run document.getElementById("textboxid").value ="success";
that will work in all browsers
<input type="text" name="txt" id="txt" value="Name" onblur="if(this.value.length == 0) this.value='Name';" onclick="if(this.value == 'Name') this.value='';" />
guy schaller
document.getElementById("textboxid").value ="success";
is good idea!
vijayakumar-n
try to save var form = document.forms['detail']; in a hidden input! then you will always be able to reach the form data..
The form gets submitted upon clicking the button that is typed as "submit" - the page gets reloaded.
Return false from the changeText() method and change onClick=changeText() to onClick="return changeText();" to prevent the form from getting submitted.
Alternatively, you can change the type of the button from "submit"to "button" to prevent submission. Then you'd have to add another submit button (even returning false will need you to find another way to submit the form).
I have a website where we use Javascript to submit the login form. On Firefox it prompts the user to remember their password, when they login, but on IE7 it doesn't.
After doing some research it looks like the user is only prompted in IE7 when the form is submitted via a Submit control. I've created some sample html to prove this is the case.
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return document.forms[0].submit();
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input type="submit"/>
</form>
</body>
</html>
The href link doesn't get the prompt but the submit button will in IE7. Both work in Firefox.
I can't get the style of my site to look the same with a submit button, Does anyone know how to get the remember password prompt to show up when submitting via Javascript?
Why not try hooking the form submission this way?
<html>
<head>
<title>test autocomplete</title>
<script type="text/javascript">
function submitForm()
{
return true;
}
</script>
</head>
<body>
<form method="GET" action="test_autocomplete.html" onsubmit="return submitForm();">
<input type="text" id="username" name="username">
<br>
<input type="password" id="password" name="password"/>
<br>
Submit
<br>
<input id="FORMBUTTON" type="submit"/>
</form>
</body>
</html>
That way your function will be called whether the link is clicked or the submit button is pushed (or the enter key is pressed) and you can cancel the submission by returning false. This may affect the way IE7 interprets the form's submission.
Edit: I would recommend always hooking form submission this way rather than calling submit() on the form object. If you call submit() then it will not trigger the form object's onsubmit.
Did you try putting in url in the href and attaching a click event handler to submit the form and returning false from the click handler so that the url does not get navigates to.
Alternatively hidden submit button triggered via javascript?
You could try using the HTML <button> tag instead of a link or a submit button.
For example,
<button type="submit">Submit</button>
The <button> tag is much easier to style than the standard <input type="submit">. There are some cross-browser quirks but they are not insurmountable.
A really great article about the use of <button> can be found at particletree: Rediscovering the button element