When I use inputmask for my form input elements TAB Key not working. I can't switch with other input via tab key. I want use TAB key for switch via inputmask
HTML FORM
<form class="validate-form mt-2 pt-50" action="KisiEkle" enctype="multipart/form-data" method="POST">
<div class="modal-body">
<label>TC: </label>
<div class="mb-1">
<input type="text" id="TC" name="TC" placeholder="TC bilgisi" class="form-control" autocomplete="off" required="required" />
</div>
<label>Ad Soyad: </label>
<div class="mb-1">
<input type="text" id="AdSoyad" name="AdSoyad" placeholder="Ad Soyad" class="form-control" autocomplete="off" required="required" />
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary">Ekle</button>
</div>
</form>
JAVASCRİPT CODE
$(document).ready(function () {
$("#TC").inputmask("*{11,11}", { clearIncomplete: true, greedy: false });
});
<script src="~/assets/js/jquery.inputmask.min.js"></script> //2022 Robin Herbots
Related
I am new into PHP and Html , I have a form where I am able to post details using third party service.I want to make this form submission in such a way that after submission this should start pdf download automatically.It should perform 2 actions on same button click. I have gone through many solutions but I am not able to make this work. Here is my form
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
This form submission is working fine, how can I start downloading pdf after this, any sample code in javascript or php would be helpful.Thanks
You need to add an id="SampleForm" in your form.
<div class="modal-body">
<div class="media-container-column" data-form-type="formoid">
<div data-form-alert="" hidden="" class="align-center" > Thanks for filling out the form use this link to Download </div>
<form id="SampleForm" class="mbr-form" action="https://mobirise.com/ " method="post" data-form-title="Mobirise Form"><input type="hidden" name="email" data-form-email="true" value="bUMCs/mtytHWYRo/XjN7tA1PqfT+NB00KjPTWZfuYXvKQmJxQUOr1gzeKJUJwLqxqXI/Euh3h4TzMmnq0FW5UjTC1AjsnumlJFTc7U5521K+f6PwqF4lRJdVha0cCPLW" data-form-field="Email">
<div data-for="name">
<div class="form-group">
<input type="text" class="form-control px-3" name="name" data-form-field="Name" placeholder="Name" required="" id="name-header15-c">
</div>
</div>
<div data-for="email">
<div class="form-group">
<input type="email" class="form-control px-3" name="email" data-form-field="Email" placeholder="Email" required="" id="email-header15-c">
</div>
</div>
<div data-for="phone">
<div class="form-group">
<input type="tel" class="form-control px-3" name="phone" data-form-field="Phone" placeholder="Phone" id="phone-header15-c">
</div>
</div>
<span class="input-group-btn"><button onClick="header.php" type="submit" class="btn btn-secondary btn-form display-4">Download</button></span>
</form>
</div>
</div>
Then you need to add some code to process download on form Submit event.
<script>
var pdfUrl = "https://example.com/link-to-your-pdf";
$('#SampleForm').on('submit', function () {
window.open(pdfUrl, '_blank');
});
</script>
You'll have to handle submission with Javascript, instead of the default one.
There is some documentation about sending form submission throught javascript:
https://developer.mozilla.org/en-US/docs/Learn/Forms/Sending_forms_through_JavaScript
I'm still learning to programme on AngularJS.
I want to get values from the input box and then click on the button I want to save them in the database.
My database table is called "user". I have columns like id, username, password, name.
I have two checkbox.When I click on first checkbox(Edit) it displaying "div myVar",when i click on second checkbox(Add new user) it displaying "div myVar1".
I want to activate this button "Add" to add input box values to database MySQL. Please help me.
I have this html code:
<label><input type="checkbox" ng-model="myVar">Edit</label>
<label><input type="checkbox" ng-model="myVar1">Add new user</label>
<div ng-show="myVar">
<div class="form">
<form ng-submit="saveItem(userForm.$valid)" name="userForm">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control" required ng-model="activeItem.username" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control" required id="password" ng-model="activeItem.password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control" required id="username" ng-model="activeItem.name" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Save</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form><form ng-submit="createUser(userForm.$valid)" name="userForm1">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label for="database_address">User</label>
<input type="text" class="form-control1" ng-model="usernamee" placeholder="Потребителско Име..." />
</div>
<div class="form-group">
<label for="password">Password</label>
<input type="text" class="form-control1" ng-model="passwordd"required id="password" />
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label for="username">Operator</label>
<input type="text" class="form-control1" ng-model="namee" required id="username" />
</div>
</div>
</div>
<button class="btn btn-primary" ng-click="createUser();" type="submit">Add user</button>
<!--<button class="btn btn-primary" ng-disabled="userForm.$invalid" type="submit">Добавяне на нов</button>-->
</form>
And Angular code:
$scope.createUser=function()
{
//console.log($scope.activeItem);
//delete $scope.activeItem.hash_method
var objectToSave = {
username: $scope.usernamee,
password: $scope.passwordd,
name: $scope.namee,
id: $scope.id
};
{
defaultAdapter.query('INSERT INTO users(username,password,name,id) VALUES(username = :usernamee, password = :passwordd,name = :namee WHERE id =:id)',
{ replacements: objectToSave, type: Sequelize.QueryTypes.UPDATE }
).then(projects => {
console.log(projects);
$scope.editMode = false;
$scope.activeItem = false;
$scope.refresh();
});
}
}
I have a form that is being used as a basic contact form. I have added a checkbox that adds some fields if selected. How can I change the onclick action of the submit button based on if this box is checked or not. Here is what I have currently.
<form class="homeContact">
<label for="chkJob">
Interested in a career? Check to apply
<input type="checkbox" id="chkJob" />
</label>
<div id="dvApply" style="display: none">
Download Application
Download the application. Fill it out and upload below:
<input type="file" name="fileToUpload" id="fileToUpload">
</div>
<div id="popErr"></div>
<input type="hidden" name="nospam">
<div class="field">
<div class="label-form">
<input type="text" placeholder="Name *" value="" name="name" id="popName">
<span class="form-icon fa fa-user"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Email *" value="" name="email" id="popEmail">
<span class="form-icon fa fa-envelope"></span>
</div>
</div>
<div class="field">
<div class="label-form">
<input type="text" placeholder="Phone *" value="" name="phone" id="popTel">
<span class="form-icon fa fa-phone"></span>
</div>
</div>
<div id="submit_button">
<input type="button" class="button submit" id="contact-submit" onclick="submitForm()" value="Request Information">
</div>
</form>
<script>
jQuery(document).ready(function($) {
$("#chkJob").click(function () {
if ($(this).is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
});
});
</script>
You can implement this login into your submitForm function:
function submitForm()
{
if ($('#chkJob').is(":checked")) {
$("#dvApply").show();
} else {
$("#dvApply").hide();
}
}
But if you want dvApply to be toggled every time checkbox button is clicked without waiting for submit button to be clicked you can do something like:
jQuery(document).ready(function($) {
$('#chkJob').change(function() {
$('#dvApply').toggle();
});
});
How can I access the HTML elements of this form using plain JS or preferably jQuery? I want to access input fields (username, password) and button (login). I'm clueless since these elements don't have "ID" and class is also the same for some.
I'm working on a Chrome extension.
<form data-bind="submit: login">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" data-bind="value: loginEmail">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" data-bind="value: loginPassword">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<button data-bind="click: logout" class="btn btn-default">Log Out</button>
</div>
</form>
Use the attribute selector
console.log('email',$('[data-bind="value: loginEmail"]'));
console.log('password',$('[data-bind="value: loginPassword"]'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form data-bind="submit: login">
<div class="form-group">
<label>Email</label>
<input class="form-control" type="text" data-bind="value: loginEmail">
</div>
<div class="form-group">
<label>Password</label>
<input class="form-control" type="password" data-bind="value: loginPassword">
</div>
<div class="form-group">
<button type="submit" class="btn btn-default">Log In</button>
<button data-bind="click: logout" class="btn btn-default">Log Out</button>
</div>
</form>
You can use querySelecor(https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector), for example like this:
document.querySelector('input[data-bind="value: loginEmail"]');
document.querySelector('input[data-bind="value: loginPassword"]');
You could use the input[type='password'] selector like this:
$('body').find("input[type='password']");
I have the following form. I want to validate the email field .it should only contain for domain name "#somename.com " when the user clicks submit.
The mail should only be validated when the check box is clicked to show the email field.
If the email is invalid i want to prevent submission
<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<label class="checkbox-inline col-xs-10">
<input type="checkbox" ID="chkbx"> Email
</label>
</div>
</div>
<div class="form-group email">
<div class="col-xs-offset-3 col-xs-8">
<div class="col-xs-8">
<input type="text" class="form-control " placeholder="Enter email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<input type="reset" class="btn btn-default" id="rset" value="Reset">
<input type="submit" class="btn btn-primary" id="submit" value="Submit">
</div>
</div>
</form>
JS
$("#submit").on('keypress click', function(e){
e.preventDefault();
$('#chkbx').hide();
$('#chkbx').click(function () {
// This will show / hide your element accordingly
$('.email').toggle();
});
});
Checkout JavaScript RegEx to determine the email's domain (yahoo.com for example). You can use that and augment your example:
$('#chkbx').click(function() {
// This will show / hide your element accordingly
$('.email').toggle();
});
$("#submit").on('click', function(e) {
e.preventDefault();
if ($('#chkbx').is(':checked')) {
// https://stackoverflow.com/questions/3270185/javascript-regex-to-determine-the-emails-domain-yahoo-com-for-example
console.log(/#testdomain.com\s*$/.test($('#email_input').val()));
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="form-horizontal" id="rForm" data-toggle="validator" role="form">
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<label class="checkbox-inline col-xs-10">
<input type="checkbox" ID="chkbx" checked>Email
</label>
</div>
</div>
<div class="form-group email">
<div class="col-xs-offset-3 col-xs-8">
<div class="col-xs-8">
<input id="email_input" type="text" class="form-control " placeholder="Enter email">
</div>
</div>
</div>
<div class="form-group">
<div class="col-xs-offset-3 col-xs-8">
<input type="reset" class="btn btn-default" id="rset" value="Reset">
<input type="submit" class="btn btn-primary" id="submit" value="Submit">
</div>
</div>
</form>
Use the following function to test for your email.
EDIT:
You first need to add a name= and id= to your email input field.... So what you want to do is:
<input type="text" class="form-control " placeholder="Enter email" name="email" id="email">
and then do:
function testEmail(string) {
var regex = /.+#somename.com$/i;
return regex.test(string);
}
//testEmail("nope#test.com"); // false
//testEmail("what#somename.com.other"); //false
//testEmail("yeah#somename.com"); //true
//testEmail("#somename.com"); // false
$('form').submit(function(e){
var values = $('form').serialize();
if(!testEmail(values.email))
e.preventDefault();
// your submission code goes here.
})