I have a form in my very basic React app where I want to allow the user to enter text and create their username by updating state. However when the "OK" button is clicked, the created username appears on the page for about half a second then the page auto-refreshes and restores the default state. It only happens when the button is contained within a form element. It works fine and the page doesn't refresh when I remove the form element, however I don't want to sacrifice the style and formatting of the bootstrap form. Here's my render method:
render() {
return (
<div class="container-fluid text-center">
<form class="form-inline">
<input type="text" class="form-control" placeholder="UserName"/>
<button onClick={this.createUser.bind(this)} class="btn btn-primary">OK</button>
</form>
<h1>User: {this.state.userName}</h1>
<h1>Points: {this.state.points}</h1>
</div>
)
}
Your button doesn't have a type attribute, so the default will be submit (see this page). This means that when you click your button the onClick handler will be called, but the default browser action of submitting the form will also happen.
Try specifying a type of button instead:
<button type="button" onClick={this.createUser.bind(this)} class="btn btn-primary">OK</button>
Also, if you don't specifically need a form element you could try changing it to a <div>. The bootstrap form-inline style doesn't require a form, as mentioned in the documentation under the Inline form heading:
Add .form-inline to your form (which doesn't have to be a <form>)...
Related
I'm using Parsley to validate forms. I'm using 2.8 wbich is a more current version. When any button on my form is clicked (even it's not submit), Parsley will trigger a submit. For example I have this button which clears an uploaded photo.
<button id='attached-clear' onclick="App.clearPhoto('#attached')")
Clear
</button>
This will trigger a "submit" when Parsley is enabled. So when the user tries to clear the form it is submitted instead. I tried various options on the form of:
<form ... data-parsley-excluded='input[type=button]' ..>
And:
<button data-parsley-excluded="" ...>
But it always submits. If I disable parsley then I don't have a problem.
You need to add button type= 'button', submit is default value for type MDN ref
<form>
<button type='button' onclick="console.log('hello')">Clear</button>
</form>
I have one problem with modal window.
I have couple section and in one section ( which is hidden ) I have button with ng-click='function()'.
<section class='hidden'>
<button class="mobileUpdate" ng-click="openMobileUpdateModal()">SMS</button>
</section>
openMobileUpdateModal() open modal dialog.
Problem is when I hit enter key on any input field in form it opens me modal window.
Any idea how to prevent this?
Thanks
Quoting the docs on form/ngForm:
You can use one of the following two ways to specify what javascript method should be called when a form is submitted:
ngSubmit directive on the form element
ngClick directive on the first button or input field of type submit (input[type=submit])
[...]
...the following form submission rules in the HTML specification:
If a form has only one input field then hitting enter in this field triggers form submit (ngSubmit)
if a form has 2+ input fields and no buttons or input[type=submit] then hitting enter doesn't trigger submit
if a form has one or more input fields and one or more buttons or input[type=submit] then hitting enter in any of the input fields will trigger the click handler on the first button or input[type=submit] (ngClick) and a submit handler on the enclosing form (ngSubmit)
So, depending on the rest of your setup, you could solve the problem by changing the order of buttons, by detecting and filtering key-events, by introducing additional form elements etc.
in your openMobileUpdateModal() function place the if condition to detect the key event.
if the pressed key value is 13(enter key) return from the function else continue the function.
Please add button type to the model dialog button .
<section class='hidden'>
<button class="mobileUpdate" type="button" ng-click="openMobileUpdateModal()">SMS</button>
</section>
In form if we have any button enter click on input field will trigger the click event of the button.
So always add type="button" to all the buttons in the form other than submit Button
<form>
Name <input type="text"/>
<button type="button">open model</button>
<button type="submit">Submit Form </button>
</form>
I have am trying to reset a textbox using the $setPristine function in AngularJS, however it doesn't seem to result in the desired behavior.
My form looks like this:
<form name="addInviteForm" ng-controller="InviteCtrl" ng-submit="sendInvitation(userEmail)">
Pristine? {{addInviteForm.$pristine}}
<!-- email input -->
<div>
<input type="email" name="email" ng-model="userEmail" placeholder="Enter email here" class="line-item-input see" required>
<span class="error" ng-show="addInviteForm.email.$error.email" style="color:red">Invalid Email</span>
</div>
<!-- submit button -->
<input type="submit" name="send" class="btn btn-success center" value="Send Invitation">
</form>
And the corresponding code in my controller:
$scope.sendInvitation = function(userEmail) {
// do some work here ...
// hmm, this doesn't seem to work ...
$scope.addInviteForm.$setPristine();
};
Though the form shows that $pristine is set to true upon form entry, then set to false when entering data in the text-box, after submitting the form it does indeed show that $pristine is set to true .... and yet the value in the textbox remains as it was before the submit button was pressed.
What am I missing here?
$setPristine does not clear values from the controls in the form:
From the docs:
Sets the form to its pristine state.
This method can be called to remove the 'ng-dirty' class and set the
form to its pristine state (ng-pristine class). This method will also
propagate to all the controls contained in this form.
Setting a form back to a pristine state is often useful when we want
to 'reuse' a form after saving or resetting it.
As you can see from the above description, $setPristine only changes the state of the form (and thereby resets the css applied to each control in the form).
If you want to clear the values of each control, then you need to do for each in code.
This plunker shows $setPristine in action.
I have a page with multiple small forms on it. Each form has one input field that has an onchange function which will submit it's form to a url that returns a no data status.
Things work fine, submitting form after form, until the user clicks on a small form that has ONLY a submit button in it. This click works, but abandons the change in the previous field resulting in its onchange not firing the click at the bottom of the changed function fails (still trying to understand the firebug trace).
What's going on? is there a fix for my structure?
UPDATE:
First I tried simply delaying the action of the submit, but no luck.
I have hidden the and added an <input button> to the chain of "events" so that the focus has a place to come to rest before the real submit tries to happen -- the code below has been updated. So the question now becomes:
Is this as simple as it can be?
Script:
$(function() {
$('input,select').change(changed);
});
function changed(){
...
$(this).parents('form').find(':submit').click();
}
function doSubmit(elt, id)
{
$(elt).focus();
setTimeout(function(){
$(id).click();
}, 400);
}
One of may small forms:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="submit" value="field" name="btn_update" style="display: none;">
<input type="hidden" value="000242" name="quote_id">
<input type="text" maxlength="15" size="3" value="" name="q[cost][4][1][unit]">
</form>
The offending click goes into this form:
<form class="clean" method="POST" action="QuoteProApp.php">
<input type="hidden" value="000242" name="quote_id">
<input type='button' name='btn_close' value='Close' onclick='doSubmit(this,"#CLOSE");'>
<input id='CLOSE' type='submit' name='btn_close' value='Close' style='display:none;'>
</form>
Might be totally irrelevant, but your selector for the change event includes your submit input too. Can you change it to:
$('input[type="text"],select').change(changed);
to see if anything changes?
The solution turned out to be to create a button tag, set the focus explicitly to a it, and then set a timeout to click the real, but hidden, submit input tag. This allows the change in focus to run the submit associated with it and then continue with the explicit submit of the page.
The question has been updated to show this solution.
I have set up a bootstrap modal with a form inside it, I just noticed that when I press the Enter key, the modal gets dismissed.
Is there a way not to dismiss it when pressing Enter?
I tried activating the modal with keyboard:false, but that only prevents dismissal with the ESC key.
I just had this problem too.
My problem was that i had a close button in my modal
<button class="close" data-dismiss="modal">×</button>
Pressing enter in the input field caused this button to be fired. I changed it to an anchor instead and it works as expected now (enter submits the form and does not close the modal).
<a class="close" data-dismiss="modal">×</a>
Without seeing your source, I can't confirm that your cause is the same though.
Just add the type="button" attribute to the button element, some browsers interpret the type as submit by default.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#Attributes
This applies for all the buttons you have in the modal.
<button type="button" class="close" data-dismiss="modal">×</button>
I had this problem even after removing ALL buttons from my Bootstrap Modal, so none of the solutions here helped me.
I found that a form with a single text field would cause the browser to do a form submit (and result in dismiss), if you hit Enter while keyboard focus is on the text field. This seems to be more of a browser/form issue than anything with Bootstrap.
My solution was to set the form's onsubmit attribute to onsubmit="return false"
This may be a problem if you are actually using the submit event, but I'm using JS frameworks that generate AJAX requests rather than doing a browser submit, so I prefer disabling submit entirely. (It also means I don't have to manually tweak every form element that might trigger a submit).
More info here: Bootstrap modal dialogs with a single text input field always dismiss on Enter key
I had same problem, and i solved it with
<form onsubmit="return false;">
but there is one more solution, you can add dummy invisible input, so your form would look like this:
<form role="form" method="post" action="submitform.php">
<input type="text" id="name" name="name" >
<input type="text" style="display: none;">
</form>
You can put the login button before the cancel button and this would solve the issue you are having as well.
<div class="modal-footer">
<button type="submit" class="btn primary">Login</button>
<button type="submit" class="btn" data-dismiss="modal">Cancel</button>
</div>
I had a similar experience just now and the way I solved it was instead of using a tag, I changed the tag to an tag with type="button". This seemed to solve the problem of pressing the "enter" key and dismissing the bootstrap modal.
I had this problem too and I solved it this way. I added onsubmit to form. I also wanted to be able to use enter key as a saving key so I added save_stuff() javascript to onsubmit. return false; is used to prevent the form submit.
<form onsubmit="save_stuff(); return false;">
...
</form>
<script>
function save_stuff(){
//Saving stuff
}
</script>