I'm trying to complete or submit an input on enter press instead of clicking a submit button. Is this possible purely through a directive? Or must I add some JS?
Here's my input:
<input type="text" ng-model='main.input' placeholder='some text' required=''/>
Use ng-keyup native directive on the input and fire up ng-submit on the form:
<form ng-submit="submitFunc()">
<input type="text" ng-model='main.input' placeholder='some text' required='' ng-keyup="$event.keyCode == 13 && submitFunc()"/>
</form>
You can use ng-submit to submit your form on enter button click. See the example below,
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>
<script>
angular.module('submitExample', [])
.controller('ExampleController', ['$scope',
function($scope) {
$scope.text = 'hello';
$scope.submit = function() {
if ($scope.text) {
$scope.enterText = this.text;
$scope.text = '';
}
};
}
]);
</script>
<div ng-app="submitExample">
<form ng-submit="submit()" ng-controller="ExampleController">
Enter text and hit enter:
<input type="text" ng-model="text" name="text" />
<input type="submit" id="submit" value="Submit" />
<pre>list={{enterText}}</pre>
</form>
</div>
Related
I tried the code mentioned in this question
my code:
$('.form_contact')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', function() {
$(this)
.find('button:reset, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized'));
})
.find('button:reset, button:submit')
.attr('disabled', true);
And it works perfectly on text input and textarea and select.
But when I upload a picture for example with the following input:
<form class="form_contact" action="/admin/edit-post-logic.php" enctype="multipart/form-data" method="POST">
<input type="file" name="avatar" accept="image/png, image/jpeg">
<button disabled="" class="button_reset_form" type="reset">ביטול שינויים</button>
<button disabled="" class="button_submit_form" type="submit" name="submit">שמירה</button>
</form>
The image appears and everything is fine, but the buttons do not become active and remain disabled, does anyone have any idea what can be done to make it work?
Serialize does not convert the file input's value so it will be ignored. So your check will not get the value. So you need to add another check for the file input.
So you can check it directly $(input[type="file"]).val()
$('.form_contact')
.each(function() {
$(this).data('serialized', $(this).serialize())
})
.on('change input', function() {
$(this)
.find('button:reset, button:submit')
.attr('disabled', $(this).serialize() == $(this).data('serialized') && !$('input[type="file"]').length);
})
.find('button:reset, button:submit')
.attr('disabled', true);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form_contact" action="/admin/edit-post-logic.php" enctype="multipart/form-data" method="POST">
<input type="file" name="avatar" accept="image/png, image/jpeg">
<button disabled="" class="button_reset_form" type="reset">ביטול שינויים</button>
<button disabled="" class="button_submit_form" type="submit" name="submit">שמירה</button>
</form>
I have form like this
<form name="test_form" action="" method="post">
<input type="text" value="demo">
Link
</form>
I want to submit that form by clicking the link and as well as go to that link(google.com) too .
How can I do this ?
I can submit the form by clicking the link but can't do it together .
You need to redirect on the server
for example in PHP:
<?PHP
$url = $_POST["url"]; // you need to clean this
// save whatever here
header("Location: ".$url);
?>
<script>
window.onload=function() {
document.getElementById("submitLink").onclick=function() {
var form = document.getElementById("myForm");
document.getElementById("url").value=this.href;
form.submit();
return false; // cancel link
}
}
</script>
<form id="myForm" action="saveandredirect.php" method="post">
<input type="text" name="somefieldname" value="demo">
<input type="hidden" id="url" name="url" value="">
</form>
Link
I am using this sample form to send data. I currently watch under the console. But I really need to send these information to another page called result.html and I want to know how to do that. Currently I am using the following code in the main page... Here is the code
<!-- File: chapter4/two-forms-databinding.html -->
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit1()">
<input type="text" ng-model="ctrl.username">
<input type="password" ng-model="ctrl.password">
<input type="submit" value="Submit">
</form>
<form ng-submit="ctrl.submit2()">
<input type="text" ng-model="ctrl.user.username">
<input type="password" ng-model="ctrl.user.password">
<input type="submit" value="Submit">
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit1 = function() {
// Create user object to send to the server
var user = {username: self.username, password: self.password};
console.log('First form submit with ', user);
};
self.submit2 = function() {
console.log('Second form submit with ', self.user);
};
}]);
</script>
</body>
</html>
I want to know how should be the code in the result.html page to grab the parameters sent by these forms. Please help me I am really new to angularjs.
<!-- File: chapter4/two-forms-databinding.html -->
<html ng-app="notesApp">
<head><title>Notes App</title></head>
<body ng-controller="MainCtrl as ctrl">
<form ng-submit="ctrl.submit1()">
<input type="text" ng-model="ctrl.username">
<input type="password" ng-model="ctrl.password">
<input type="submit" value="Submit">
</form>
<form ng-submit="ctrl.submit2()">
<input type="text" ng-model="ctrl.user.username">
<input type="password" ng-model="ctrl.user.password">
<input type="submit" value="Submit">
</form>
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js">
</script>
<script type="text/javascript">
angular.module('notesApp', [])
.controller('MainCtrl', [function() {
var self = this;
self.submit1 = function() {
// Create user object to send to the server
self.user = {username: self.username, password: self.password};
console.log('First form submit with ', self.user);
};
self.submit2 = function() {
console.log('Second form submit with ', self.user);
};
}]);
</script>
</body>
</html>
i'm not a very good programmer at all but i need a little help with a webpage i'm making.
Here's what I have for a form:
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="submit" value="Submit">
</form>
What I want it to do is if I put in the name Fred and press submit Button, it will go to a certain page. Any other name will link to another page or popup with an error saying, "tough luck!" or something like that.
Sorry, I couldn't find anything this specific on the web anywhere. I'm sure it's simple, I'm just confused with how this works. Thank you!
using front-end only, i'd be using javascript or jquery. meaning you don't need a form element inside it.
<script>
$("#submitButton").click(function(){
window.location.replace("enter url here")
})
</script>
you can do it with JS/jQuery:
HTML
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name" id="name">
<input type="submit" id="submit-button" value="Submit">
</form>
JS
$("#submit-button").click(function(){
if ($("#name").val() == "Fred")
location.href = "goodurl";
else
location.href = "badurl";
});
There are 2 options to solve this problem.
To use JavaScript for input value's validation and depending on it to redirect user
To use server side language to check the passed value
The first option will be easier for you I guess.
You can do something like:
Name: <input type="text" name="name">
<input type="button" value="Submit" onClick="redirect();">
<script type="text/javascript">
function redirect() {
var value = document.getElementsByName('name')[0].value;
if (value == 'Fred') {
window.location.href='http://url1';
} else {
window.location.href='http://url2';
}
}
</script>
Links: 'url1' and 'url2' must be replaced with your URLs
Just add the following code in your HTML file and try it out:
<script type="text/javascript">
function handleSubmit() {
var name = document.input.name.value;
if(name == 'Fred') {
location.href = "http://www.google.com";
} else if (name == 'Jack') {
location.href = "http://www.yahoo.com";
} else {
alert("Tough Luck");
}
}
</script>
<form name="input" action="name.htm" method="get">
Name: <input type="text" name="name">
<input type="button" value="Submit" onclick="handleSubmit();">
</form>
Hi I have created a pop up window containing a form asking the user to enter email and password.And there is a log in button.Usually in most of the forms, after entering all details and pressing 'enter', the submit button will be automatically clicked.But in this case,only when I click the login button it works.I want it to work on pressing 'enter' in keyboard.I know that this is a simple question.But I can't figure it out why is this happening.Please help me
Here is my userinfo.html(pop up window)
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="test.js"></script>
</head>
<body>
<b>Enter your Email ID and Password</b><br><br>
<form id="userinfo">
<label for="user"> Email : </label>
<input type="text" id="user" /><span id="semail"></span>
<br><br>
<label for="pass">Password : </label>
<input type="password" id="pass" />
<br>
<br>
<input type="button" id="login" value="Log In"/>
</form>
</body>
</html>
Here is my test.js
window.addEventListener('DOMContentLoaded', function() {
var user = document.querySelector('input#user');
var pwd = document.querySelector('input#pass');
var login = document.querySelector('input#login');
login.addEventListener('click', function() {
var userStr = user.value;
var pwdStr = pwd.value;
chrome.runtime.getBackgroundPage(function(bgPage) {
bgPage.login(userStr,pwdStr); });
window.close();
});
});
In order for a submit event to be triggered on ENTER the form must have a submit button.
In your particular case, you need to revent the default behaviour of your form, since you want to handle it "manually" using the background-page.
In summary, the following steps are required:
Change the button type from button to submit.
Register a listener for the form's submit event. (Note: this will be triggered on both button-click and ENTER.)
Prevent the default behaviour on form-submit.
Delegate the login-handling to the background-page (through its login method.
Here is the new code:
test.html
<h4>Enter your Email ID and Password</h4>
<form id="userinfo">
<label for="user">E-mail: </label>
<input type="text" id="user" required />
<br />
<label for="pass">Password: </label>
<input type="password" id="pass" required />
<br />
<br />
<input type="submit" id="login" value="Log In" />
</form>
test.js
window.addEventListener('DOMContentLoaded', function () {
var form = document.querySelector('form#userinfo');
var user = document.querySelector('input#user');
var pass = document.querySelector('input#pass');
/* Register a listener on the form's `submit` event */
form.addEventListener('submit', function (evt) {
/* Prevent the event from being handled by the browser */
evt.preventDefault();
var userStr = user.value;
var passStr = pass.value;
/* Delegate login-handling to background-page */
chrome.runtime.getBackgroundPage(function (bgPage) {
bgPage.login(userStr, passStr);
});
window.close();
});
});
See, also, this short demo.