There is an input tag which gets some text and a button to submit the information. I want to make sure the user clicks button. This is not related to validating the input. Just want to make sure that if the user is viewing this page and has entered text then he must click the button before moving onto the next page.
<input type="text" class="form-control ng-pristine ng-valid ng-touched" placeholder="Search for a domain" name="page1.domainSearch" [(ngModel)]="searchValue" (ngModelChange)="func()" />
<button type="submit" class="search" (click)="func()" [disabled]="!searchValue"></button>
I know i can add a boolean variable to this component and then pass the value of this variable to the component having the button to progress to next page as an input. But is there any way to make sure of this in the same component?
Related
I'm working on a project where users are asked to sign up for an account. I'm currently trying to figure out how to get a button to both cancel a current form and redirect back to an index page.
The user is directed to a simple page where they can enter their name. The name is currently "required", so a user must enter it in if they want to create an account.
The user has two options on this page:
1. enter in name, click "Create Account"
2. click "Cancel Create Account"
Right now, whenever I click on "Cancel Create Account", I kept getting a message telling me to fill in the "Name" field since it's required. How can I bypass this so I can just return to the index page and not submit the form?
I've already tried "formnovalidate" and that hasn't worked. I've been searching for some other solutions but none that does both a redirect and a cancel.
Here's a CodePen for this project: https://codepen.io/anfperez/pen/oRgoOm
<label>Name</label>
<input id="name" name="name" maxlength="80" required/>
<input id="register" type="submit" name="submit" value="CREATE ACCOUNT" />
<!--this is supposed to redirect back to an index page -->
<button style="margin-left:20px;" noformvalidation>CANCEL CREATE ACCOUNT</button>
If you want a link, use a link.
If you want a submit button, use a submit button.
Don't use both for the same control. It isn't allowed in HTML anyway.
I saw a strange behaviour while developing HTML form. This one I didn't notice previously. So I am curious.
Suppose following is form element.
<form>
<h2>Test</h2>
<input type="text" name="a">
<input type="text" name="a">
<input type="text" name="c">
<input type="submit" name='submit' value="Submit">
</form>
When input name='a' is focused and I press enter, the form is getting submitted by default.
I always thought form get's submitted when enter is pressed in last input element, i.e., in this case name='c'.
Now, how to make form get submitted only when enter is pressed on last input element?
I always thought form get's submitted when enter is pressed in last input element
No.
A form will be submitted when Enter is pressed on any input.
Now, how to make form get submitted only when enter is pressed on last input element?
This is not normal behaviour. It goes against user expectations. I recommend against doing this.
Bind a keypress event handler to each input except the last one
Check if the key is Enter
Call preventDefault() on the event object if it is
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 am styling a form with an input field. The input field is required to be completely transparent. The input field itself is no problem but once I start typing, the browser opens up the dropdown with the saved form data, displaying the words I previously entered in input fields. The dropdown itself is not transparent but is white. When I hover over one of the saved words it appears in the input field and when it does, the input field is also given the white background.
I tried setting the background for the active, focus and hover state to transparent but that doesn't seem to do the trick. I am also not able to see the saved form data dropdown in the element inspector so I don't know how to target it.
HTML:
<form class="" action="" method="_GET" accept-charset="utf-8" role="]">
<div class="form-group">
<label class="sr-only" for="q">Search Input Field</label>
<input class="form-control" type="text" name="q" value="" placeholder="SEARCH">
</div>
<button type="submit" class="btn btn-default btn-red">SEARCH</button>
</form>
Here's a fiddle:
http://jsfiddle.net/dtxeofnL/
Click into the input field and type a letter. If you have previously entered something in the input field (or another input field in your browser), the dropdown will appear. When you hover over one of the words in the dropdown, it'll appear in the input field and give it an opaque, white background.
Can this be done?
Autocomplete is browser and operating system specific. There doesn't appear to be any way to style the browser's own internal autocomplete function.
I would suggest disabling browser autocomplete altogether:
<input autocomplete="off">
Then utilizing JqueryUI's Autocomplete function, http://jqueryui.com/autocomplete/, which can be styled any which way you'd like.
I have a form on a website that has a dropdown box and instead of a normal submit button I need to have a button marked yes and one marked no.
So I want to store the value of the dropdown box and keep a note of whether the user pressed yes or no.
Normally I would have a drop down then a radio button for yes/no and then submit but I want to combine the action of clicking yes or no into both storing/passing the value and submitting the form.
How could I do that? I don't mind some Javascript if necessary.
Only clicked submit buttons will be successful:
<input type="submit" name="foo" value="Yes">
<input type="submit" name="foo" value="No">