I have a form with some inputs text.
All keys works fine in text inputs except the spacebar key.
When I alert the keyCode it alert 32 but nothing append in the field.
I'm using JQuery 1.10.2, JQeryUI 1.9.2 and twitter bootstrap.
As a side note, the whole form is rendered in ajax with xajax library (http://www.xajax-project.org/)
Nothing fancy about the HTML :
<div class="span6">
<div id="dJob_Title" class="control-group">
<label class="control-label">Job title</label>
<div class="controls">
<input type="text" name="Job_title" id="Job_title" class="span12" placeholder="Job title..." value="'.$Job_title.'">
</div>
</div>
</div>
Thanks in advance for your help.
(sorry for my very bad English).
Problem I think is you havent closed your input tag or check if all html tags are well formatted
<input type="text" name="Job_title" id="Job_title" class="span12" placeholder="Job title..." value="'.$Job_title.'">
</input>
Ok, i finaly found out the mistake.
It's a js for image slider (fadeSlideShow.js)
As it's instantiate in index.php (and 90% of the site is rendered via ajax in a div in index.php) even if i don't see it, it still capturing the space event (wich is autoplay)
i just commented this in the js :
else if(e.which==32){
if(intval){stopAutoplay();}
else{autoplay();}
return false;
}
and all is fine !
Thank you all for your response/reactivity and the waste of your time for something i have should seen before.
Related
In my polymer 2 app I have something like this:
<form class="styling" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email">
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password">
</div>
<div class="styling">
<a class="styling" on-tap="doRequestFunction">Login<a>
</div>
</form>
My issue is there are a lot of sources saying what works and what doesn't and I've tried removing the outer div, I've tried changing the email to a username, I've tried to change the <a> to an <input type="submit">. I've also tried to add an invisible username input below the email input. I have a database element that does my ajax calls so ideally I'd like to just call the request function on a form submit, but there doesn't appear to be a way to do this because it wants me to perform the action with a file or something like that.
TL;DR is there a way to do this:
<form class="styling" onSubmit="doTheRequestFunction" autocomplete="on">
<div class="styling" >
<label>email</label>
<input name="email" autocomplete="email"/>
</div>
<div class="styling" >
<label>email</label>
<input name="password" autocomplete="current-password"/>
</div>
<div class="styling">
<input class="styling" type="submit">Login</input>
</div>
</form>
There doesn't appear to be a way to do this in polymer and the ways that do don't request for the users password and are depreciated anyways. Using Chrome primarily.
EDIT: Please, no JQuery, only Javascript. I don't know what JQuery is doing half the time and it's sloppy.
autocomplete is an HTML attribute (https://www.w3schools.com/tags/att_input_autocomplete.asp). It's either on or off. It's designed to tell the browser whether it should attempt to autocomplete a field or not. The default is on so you shouldn't have to set it unless you're trying to prevent the browser from autocompleting.
Try to remove all your autocomplete attributes, and submit your form. The browser should ask you if you want to save your username and password at which point it should be populated next time you come to your form.
Also, you have an bad tag on the end of your submit button: </inoput>
<input type="submit" value="Send Request"> should be fine.
Boys, I found it.
paper-input autocomplete fails to fill
This is a polymer specific issue I was having. Currently polymer requested support for their auto-fill apparently and it's still not there. This is the solution for now. Pop that bad boy into you index.html and weep tears of joy.
Just make it
<input name="password" type="password"/>
So if input field has attribute type as password it will trigger browser to remember.
I am working on a project where AngularJS is used heavily for the front-end. Here is what I have:
The validation rule I want to have is as follows:
The Next button should be disabled unless the reason inputted is at least 10 characters.
Also, I'd like to be able to tell the user how many characters are left before he / she is able to submit. This would go in the bottom right hand corner of the textarea.
CODE:
<form name="paymentForm">
<div class="form-group" id="Div2">
<select ng-model="selectedPaymentStatus" ng-options="ps.name for ps in paymentStatus"></select>
</div><!-- .form_group -->
<div ng-show="selectedPaymentStatus.value === 'paymentDeferred'" class="form-group" id="Div3">
<p>Reason</p>
<textarea class="form-control" ng-model="crate.paymentDeferredReason" ng-minlength="10"></textarea>
</div><!-- .form_group -->
</form>
<button class="btn wizard-next-btn pull-right" ng-disabled="paymentForm.$valid" ng-click="nextStep()">Next</button>
<button class="btn wizard-back-btn" ng-click="previousStep()">Back</button>
For some reason the above code is not working! Even when I type a single character, the next button gets enabled!
You need to make two corrections:
ng-disabled="paymentForm.$valid" should actually be ng-disabled="paymentForm.$invalid"
Add ng-required="true" to the <textarea>; otherwise ng-minlength seems not to take effect on empty fields.
Also the button being outside the form seems to work ok, but I would recommend against it; I have a feeling it would not work in all cases (but cannot prove it right now :)
Relevant fiddle: http://jsfiddle.net/J2JA6/
I'm new to html and JS and I have a form with a few fields that I need posted to a URL.
<form>
<div>
<label style="font-size:16px" for="title">Title:</label>
<input type="text" id="title" maxlength="128"/>
</div>
<div>
<label style="font-size:16px" for="description">Description:</label>
<textarea id="description" maxlength="1999"></textarea>
</div>
<div>
<label style="font-size:16px" for="idnumber">IDNumber:</label>
<input type="number" id="idnumber"/>
</div>
</form>
I need the values entered into this form to be posted to a URL that already knows how to process the input. I'm sure this is easy to do but I'm new and I'm having trouble finding a solution. Apologies for any incorrect terminology. Thanks!
You can use the action attribute:
<form action="some/url" method="post">
<!-- ... -->
<input type="submit" value="Submit" /> <!-- Submit button -->
</form>
You have to add an action to your form tag that points to a server side script.
<form action="myscript.php" method="post">
Alternatively, you can use JavaScript to post it as an AJAX request which submits the request without a page refresh.
I'd say you're on the right track. This would be perfectly easy using basic HTML: Add an action="mySubmitPage.php" to the form element. It sounds like you want to do it without refreshing/changing the page, though (at least, that's how it sounds by "with Javascript")
That will involve an "asynchronous" submit. The fancy term is "AJAX". That part can be a lot easier using some form of Javascript framework, especially if you want to support all browser quirks. Here's an example of doing it using JQuery, for instance:
jQuery - Send a form asynchronously
I have never done this before so I apologize if I don't describe my issue good enough or don't use all the right syntax.
What I have on my website is an email form. The user can type in a message, along with their name and some other data. Once they finish filling out the form they can submit it and it goes to my email and all is well. Because the form has JavaScript in it, I automatically had it hidden with CSS and then made it visible through JavaScript. That way if the user has their JavaScript turned off the form won't appear.
And it works great. And I thought it displayed great too. I checked it across all my local testing browsers (Chrome 21, FF 14, IE 9, Opera 12 and Safari 5) as well as through Adobe Browser lab for IE 8, 7 and 6. In all of them it looked fantastic. I even checked it on my Android phone and my girlfriend's Blackberry. It looked fine.
Until I tested it on my mom's computer with IE 8. Although in Adobe Browserlab it says the form displays, in a real test the form doesn't show up.
You can test it for yourself here.
The issue is with the form id, "emailForm". My Form has the markup like so:
<form id="emailForm" method="POST" action="../javascript/email_form.php" onSubmit="return validateForm();">
<label id="emailSubjectLabel">Email Subject*:</label><input class="form" title="Email Subject" type="text" name="subject" id="emailSubject"><br>
<label id="nameLabel">Your Name*:</label><input class="form" title="Your Name" type="text" name="name" id="yourName"><br>
<label id="emailLabel">Your Email:</label><input class="form" title="Your Email Address" type="text" name="email" id="yourEmail"><br>
<label id="messageLabel">Your Message*:</label>
<textarea class="form" title="Write Something..." name="message" id="message" cols="40" rows="5"></textarea>
<input class="button" type="submit" value="Submit">
<p class="error">* required.</p>
</form>
My CSS has a whole bunch of code, but it has this in regards to making the form invisible:
#emailForm, #javaText {
display: none;
}
(note: #javaText is some text on the screen that also is hidden unless the user has JavaScript installed. It also doesn't work in IE 8. Just for simplicity I'm not mentioning it.)
And the JavaScript looks like this:
document.getElementById("emailForm").style.display = "block";
document.getElementById("javaText").style.display = "inline";
function validateForm() {
//function that validates the form
}
I've placed the JavaScript at the bottom of the page, hoping it would help. I've tried changing the style of the content right on the main HTML page, I've checked my mother's JavaScript and it is enabled. I just don't know why it isn't working.
If somebody could tell me what I'm doing wrong, I'd be very thankful. This has been giving me a headache for a week now.
(And yes, I've told her IE sucks and she should go with Chrome, but the reason she doesn't is a whole different story...)
Thanks for your help. I can't wait to hear what the solution is!
IE8 is not loading your form_validation.js file and that's why it isn't running your initialization code in that file.
You need to change the type on your script tag to type="text/javascript" or remove the type entirely. You have type="application/javascript" which is not correct.
After further exploration, see Why doesn't IE8 recognize type="application/javascript" in a script tag? for more discussion.
My website has been created with a CSS/HTML frame work that has been integrated into an ASP.NET website.
Inside of a ContentPlaceHolder, I have a simple login form. The catch is that I am using the onclick event of an image to submit the form. It normally works pretty straight forward, but this time I am having an issue.
<div id="login">
<form action="index.aspx" method="post" id="nothingForm" name="nothingForm">
</form>
<form action="https://google.com.au" method="post" id="loginform" name="loginform">
<input type="text" name="uname" value="username" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
<input type="password" name="pword" value="password" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;"/>
</form>
<br /><img src="images/login.gif" alt="" onclick="document['loginform'].submit()" /> </div>
I have to stick another form before the real form to make onclick="document['loginform'].submit()" actually work. This should not be the case, of course, but I was unable to find any solutions to it on the web.
Has anyone else come across this before?
Did you try out document.getElementById("loginform").submit()? I would think this is better, since I have never seen anyone access elements on the document itself like that before. May be some kind of strange side effect.
Your problem is that the page already has a form around all the code. Forms can not be nested, so your first form tag will be ignored, and it's end tag will end the outer form.
You have to place your form outside the already existing form.