I'm inserting a form via ajax dynamically into the page. After inserting it into the dom tree, i would like to reinitialize the jquery mobile to style the form. I had a look into http://jquerymobile.com/test/docs/api/events.html but since the documentation is pretty unhelpful for jquery mobile I'm not able to find the correct event.
After you have added the form to the DOM, use .trigger('create'); on the form to initialize any widgets (form elements) you've just added:
...html('<form><input data-role="slider" type="text" /><input type="button" value="button" /></form>').trigger('create');
Here is a demo: http://jsfiddle.net/TBRXk/
Related
I need to create a form that by clicking on it will redirect to another website with special 'inputs' tags values.
something like:
<form action="http://example.com" method="post">
<input type="hidden" name="val1" value="something">
<input type="hidden" name="val2" value="else">
<input type="submit" name="submit" value="Go">
</form>
The custom HTML feature that I find will put it inside an iframe, and it looks bad. Is there a way to do it that will look 'normal'?
If you utilize Wix Code you can develop that inside your Wix page without the need of any html forms.
Simple solution:
- Add the form input elements you need on your page
- Add a button to click on
- Add av event handler to the button and grab the values from the input fields
- Send that data to any site or redirect the user to the site you want using wixLocation.to("url") with the query parameters you might need from the form.
I have a registration page.after completing the registration the user will redirect to a new page. In new page when I click the back button I redirect to last page with last data filled up.how to refresh the page to delete form data. The framework is codeignighter.
To refresh or redirect page in codeigniter there is function redirect(YOUR_URL).
Have a Look in Helper class for more details
If you are referring to browser back button keep autocomplete off for the form fields in your first form
You can use autocomplete for the complete form
<form action="/action_page.php" autocomplete="off">
Or specifically to each control as
<input type="email" name="email" autocomplete="off">
You can also make it on for specific controls/entire form if you need it
if your problem still persists you could use
<body onload="document.refresh();">
This shall refresh the page on loading for the first time
include this in your page if required to force reset the form on load if you need you can bind this with a javascript onload function
<script type="text/javascript">
document.getElementById("myForm").reset();
</script>
in case of application back button {if used with href or redirect()}
Shall keep form clean even if autocomplete is not set unless the user takes from browser autofill or you fill them with code
Is it possible to create Ajax-only form in Dojo? I need to make AJAX request on button click/ENTER, but not to refresh the whole page.
This is my simple dialog content:
<div id="myDialog">
<table>
<tr>
<td>Name</td>
<td><input name="name" type="text"/></td>
</tr>
<tr>
<td>Owner</td>
<td><input name="owner" type="text"/></td>
</tr>
</table>
<div class="buttons">
<button class='ok'>OK</button>
<button class='cancel'>Cancel</button>
</div>
</div>
I convert it to form:
form = new Form({action: okAction, method: ''}, dojo.byId('myDialog'))
The problem is, that after creating the Dojo form my actions on buttons are no longer called, instead clicking any of them or pressing ENTER causes page refresh.
Is it possible to bind AJAX request with form, instead of whole page submit? In JSF2 it is functioning so.
I'm not a fan of using forms in AJAX applications, but I'd like to use Dojo validation.
The action property means you submit the page, causing a complete page refresh (depending on the return value of your okAction). If you want to create a client-side form submit, you need to use the onSubmit event handler, for example:
form.onSubmit = function(event) {
// Do this stuff
};
Your event handler will probably contain an AJAX request, like the one #James Jithin describes in his answer.
You can read more about the event handlers at the API documentation.
You can GET or POST the form using dojo. See the form attribute set during the xhr call.
dojo.xhrPost
Here, you can pass the id of the form and get it submitted to the server. Then on the onLoad, you can decide what to do with the response.
I've noticed that browsers do not store form values until the form is submitted, which means that if you're using AJAX instead of a standard form submit, your browser's auto-fill is never populated. Is there a way to force populate your browsers auto-fill/auto-complete so that I can have this convenience with forms that are submitted via AJAX? It's annoying to go to my AJAX page and have to type in the same things in the form fields every time because the browser doesn't remember them.
My question is pretty much identical to the this one, except that only a work around in FireFox is provided as the accepted answer to that question. I'm looking for a solution that works in all major browsers (at least Chrome, FF, and IE), if there is one.
Note: I am not talking about AJAX auto-complete plugins, which is what almost always pops up when googling this question. I am talking about your browser's built-in auto-complete or auto-fill that helps you fill out forms by remembering what you entered in the past.
For anyone who's still trying to solve this, seem like I've found the answer.
Chromium tries to recognize the submit event, even if you preventDefault and handle the actual submission yourself.
That's it, you need to preventDefault the submit event, not the click event.
This worked on Chrome, Edge and IE 11 at the time of writing (I'm too lazy to download and test it on Firefox).
Here's your form:
<form method="POST" id="my-form">
<label>Email</label>
<input autocomplete="email" type="email" name="email">
<button type="submit">Subscribe</button>
</form>
Notice the autocomplete attribute. These are all the possible values that you can use for autocomplete.
In JavaScript, simply do this:
$("#my-form").on("submit", function (ev) {
ev.preventDefault();
// Do AJAX stuff here
});
The browser will remember whatever email you've entered on clicking subscribe button.
I have also come across this; there doesn't seem to be a great solution, certainly not a cross browser one, but here is one for IE I haven't seen anyone mention:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<SCRIPT>
function subForm()
{
window.external.AutoCompleteSaveForm(f1);
f1.submit();
}
</script>
</HEAD>
<BODY>
<FORM id=f1>
User ID : <input type=text name=id></input><br>
Password :<input type=password name=pw></input><br>
E-mail :<input type = text VCARD_NAME = "vCard.Email"> <br>
<input type=button value=submit onclick="subForm()">
</FORM>
</BODY>
</HTML>
From: http://support.microsoft.com/kb/329156
Use this Method:
AutoCompleteSaveForm = function(form){
var iframe = document.createElement('iframe');
iframe.name = 'uniqu_asdfaf';
iframe.style.cssText = 'position:absolute; height:1px; top:-100px; left:-100px';
document.body.appendChild(iframe);
var oldTarget = form.target;
var oldAction = form.action;
form.target = 'uniqu_asdfaf';
form.action = '/favicon.ico';
form.submit();
setTimeout(function(){
form.target = oldTarget;
form.action = oldAction;
document.body.removeChild(iframe);
});
}
Tested with ie10, ff latest, chrome latest
Test yourself: http://jsbin.com/abuhICu/1
Have you try the answer of my question that you mention?
The answer is using hidden iframe but seems he claim the idea is not working on IE and Chrome on that time.
Try to take the idea, and instead of using hidden iframe, just put the username/password/submit visible input element in a form POST, in an iframe. So user will enter login details directly into iframe. With proper Javascript you can put loading image, get success or denied from server and update the parent or the whole page. I believe it should work on any browser.
Or if you still want to use AJAX since you probably implemented the API on server side. You can make the iframe to just send a dummy POST at the same time send the real user/pass to AJAX URL.
Or back to use hidden iframe, not to hide it but move it to the invisible area like top: -1000px.
After several hours searching, I found a solution at Trigger autocomplete without submitting a form.
Basically, it uses a hidden iframe in the same page, set the action of your form to the 'src' of the iframe, and add a hidden submit button inside the form, when user clicks your button which triggers AJAX requests, you should programmatically click the hidden button before sending the AJAX request. see example below:
In your form page:
<iframe id="hidden_iframe" name="hidden_iframe" class="hidden" src="/content/blank"></iframe>
<form target="hidden_iframe" method="post" action="/content/blank" class="form-horizontal">
<input type="text" name="name">
<input type="text" name="age">
....
<button id="submit_button" type="submit" class="hidden"></button>
<button id="go_button" type="submit" class="hidden">Go</button>
</form>
Then java script:
$('#go_button').click(function(event){
//submit the form to the hidden iframe
$('#submit_button').click();
//do your business here
$.ajax(function(){
//whatever you want here
}})
);
Hope this helps.
I have from with conditional content, according with conditions using jQuery i am including or excluding this parts from the form elements.
Here is my functions:
function MoveInsideForm(id) {
$("#" + id).insertAfter("#myForm")
}
function MoveOutsideForm() {
$("#myPartial1").insertAfter("#element-outside-from");
$("#myPartial2").insertAfter("##element-outside-from");
}
The problem is with insertAfter() it is does not getting copied HTML 5 custom attributes
For example i have an element like that
<input data-val="true" data-val-required="*" id="MyInput" name="MyInput" type="text" value="" class="input-validation-error"/>
But insertAfter() copying it like that:
<input id="MyInput" name="MyInput" type="text" value=""/>
Is there any way i can say to insertAfter() to copy HTML 5 attributes as well?
My jQuery version is 1.6.1.
UPDATE:
Thanks guys for comments.
Here is the thing, when i am rendering my partials inside the form the inputs getting generated with unobtrusive data attributes, but if i am rendering my partials outside the form, the unobtrusive data attributes initially not getting included in to inputs.
So when i am rendered the partials outside the form they initially does not contain data attributes.
So it is not issue with jQuery insertAfter(), is it the nature of unobtrusive data validation attributes generation?
In order to generate unobtrusive validation, MVC must have a FormContext. When you place an HtmlHelper outside of Html.BeginForm or Ajax.BeginForm, the HtmlHelpers will not have unobtrusive validation attributes, unless you manually instantiate a FormContext. You can manually instantiate a FormContext by inserting the following code before your helpers:
this.ViewContext.FormContext = new FormContext();
If you are placing your helpers before a BeginForm(), then be sure to clear the FormContext after your helpers and before beginning the form.