I have build a quite complex widget which contains "some kind of
form". It has a form tag, but I'm loading a lot of stuff in there via
Ajax etc. Cannot explain it in detail, and the code is too long to
paste in here.
Now, in a "live('click', function()" I use for one of the form fields,
I'm writing a couple of values into hidden fields of another form.
That works fine, as I can see them in the generated code. But if I
leave the page and then hit the back button, the values are gone.
If I write some values into those fields outside the live click
function though, they are still there when I leave the page and come
back using the back button.
But I need to write the values into the hidden fields out of the live
click function (I'm inserting values from fields of my form into
them).
I don't know what causes this and wasn't able to find a workaround yet
(even though I tried a lot).
Any ideas?
Thanks!
Have a look at the jquery history plugin (http://plugins.jquery.com/project/history)
Usually what happens is that browser remembers what you have entered into a form (even if you don't submit it) so that when you hit back button, it populates all the visible fields for you.
It seems it's not the case with hidden fields. There's a workaround though.
Every time one of your hidden fields is changed, you can add #part to your url (eg. www.mysite.com/users#userId,groupId,...).
When the page is loaded again (via back button for example), it will contain the #part. Parse it as a string to determine how to populate hidden fields and populate them.
Review the history plugin for jQuery to see how to read the #part.http://plugins.jquery.com/files/jquery.history.js_0.txt
Use CSS to hide the input instead of the input type.
<input type="text" id="foo" name="foo" style="display: none;" />
instead of
<input type="hidden" id="foo" name="foo" />
I tripped over the same issue and this seems to resolve it.
Related
I'm working on a web UI that has a form which users can either fill out themselves, or load data into and then edit. They want certain fields to use the autocomplete option, and so to start I've added this to one field:
<form type="submit" autocomplete="on">
<input type="text" class="form-cmd" id="command"
name="command" ng-model="fields.command" />
</form>
This sort of works, but not the way I need it to. Regardless of whether the user types it in or loads the info into the field, they have to hit Enter or else the text doesn't get included in the autocomplete list. The problem is that there's currently no requirement to use the Enter key (and in practice nobody does). Once the form is filled out, a button (Add Entry) is clicked that takes all the info in 'fields' (which includes all the info from the form, fields.command, fields.name, etc) and then makes a REST call using that data as args.
I've been toying around with trying to just trigger an 'Enter' keypress in that field programatically behind the scenes in the Command text field when the Add Entry button is clicked, but so far I haven't had any luck and I'm wondering if I'm not just missing something simple here. Does anyone know how to achieve this?
I am using a template site from Webmatrix 3.0 that includes a sign in page (among other pages) working primarily with c#, razor, html, and jquery. I have created a new page where users can register that includes a password field, as well as other text fields. My issue is, even when I simply have two fields on the cshtml page and nothing else, these fields are filled with data during an initial page request. This data is old "remember me" data from a previous sign in.
I can either do a get request from another page's form to land on this page, or navigate here from a href link, and the result is the same. To try to find the issue, I even cut almost all the code from the page leaving simply this:
<input type="text" />
<input type="password" />
And both fields are populated when I make an initial page request. I have tried to use things like
value = " something like blank or a single space in here "
etc in the html, as well as trying to clear out the fields to no avail with javascript (which I prefer not to since I have had very spotty success with things like onload). Is there a fairly sure fire way to clear text and password fields for initial page requests? Edit - I have tried autocomplete=off to no avail as well.
I'm working on an input form, and I have a Javascript function that gets all of the field values when you press a button. I am looking for a way to automatically refresh the Javascript values (so I can, for example, check if a username is too short on a registration page as they type, and also check if the username is available). Would this be possible?
To clarify, I have an HTML input field (for text), and as the user is typing a result, automatically update.
I'm also open to using PHP or jQuery if it's not possible using solely Javascript, but I'd prefer Javascript if it's possible. Also, sorry if this is a rather basic question, but I've searched and searched and can't find anything on it. I know it's possible because I've seen it on websites (in fact, even on this one, as you type a question, it updates the preview at the bottom).
You should use JQuery Validation Plugin to reduce the heavy checking.
Check this one out at http://jquery.bassistance.de/validate/demo/
No jQuery needed
<input type="text" onKeyUp="validate(this.value);">
function validate(value){
//validate code on value
}
You should monitor onkeyup event
<input type="text" id="test">
$('#test').on('keyup', function() { //this function is triggered every time the user releases a key while typing inside the text field above
//do whatever you want here
});
I'm building a small website with JQTouch and the first problem I've run into yet is with a form.
I have a form
<form action='action.php' class='jqt' id='ajax_post' method='post' name='pform'>
(where the name attribute is there when I tried to access it with document.pform)and within it is a ul list of a elements as follows:
<a class="submit" href="#" value="somevalue">Text displayed</a>
Underneath, inside the form, I placed a single hidden input field (because I only want to POST one value), where my goal is to populate it by clicking one of the links and then submitting:
<input name='somename' type='hidden' />
On submission, the webserver reports that a POST was performed, and there is a brief slide animation before the page returns to the original form. Trying to hack my way into jqtouch.js to populate the input field doesn't work (where what I'm trying is $form.somename.value = $(this).attr('value'); inside submitParentForm())
The CSS captures well and the list is displayed nicely. In fact, if I remove the submit class and insert my own form submission override with document.somename.value = %(this).attr('value'); document.pform.submit(); inside, for instance, hrefor onClick in one of the links, the POST is performed and the next page is displayed, albeit by reloading and not with a jQTouch animation, which is my goal.
My question: How can I use jQTouch to show a slide animation when I post a form which I want to populate with the value of an a element when a user clicks on it?
Thanks in advance.
I wouldn't submit the form (if I wanted to use a submit button I'd use preventDefault). I'd just use $.post() to post the data and then jQT.goTo to go to the new page with a slide animation. The new page is in jqTouch, of course, only another div in the same document which makes it easy to set any information you'd like on that page using the response in the callback of $.post().
But this might not be a viable solution to what you're trying to do, I don't really understand the question very well.
I'm debugging a weird problem with two simlar search forms - when user types some search criteria in a text box and hits enter, one form returns results and another just reloads. And it happens only in IE - FF treats both forms as expected. I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
How do I find what form element caused submit event?
Thanks,
Andrey
Sounds like the single textbox form bug in IE.
To get around it, you can use Javascript to handle the enter key press, or just insert a blank hidden textbox. Lame, I know.
I suspect that hitting enter is triggering onclick for one of the search buttons in one case and something else in another.
Yes. Browsers may, largely at their whim, treat enter as clicking on a submit-button, just submitting a form, or nothing. Put general form submission stuff in form.onsubmit, rather than an onclick on the first submit button.
You could sprinkle your form elements with onclick events to set a hidden form variable with a different value per element, then sniff the results either with a DOM inspector or through something like Fiddler.
There may be a way to simply have a form onsubmit() event that you can extract the triggering element from the event object, but I'd have to dive into the docs to see if this is possible... if I get chance I'll do some looking.
I think I may help you much If you provide your two forms code. However, check to see for the following submit button code:
<input type="submit" value="Submit">
When you use this, then when you press Enter among the corresponding form, the form will be submitted. If you wish to check something before submitting you can use JavaScript Function like the following:
<input type="button" onclick="javascript_function_name();" value="Submit">
Thanks. If this can not help you, please express the situation more briefly.