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']");
Related
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
I use bootstrap with angular, and I disabled bootstrap's validation, angular still doesn't work. It seems that I already set everything.
My code likes below, every input's validation didn't.
<form novalidate name="new_people" ng-if="is_editting_newpeople" class="form-horizontal" role="form" ng-submit="save_new_people()">
<div class="input-group">
<div class="input-group-addon">True Name</div>
<input class="form-control" name="realname" type="text" ng-model="editting_people.realname" autofocus required>
</div>
<div class="input-group">
<div class="input-group-addon">Nickname</div>
<input type="text" name="nickname" class="form-control" id="nickname" ng-model="editting_people.nickname" required>
</div>
<div class="input-group">
<div class="input-group-addon">Mobilenumber</div>
<input type="text" class="form-control" id="mobile" name="mobilenumber" ng-model="editting_people.mobilenumber" required ng-minlength=11>
</div>
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-default
dropdown-toggle" data-toggle="dropdown">{{ editting_people.idclass.name }}
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li ng-repeat="id_class in IDCLASSES">
<a ng-click="set_id_class(id_class)">{{ id_class.name }}</a>
</li>
</ul>
</div>
<!-- /btn-group -->
<input type="text" class="form-control" ng-model="editting_people.idnumber" required name="idnumber">
</div>
<!-- /input-group -->
<br>
<input class="btn btn-primary" type="submit" value="Submit" />
<input class="btn btn-default" value="取消" type="button" ng-click="cancel_new_people()" />
</form>
What do you mean by input doesn't work?
Post your code of related controller please, because it is not clear what validation are you doing. If you have novalidate you should organize validation in your angular controller or HTML, e.g.:
<div ng-show="editting_people.realname.length<4">
Any error message here.
</div>
I want to know if it's possible to use a button instead of href to trigger a div.
Here are examples below:
This is the current div:
<div id="ver" class="modal-block modal-block-primary mfp-hide">
<section class="panel">
<header class="panel-heading">
<h2 class="panel-title">Registration Form</h2>
</header>
<form class="form-horizontal mb-lg" method="POST" novalidate="novalidate">
<div class="panel-body">
<div class="form-group mt-lg">
<label class="col-sm-3 control-label">Name</label>
<div class="col-sm-9">
<input type="text" name="name" class="form-control" placeholder="Type your name..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Email</label>
<div class="col-sm-9">
<input type="email" name="email" class="form-control" placeholder="Type your email..." required/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">URL</label>
<div class="col-sm-9">
<input type="url" name="url" class="form-control" placeholder="Type an URL..." />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Comment</label>
<div class="col-sm-9">
<textarea rows="5" class="form-control" placeholder="Type your comment..." required></textarea>
</div>
</div>
</div>
<footer class="panel-footer">
<div class="row">
<div class="col-md-12 text-right">
<input type="submit" name="ola" value="Submit">
<button class="btn btn-default modal-dismiss">Cancel</button>
</div>
</div>
</footer>
</form>
</section>
This is how I can trigger it using href:
<a class="modal-with-form btn btn-default" href="#ver">Open Form</a>
This is how I tried:
<a class="modal-with-form btn btn-default" href="#ver?id=$ausenciaid">Open Form</a>
But it didn't work , there is a way to use a button instead of href?
you can try this
<input type="button" onclick="location.href='Your location';" value="Open Form" />
This will give you a button and when you click on it you will transfer/open your href
Less recommended inline way:
<button onclick="location.href='Your location';"> Open Form" </button>
OR
Attach Event & trigger using javascript:
<button type="button" id="mybutton" >Open Form </button>
<script>
document.getElementById("mybutton").addEventListener("click", function(){
window.location.href = <input type="button" onclick="location.href='Your location';
});
</script>
I have a form that looks like this:
<div class="col-xs-12 col-lg-4">
<form name="deliveryForm" ng-class="{ 'has-error': deliveryForm.$invalid && !deliveryForm.contact.$pristine }">
<div class="form-group">
<div class="btn-group">
<label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="true" ng-change="controller.setDeliveryDetails()">For delivery</label>
<label class="btn btn-default" ng-model="controller.order.lines[0].forDelivery" btn-radio="false" ng-change="controller.findCollectionPoints()">For collection</label>
</div>
</div>
<div class="form-group" ng-if="!controller.order.lines[0].forDelivery">
<label class="control-label">Contact</label>
<input class="form-control" type="text" name="contact" ng-model="controller.model.contact" ng-change="controller.setDeliveryDetails()" autocomplete="off" required />
<input type="hidden" name="collectionPoint" ng-model="controller.model.collectionPoint" ng-change="controller.setDeliveryDetails()" required />
</div>
<div class="form-group">
<label class="control-label">Instructions</label>
<input class="form-control" type="text" name="instructions" ng-model="controller.model.instructions" ng-change="controller.setDeliveryDetails()" autocomplete="off" />
</div>
<div class="form-group">
<button class="btn btn-default" type="button" ui-sref="saveOrder.lines">Back</button>
<a class="btn btn-primary pull-right" ng-if="deliveryForm.$valid" ui-sref="saveOrder.confirm">Continue</a>
</div>
</form>
</div>
As you can see, if my first line is not for delivery, then I show the contact input and the hidden collectionPoint input.
A bit further down I have a link that changes the collectionPoint:
What I was hoping would happen is that the hidden input would detect the change and fire the controller.setDeliveryDetails() method, but it doesn't seem to work.
Is there a way I can do this?
ng-change is triggered when changes are made on an input not on the model.
What you can do is either run controller.setDeliveryDetails() on ng-click :
Or set up a watch in your controller on controller.model.collectionPoint
$scope.$watch(angular.bind(this, function () {
return this.model.collectionPoint;
}), function (newVal) {
controller.setDeliveryDetails();
});
I've a form but it doesn't pass the parameters 'url' and 'USERNAME' to the next page. Is there something wrong?
I must use <button> instead of <input> for styling issues.
Here is the form:
<form action="/confirmation/index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
</div>
</form>
email_btn should be of type="submit" instead of type="button", so rather:
<button type="submit">Send me the results</button>
see here:
http://www.w3schools.com/tags/tag_button.asp
This should work with a submit Button!
(The extra php is to show that it works!)
<?php
if (isset($_POST['submitted'])) {
echo "form submitted";
}
?>
<form action="index.php" method="post" class="form-wrap">
<div class="loader-wrap">
<div class="loader-txt">
</div>
</div>
<div class="field-set url-field">
<input type="text" name="url" data-placeholder="Your Website URL" maxlength="50" class="validate">.
<button name="url_btn" type="button" class="btn url-btn">Scan My Site!</button>
</div>
<div class="field-set email-field">
<input type="text" name="USERNAME" data-placeholder="Your E-mail" maxlength="50" class="validate">
<button name="email_btn" type="button" class="btn email-btn" style="width:174px;font-size:15px;">Send me Results!</button>
<button name="submitted" type="submit">Send me the results</button> //Submit Button
</div>
</form>