I have a form with three inputs the last of them has the readonly property, so the focus is missing because the way that the user fills the last input is by clicking some buttons, like a virtual keyboard. So everything works fine. But I'm trying to press enter and submit my form but since I lost the focus after the second input, my submit is not working. How can I resolve this?
form.html
<form name="myForm"
role="form"
ng-submit="signin()"
novalidate>
<input type="text" name="input1"/>
<input type="text" name="input2"/>
<div ng-controller="mycontroller">
<span ng-click="fillInput3()">A</span>
<span ng-click="fillInput3()">B</span>
<span ng-click="fillInput3()">C</span>
</div>
<input type="text" name="input3" readonly=""/>
<button type="submit">Ok</button>
</form>
Try this,
give an id to your button,
<button type="submit" id="submitButton">Ok</button>
In your controller, insert $window as the dependency,
app.controller('yourController', function($scope, $window){
})
Then in fillInput3() function write this,
var element = $window.document.getElementById("submitButton");
if(element)
element.focus();
This would focus the "submit" button as you exit the fillInput3() function.
Related
I have a form like below:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" onclick="document.getElementsByTagName('form')[0].submit()" value="Submit">
</form>
Though I clicked the button and indeed it submitted the form, but the alert box wasn't shown. That is, the submit() method submitted the form but without triggering the onsubmit event. What happened? And how should I use submit() method to trigger the onsubmit event?
Well, the documentation for the submit method is pretty clear that it doesn't trigger onsubmit.
Since any of the following form elements cause a form submit:
<input type='submit'>
<input type='button'>
<button>
You likely don't need an onclick handler on that button at all
it seems that you can't, please check this post - https://stackoverflow.com/a/19847255/8449863
however, please try workaround with hidden submit button:
<form action="/action_page.php" onsubmit="alert('The form was submitted');" >
Enter name: <input type="text" name="fname">
<input type="button" value="Submit" onclick="document.getElementById('submit').click();" >
<input id="submit" type="submit" style="display: none;" />
</form>
So I have this html form:
<form>
<input type="text" placeholder="Equation" id="equation_input" onsubmit="return button_click()"/>
<input class = "search_button" type="submit" id="search" onclick="button_click()" value="Search"/>
</form>
And I need to take the value the user entered in the equation input, add it to the beginning of a url, and then redirect the user to that newly formed url.
I tried this in my script tags:
function button_click() {
var url = `https://exampleurl.com?q=${document.getElementById('equation_input').value}`;
window.location.replace(url);
}
I've tried a couple things, but I'm not sure what's causing the problem so I don't know exactly what to try.
No need for any js to do this. It can be done by default form submit by naming the input and setting action and method attributes of the form.
Note that an <input> has no submit event, only a <form> does
<form method="GET" action="https://exampleurl.com">
<input type="text" placeholder="Equation" id="equation_input" name="q" required/>
<input class="search_button" type="submit" id="search" value="Search" />
</form>
<form action="" method="post" enctype="multipart/form-data">
<label class="btn btn-theme">
<input type="file" name="file" value="" style="display:none;" required=""> click Me to choose file
</label>
<label class="btn btn-success">
<input type="checkbox" name="checkbox" value="yes" style="display:none;" required=""> Are You agree ?
</label>
<br>
<input type="submit" name="" value="Submit">
</form>
i want to show alert whenever user haven't selected any file or not agree and press Submit button in my given code.
right now it giving "An invalid form control with name='file' is not focusable."
I know the reason behind it but how can i alert my user that you have not selected anything.
I do not like to use Jquery Submit or show them choose file icon.
Is there any way to get that element (with help of jQuery) on which browser trying to focus ?
This other issue seems to be similar. Can you add novalidate attribute to your form? This is seen here: An invalid form control with name='' is not focusable
JQuery has a focus method that should do what you want.
Create a variable somewhere that will keep track of whether the user has clicked on an input.
var inputFocusOccured = false;
Then use the focus method to change the variable whenever a user clicks or touches an input.
$("input").focus(function(){
inputFocusOccured = true;
});
Then when the user clicks submit have it check if the value is true or false
$("#SubmitBtn").click(function() {
if(inputFocusOccured === false){
alert( "Handler for .click() called." );
}
});
i have one form with some input text with the name = "user_name" , "mob" , "email" and inside this form i have a link for example Plans and end with submit button. Now if user click the link then i want to have all the values of the input text of the same form send to another page to pks.php and if the user click on the submit button then it will work on action confirm.php. For example Check this code
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
PLANS
<input type="submit">
</form>
Can you help me out?? How can i achieve this. Thanks in advance
The simplest way is to change the link to a second submit button. You can then use the formaction attribute to change the URL the form submits to when you use this button.
<form action="confirm.php" method ="post">
<input type ="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<input type="submit" formaction="pks.php" value="PLANS">
<input type="submit">
</form>
If you can't do that, you need to run Javascript when they click on the link. You can have this code change the action of the form, and then submit it.
document.getElementById('plans').addEventListener('click', function(e) {
e.preventDefault();
var form = document.getElementById('myform');
form.action = this.href;
form.submit();
});
<form id="myform" action="confirm.php" method="post">
<input type="text" name="user_name">
<input type="number" name="mob">
<input type="text" name="email">
<a id="plans" href="pks.php">PLANS</a>
<input type="submit">
</form>
You will probably want to use JavaScript to control the form if you want the action attribute to change. By default, submitting the form will cause it to post to confirm.php.
Using JQuery you can do this:
$('form').on('submit', function(e) {
// Stop the form from submitting
e.preventDefault();
// Do logic to determine what action you should do
var myAction = 'pks.php';
// assign the action to the form
$(this).attr('action', myAction);
// submit the form
$(this).submit();
});
I haven't run this script so it may not work out of the box but you should be able to adapt and fix it without too much difficulty.
My code looks something like this -
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(this.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Now I can't submit the form even if I fill the phone number field.
But if I code like this :
<form name="myForm" ng-submit="!myForm.phone.$isEmpty(myForm.phone.$viewValue)" action="/my/url" method="get">
<input name="phone">
<button type="submit">submit</button>
</form>
Its perfectly working now.
So the difficulty is with 'this'. I cant even check the context of this, it should be the the context of $scope.myForm.phone, but somehow it isn't. Can someone please explain.
That's not what ng-submit is for. ng-submit is a function or expression called when the form is submitted. It's nothing to do with validation. If you want to ensure the text field is not empty before it's submitted you just need to add required and then if it is empty myForm.$invalid will be true.
Is this what you are trying to do:
html
<form name="myForm" ng-submit="submit(phone)">
<input name="phone" type="text" ng-model="phone.value" required>
<button type="submit" ng-disabled="myForm.$invalid" >submit</button>
</form>
controller
$scope.submit = function(phone){
console.log('phone', phone);
}
$scope.phone = {
value: ''
};
update
The this that you passed into the ng-submit is a reference to your controller. Since you have the name attribute set to myForm you can access the form model via this.myForm and the phone model via this.myForm.phone. So if you wanted to use $isEmpty to verify if the field is empty you would have to use:
this.myForm.phone.$isEmpty(this.myForm.phone.$viewValue)
ng-submit is used to provide a handler for the moment when the form IS submitted.
What you're looking for is disabling submit button with ng-disabled
<form name="myForm" ng-submit="functionInController()" action="/my/url" method="get">
<input name="phone" required>
<button type="submit" ng-disabled="myForm.$invalid">submit</button>
</form>
Pay attention to required directive added to the input. Which makes sure this field is not empty for submit