I'm trying to have the input fields of my form clear when a user clicks submit. There are a lot of stack overflow questions around this topic but they all have confusing, and conflicting answers.
The HTML of my form:
<form name="form.myform" validate>
<div style="margin-top:25px">
<div style="padding:10px" class="row my-input-divs">
<div class="col-9"><input name='comment' id='comment' ng-model="admin.reply" placeholder=" (Type here to send message to guest) " style="height:50px;background-color:#EFF3F6;width:100%" required style="" type="text"></div>
<div class="col-3"> <input ng-click="sendreply(admin.reply, data.conversation[0].originator,data.conversation[0].property_id)" class="my-btn" required style="width:100%;margin-top:7px" value="Send Reply" type="submit" /></div>
</div>
</div>
</form>
Within the success function when the form is submitted I have:
$('#comment').val('');
$scope.form.myform.$setPristine();
$scope.form.myform.$setUntouched();
I do add the form to the controller with $scope.form = {}; and the setPristine and setUntouched seem to be working.
This code does clear the html of in input field when the user hits submit; however, it then displays the error Please fill out this field upon being cleared.
Additionally, The code still appears bound to the model. If the user clicks submit a second time after their input has been cleared from the HTML it will submit the original input a second time.
Does anyone know the reason for this behavior?
Related
Basic question. If I have a form in my HTML (where in my case someone inputs a date), how can I have my users cause a GET request with the contents of that form instead of a POST.
e.g. form entry (e.g date)... so 20190312
what I am trying to achieve is such that AFTER the user submits the form.. the user is the lead to page that has
GET domain.tld/scriptname.php?variable=20190312
and then the system then processes the GET request accordingly.
thank you
Maybe i'm missunderstanding what you are asking.
This can easly be achived using builtin GET method in FORM tag
<body>
<form id="form" method="GET" action="scriptname.php">
<input id="date-txt" type="text" name="date">
<input id="search-btn" type="submit" value="Submit">
</form>
</body>
While filling up above field ad clicking "Submit" form will be submitted and you can see in your url path/or/page/scriptname.php?date=INPUT_FIELD_VAL
for every input in #form with a name, if GET method is used, you'll see a ?name=value in the url
What you describe is the default behaviour of a form. If you don't want a POST request, then don't use a method attribute to set the request type to POST.
<form action="//domain.tld/scriptname.php">
<input name="variable" value="20190312">
<button>Submit</button>
</form>
I am updating a project which has been made in Angular 4. The website consists of multiple forms which include input field. When the user presses 'enter' the form is being submitted. I want to prevent this from happening. How can I do that?
Is there something that I can place within the quotationmarks which disables the submit action from happening: (keydown.enter)=""
form.component.html
<div class="d-flex justify-content-center hm-row">
<form class="hm-form" [formGroup]="crossingForm">
<div class="form-group">
<label for="dynamicThresholdTime">{{ 'CROSSING.DYNAMIC_THRESHOLD_TIME' | translate}}</label>
<input type="text" class="form-control" id="dynamicThresholdTime" placeholder="" formControlName="dynamicThresholdTime">
</div>
<...more code...>
</form>
</div>
Use this :
<form (keydown.enter)="$event.preventDefault()"></form>
You also can remove the form tag and replace it with a div. Browsers make this behavior because of the form tag.
Buttons with type="submit" have default behavior. Choose type="button" for no default.
Also had this happen with a form and input field. event.preventDefault() in my client side script solved this.
I'm running into a strange issue where Internet Explorer is adding an additional query string parameter that no other browser adds.
The page has a form with auto-submit functionality and a "Reset Filters" button. When a user hits the enter key, it forces the submit. When a user hits enter in Internet Explorer, for some reason the "Reset Filters" operation is selected rather than the submit button.
For example, IE adds this to the query string:
?search=this+is+text&op=Reset+Filters
In all other browsers the same query looks like this:
?search=this+is+text
When I check the $_GET superglobal in PHP, I noticed that op is only being added when I run the application in IE and only when I hit the enter key in the form.
Based on the HTML below, it kind of makes sense that hitting enter would add op to the query string because both the submit button and the reset button are contained within the form. But why would op only get added to IE?
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
...
</form>
Any idea why this might be happening?
UPDATE: One other piece of information that might be important. Because the form is auto-submit, the first submit button is actually hidden. I'm wondering if that's why IE is using the second button as the submit handler.
After doing some more research I realized I asked the wrong question. However, it's not letting me delete the question, so I'm posting the answer to my actual question here.
My question should have been, "When multiple inputs exist in a single form, how does the browser determine which one is chosen when hitting the enter key?"
The answer is, when the enter key is hit, the first input of type="submit" is chosen. However, IE will skip any submit buttons that are hidden with display:none.
I found the answer here:
Multiple submit buttons on HTML form – designate one button as default
My fix was to set the submit button to position: absolute; left: -1000% rather than display:none. I got that solution from #bobince on the linked answer, however, left:-100% did not push it completely off the page for me so I changed it to left:-1000%.
IMHO it seems wrong to be using a submit button do convey some information other than "hey, I've submitted some data". If the user hits enter to submit the form it is reasonable that some browsers would send all the data associated with all the submit buttons.
If you are just resetting the inputs from previous parts of the form you could use:
<button type="reset">
If you do need other input data maybe a checkbox would be more appropriate:
<form>
...
<input type="checkbox" id="edit-reset" name="op" value="Reset Filters">
<label for="edit-reset">Reset Filters</label>
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
...
</form>
If you do not need other input data you could use two forms:
<form>
...
<div class="submit-button">
<input class="form-submit" type="submit" id="edit-submit-fda-views" name="" value="Submit">
</div>
</form>
<form>
<div class="reset-button">
<input type="submit" id="edit-reset" name="op" value="Reset Filters" class="form-submit">
</div>
</form>
A submit button is an input. It has a name and a value. When you click on one of the submit buttons, it's value gets added to the the submission with it's name. When you hit the enter key, the form is automatically submitted, but since you are using two submit buttons, they are both contributing a parameter. You have a lot of options that others have already suggested. You could change the type to "reset" or "button", but if you need to post to the server for both actions, then you could intercept the keystroke with javascript and click the button in code. I would probably go with a button type that would submit the form like this.
<input type="button" id="edit-reset" name="op" value="Reset Filters"
class="form-submit" onclick="submitform()">
<Script>
function submitform()
{
document.getElementById("your-form-name-here").submit();
}
</script>
I have an HTML5 form that calls a Perl controller to upload files to the server. It works. The thing is that if no file is selected (if the form box is left blank), and the user clicks the button, he will get a nasty Perl error message ("require file at ... line 39 etc"). I want to add a feature that if the form is left in blank, a message will appear saying "It's empty!". Can this be done only with HTML5, in the view? Or I need to modify my Perl script?
My HTMl5 looks like:
<form action="[% uri_for('/upload/execution') %]" method="post" enctype="multipart/form-data" class="form-horizontal">
<filedset>
<div class="control-group">
<p>
<div class="controls">
<input readonly value="[% article.article_id %]" name="article_id" type="hidden" class="span1" id="game_id">
</div>
</p>
<p>
<div class="form-actions">
<input type="submit" value="upload" class="btn btn-primary">
</div>
</p>
</filedset>
</form>
You can use javascript to validate your request.
See this question, there is a good code sample.
Of course this is only client side validation (ie. it's done in browser), so anyone can turn it off and send the file anyway (although this rarely happens). It would be a good practice to handle this also on a script level.
I was looking for a fix to stop IE refreshing the page instead of submitting my single line form, when a user hits enter instead of clicking go.
I found this solution, which works well, but I was wondering if anyone could explain why it works?
The solution I used is to add a hidden text input within the form tags, like this
`<form name="SearchForm" id="SearchForm" method="get" action="">
/*This is the hidden text input*/
<input type="text" style="visibility:hidden;display:none;" name="ieSearchEnter">
</input>
<fieldset>
<span><input type="text" name="Search" id="Search"/></span>
<div class="field actions">
<input type="submit" name="Go" id="Go" class="submit" value="Go"/>
</div>
</fieldset>
</form>`
which i found here.
Thanks!
Are you really setting the ACTION value to an empty string, or did you just do that for your code sample?
I don't think IE is really "refreshing the page"-- I think it's automatically submitting your form.
Here's a simple test page: http://www.enhanceie.com/sandbox/simpleform.asp. When you hit enter, you'll see that the URL is updated to pass the user's value.
IIRC, there is code in IE's form-handling that says that if you have form containing a single test field, then hitting ENTER will submit that form. In your workaround, you've added an additional text field so that optimization is not applied.
I think maybe your server-side code is REQUIRING that the form submission contains "Go=Go" or it ignores the submitted value (Search=Whatevertheuserhadtyped) and simply re-displays the form. If you change the server-side script such that it does not require Go=Go, then your problem should go away.