I am creating a form using react-final-form library version 3.6.4. When click of submit button I have used submitting prop to disable submit button until a response is received. However, it seems button is not getting disabled.
<Form onSubmit={onSubmit} render={({handleSubmit, submitting, pristine, invalid}) => (
<form onSubmit={handleSubmit}>
<button type='submit' disabled={pristine || invalid || submitting}>Submit</button>
</form>
)}
/>
Related
In iOS 8 and above, to show the Search button on the iOS keyboard, you use the action attribute in the form. From Anton's answer here ... Show 'Search' button in iPhone/iPad Safari keyboard
<form action=".">
<input type="search" />
</form>
But this does not work when you are using an AngularJS form with ng-submit like this
<form action="." ng-submit="doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
The action attribute breaks the Angular form submit.
Any suggestions on how to put a dummy action attribute and still get ng-submit to handle the form processing? Or any other solution that would show the iOS keyboard's search key with an AngularJS HTML5 form.
Just encountered the same problem, key here is that angular prevents default form submission only if no action specified, so if you want to specify one you need to preventDefault manually, which should be pretty easy.
This should work (worked for me):
<form action="." ng-submit="$event.preventDefault();doSearch(searchtext)">
<input type="search" ng-model="searchtext" />
</form>
Also note, that you will need to blur() your input field after you made a Search request in order to auto-hide keyboard.
Update:
With the latter this directive will help you:
.directive('prettySubmit', function () {
return function (scope, element, attr) {
var textFields = $(element).children('input');
$(element).submit(function(event) {
event.preventDefault();
textFields.blur();
});
};
})
I have placed preventDefault() in directive, so your form will look like this:
<form action="." ng-submit="doSearch(searchtext)" pretty-submit>
<input type="search" ng-model="searchtext" />
</form>
I encountered the same problem.
Finally I decided to use
<form action="{{'#/search/' + searchText }}">
Instead, and it works.
I am trying to return to a different page on button click but i'm unable to achieve . It hits the controller action method(onclick) but the view remains the same & url in the browser remains unchanged .
Html:
<input type="submit" class="btn btn-primary" value="Login" onclick="window.location.href='#Url.Action("Home", "Index")' "/>
Even when i keep http://www.google.com it doesnt seems to work .
am i missing anything important here
An input of type submit will try to submit a form. The JavaScript you have attached to that button will run but then immediately get "overridden" by the button trying to do something else. You can do a couple of things:
Option 1: Use a different type such as button:
<input type="button" onclick="window.location.href='#Url.Action("Home", "Index")' "/>
Option 2: Return false in your JavaScript, this prevents the default action from happening.
<input type="submit" class="btn btn-primary" value="Login"
onclick="window.location.href='#Url.Action("Home", "Index"); return false;' "/>
A nice description of preventing the default action from happening is here.
Managing the iOS keyboard for HTML <input> forms (used in UIWebView) is well known, i.e. <input type="tel"></input> for telephone numbers.
https://developer.apple.com/library/ios/documentation/StringsTextFonts/Conceptual/TextAndWebiPhoneOS/KeyboardManagement/KeyboardManagement.html
But I was wondering about the keyboard's blue 'Go' button.
Sometimes the keyboard has a blue 'Go' button, sometimes the keyboard has a gray return button.
Is there any opportunity to control this behavior programmatically?
Update 2020/2021
As Cameron Cobb pointed out,
Safari Mobile supports the new HTML attribute enterkeyhint since version 13.7 ~ Sept. 2020 (https://caniuse.com/mdn-html_global_attributes_enterkeyhint).
The following values are possible (https://mixable.blog/ux-improvements-enterkeyhint-to-define-action-label-for-the-keyboard-of-mobile-devices/):
<input enterkeyhint="enter">
<input enterkeyhint="done">
<input enterkeyhint="go">
<input enterkeyhint="next">
<input enterkeyhint="previous">
<input enterkeyhint="search">
<input enterkeyhint="send">
Original Answer
Aha...
The 'Go' button is only shown, if the <input> tag is inside a <form> tag (and the form tag has an action attribute).
So, if you access your form elements afterwards with i.e. JavaScript, you can omit <form> tags.
'Go' button:
<form action="..." method="...">
<input type="text"></input>
</form>
'return' button:
<input type="text"></input>
The important part is that the form tag has an action property. (action="#" is a noop.)
<form>
<input type="text" />
</form>
<form action="#">
<input type="text" />
</form>
There is a better and more "straight forward" way of changing the enter button text. Use the attribute enterkeyhint in the input tag like in the example shown below.
<input enterkeyhint="go">
You can find more documentation on the Mozilla site here.
I can use some help to understand jQuery and jQuery UI dialog a bit better.
I'm using jQuery v1.8.18 UI Dialog and jQuery v1.7.1 to load an html page that contains a form. The form itself was generated by a Django template. After filling out the form and click on 'Submit', I looked at the HTTP request as seen on the Django server side. The server sees it as an ajax request of type GET with empty GET and POST dictionaries.
The expected result would be a POST with actual submission data in it. Can someone help me understand how UI Dialog changed a POST request into a GET? I'm using Firebug but need some debugging ideas. Thanks.
This is how I created the UI Dialog:
<script>
$(document).ready(function() {
var $dialog = $('<div></div>').load('/friend-request/').dialog({autoOpen:false, title:'Friend Request', modal:true});
$('#friend-request').click(function() {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;});
});
</script>
The element #friend-request is just an HTML anchor. My form loaded just fine into the dialog. Here is the HTML form code that was generated.
<form id="id-friendreq" method="post">
<div style="display:none"><input type="hidden" value="12a94012df543b050d69f46f0012345" name="csrfmiddlewaretoken"></div>
<div class="ctrlHolder" id="div_id_to_user">
<label for="id_to_user">
To user<span class="asteriskField">*</span>
</label>
<input type="text" maxlength="15" name="to_user" id="id_to_user">
</div>
<div class="ctrlHolder" id="div_id_message">
<label for="id_message">
Message<span class="asteriskField">*</span>
</label>
<textarea class="textarea" cols="40" id="id_message" name="message">Hi, please add me as your friend.</textarea>
</div>
<div class="buttonHolder">
<input type="submit" id="submit-id-submit" class="submit submitButton button white" value="Submit" name="submit">
</div>
</form>
If you aren't setting the ajax option type to "POST" or using a convenience method like $.post(), default is "GET"
http://api.jquery.com/jQuery.ajax/
The post method is used only if you submit some data.
$(el).load(url,data,success)
If you are not supplying any data, then it is equivalent to a blank get query. Even on server side, if you don't send any data, there is no way for the server to know if you made a post or get request. Honestly, its just about data, you can send post data with a get query as well
If you must use a POST request explicitly use:
$.post(url,{},function(data){$('<div></div>').html(data)});
I installed calendar Version 1.2.0-SNAPSHOT in grails and working good .
But facing one Issue :
When click on cancel button i was doing form reset .but the calendar field is becoming clear and not reseting to default date .
<g:form url="${response}" id="program" name="program" method="post">
<calendar:datePicker name="startDate" id="startDate" defaultValue="${program.startDate}" dateFormat="%Y-%m-%d"/>
<input type="button" id="cancel" name="cancel" value="Cancel" onclick = 'reset_form(this)' />
</g:form>
function reset_form(this_)
{
document.getElementById('program').reset();
}
any one have idea please ?
thanks.
Two ways to solve this issue as far as I can see. Either correct the typo inside your JavaScript and refer to the correct id of your form (program not new_program) or use the standard reset button for forms <input type="reset" .../> instead of your javascript solution.