I am trying to add both an ID and class to input fields plus the addition of a number after each ID and class element so that they all have unique ID's and Class's. I need this to be added to the input fields on window load. After many attempts I am having trouble doing this with various counter suggestions.
I have now removed the non working code(s) to show where I am starting and hopefully someone can give me that extra bit of JavaScript to do this :), what I have so far is
Name: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
<button>A button</button>
<script>
function myFunc() {
document.getElementsByTagName("input")[0].setAttribute("id", "fieldid");
document.getElementById("fieldid").value = "Johnny Bravo";
var element = document.getElementById("fieldid");
element.classList.add("mystyle");
}
window.onload = myFunc;
Your help is appreciated
Here is an example of how you can use the incremental values for your id and class name for the input elements:
function myFunc() {
var inputElem = document.getElementsByTagName("input");
for(var i=0; i < inputElem.length; i++){
inputElem[i].setAttribute("id", "field"+i);
inputElem[i].value = "Johnny Bravo "+i;
inputElem[i].classList.add("mystyle" + i);
}
}
window.onload = myFunc();
Name1: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone1: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Name2: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone2: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Name3: <input placeholder="Please provide your name" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
Phone3: <input placeholder="Please provide your phone number" class="form-control ng-pristine ng-empty ng-valid ng-valid-required ng-touched" style="">
<button>A button</button>
var elements = document.getElementsByTagName('input');
var index = 1;
for(var e of elements){
e.setAttribute("id", "fieldid"+index);
index++;
}
And you can do the same for the class attribute. Of course if you don't want every input element on the page to get new ids you have to use a more specific selector.
Related
I have a form in one of my apps:
<div class="custom-form-field">
<label>
Email
<span class="required-asterix"></span>
</label>
<input name="email" class="email" type="email" placeholder="Work Email" tabindex="0" value="">
</div>
I have the ability to run a custom script in the header or the body of the page, and I would like to change the label from "Email" to "Company email".
Any suggestions?
Thanks
To match an element by its contents you'll need to use XPath.
let emailLabels = document.evaluate( "//div[contains(#class, 'custom-form-field')]/label[contains(., 'Email')]", document, null, XPathResult.ANY_TYPE, null );
let label = emailLabels.iterateNext();
label.innerText = "Company Email";
<div class="custom-form-field">
<label>
Email
<span class="required-asterix"></span>
</label>
<input name="email" class="email" type="email" placeholder="Work Email" tabindex="0" value="">
</div>
If you want to use native javascript, can try this:
<div class="custom-form-field"><label>Email<span class="required-asterix"></span></label><input name="email" class="email " type="email" placeholder="Work Email" tabindex="0" value=""></div>
<script>
custom_field = document.getElementsByClassName('custom-form-field');
custom_field[0].children[0].outerText = 'Company Email';
</script>
script:
$(document).ready(function (){
$(document).on('click', '.add_category', function(e){
e.preventDefault();
var data = {
'category_name': $('.category_name').val(),
'category_description': $('.category_description').val(),
}
console.log(data);
});
});
form:
<h4 class="text-center font-weight-bold">Add New Category</h4>
<div class="form-group">
<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
</div>
<div class="form-group">
<textarea class="form-control w-100" placeholder="Category Description" class="category_description" cols="50" rows="10"></textarea>
</div>
need advice, my input fields event with me adding content returns undefined even when the variable is the same at the input type and the script's var data
I also tried to change class="category_name" to name="category_name"
What am I missing?
Your HTML tags include two class attributes:
<input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
^^^ here ^^^ and here
The browser is ignoring the second one, so your jQuery selectors are returning empty sets.
You should combine the class attributes into one string:
<input type="text" class="form-control form-group w-100 category_name" placeholder="Category Name">
You cannot double declare class.
Where you had <input type="text" class="form-control form-group w-100" placeholder="Category Name" class="category_name">
You instead need to declare all classes together, like so:
<input type="text" class="category_name form-control form-group w-100" placeholder="Category Name" >
document.getElementById('submit').onclick=function(e){
e.preventDefault();
var data = {
'category_name': document.getElementsByClassName('category_name')[0].value,
'category_description': document.getElementsByClassName('category_description')[0].value,
}
console.log(data);
};
<h4 class="text-center font-weight-bold">Add New Category</h4>
<div class="form-group">
<input type="text" class="form-control form-group w-100 category_name" placeholder="Category Name" value="">
</div>
<div class="form-group">
<textarea class="form-control w-100 category_description" placeholder="Category Description" cols="50" rows="10" value=""></textarea>
</div>
<button id="submit"> Save</button>
I am working on a project. My goal is to automatically fill in data on a website.
But when I run the JavaScript code
just like this:
document.getElementsByClassName('form-control')[1].value = "MYTEXT";
The form is changing. But when I click the submit button it says this is empty.
I think this website using Angular Js.
This is what I'm working on
<input spellcheck="false" autocapitalize="none"
class="form-control input-sm ng-pristine
ng-untouched ng-valid ng-empty ng-valid-maxlength"
type="text" ng-model="render.etudName" maxlength="60"
ng-change="saveRenderer()" >
How do I solve this problem?
HTML Document is too long.
Some of the html.
<html class="no-js ng-scope" lang="tr" ng-app="VitaminMiddleSchoolApp" id="ng-app" xmlns:ng="http://angularjs.org"><!--<![endif]--><head><style type="text/css">[uib-typeahead-popup].dropdown-menu{display:block;}</style><style type="text/css">.uib-time
<!-- uiView: main --><div ui-view="main" class="vc-fullHeight ng-scope" autoscroll="false" style=""><div ng-controller="mainViewController" class="ng-scope"> <!-- ngIf: !render.shouldUpdatePass --><div ng-if="!render.shouldUpdatePass" id="componentMainView" class="vc-fullHeight ng-scope" fullscreen="false" header-scrolled="false" ng-switch="headerType"
<div class="p-h-xxs ng-binding">Canlı Ders Başlığı *</div> <input spellcheck="false" autocapitalize="none" class="form-control input-sm ng-pristine ng-untouched ng-valid ng-empty ng-valid-maxlength" type="text" ng-model="render.etudName" maxlength="60" ng-change="saveRenderer()"> </div> <div class="col-sm-3 p-xs"> <div class="p-h-xxs ng-binding">Sınıf *</div> <select class="form-control input-sm ng-pristine ng-untouched ng-valid ng-not-empty" name="grade" ng-change="gradeChanged()" ng-options="grade as grade.name for grade in render.grades" ng-model="render.selectedGrade" style=""><option label="5. Sınıf" value="object:3634" selected="selected">5. Sınıf</option><option label="6. Sınıf" value="object:3635">6. Sınıf</option><option label="7. Sınıf" value="object:3636">7. Sınıf</option><option label="8. Sınıf" value="object:3637">8. Sınıf</option></select> </div> <div class="col-sm-3 col-xs-6 p-xs"
You can try to change the $scope. Like this:
document.getElementsByClassName('form-control')[1].scope().value = "MYTEXT";
Read more about the $scope usage in AngularJS from here.
I'm working on a iOS app that uses a WKWebView to log into a website. The website presents a login form written in AngularJS that takes a UserId and Password. I'm attempting to pre-fill the UserId using javascript to fill in the appropriate value:
document.getElementsByName('UserId')[0].value = 'MyUserId'
Once submitted, the form returns 'invalid credentials' as if the userid input field has been left blank. If I subsequently make any manual changes to the UserId input field and resubmit it works.
I have verified that the UserId does contain the correct value. I have also tried to change the AngularJS field attributes prior to submitting the form:
ng-dirty ng-valid-parse ng-touched ng-not-empty ng-valid ng-valid-required
Within my javascript code, I make sure to convert the UserId to a javascript compatible string:
UserId.toString()
Manually typing the UserId and autofill from 1Password works as expected.
I would appreciate any suggestions or advice.
The angular code for the form:
<form class="spark-splash-screen__form spark-text-left ng-dirty ng-valid-parse ng-valid ng-valid-required" novalidate="" name="loginCtrl.loginForm" ng-submit="loginCtrl.submitForm()">
<p class="spark-margin-top--lg spark-margin-bottom" translate="">Sign In to.</p>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.id
}">
<input class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="UserId" placeholder="Enter User ID..." role="textbox" required="" ng-model="loginCtrl.formData.id" autofocus="">
<span class="spark-label">User ID</span>
</label>
<label class="spark-input" fang-input="" ng-class="{
'active': loginCtrl.formData.password
}">
<input type="password" class="spark-input__field ng-touched ng-not-empty ng-dirty ng-valid-parse ng-valid ng-valid-required" name="Password" placeholder="What is your password?" role="textbox" required="" ng-model="loginCtrl.formData.password">
<span class="spark-label">Password</span>
<span class="spark-input__addon spark-input__password-toggle">
<i class="spark-input__password-show spark-icon--md spark-icon-password-view"></i>
<i class="spark-input__password-hide spark-icon--md spark-icon-password-hide"></i>
</span>
</label>
<fieldset class="row">
<label class="col-xs-12 spark-checkbox">
<input class="spark-checkbox__input ng-pristine ng-untouched ng-valid ng-empty" type="checkbox" name="RememberMe" ng-model="loginCtrl.formData.rememberMe">
<span class="spark-checkbox__box"></span>
<span class="spark-label" translate="">Remember Me</span>
</label>
</fieldset>
<div class="row">
<div class="col-xs-12 spark-margin-top">
<button type="submit" class="spark-btn spark-btn--md spark-btn--primary spark-block--lte-sm spark-margin-bottom--md spark-pull-right--gte-sm" ng-disabled="loginCtrl.formSubmiting" translate="">Sign In</button>
<div class="spark-splash-screen__help-container spark-pull-left--gte-sm">
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('findUserOrPass')">Forgot User ID or Password?</button>
<button type="button" class="spark-btn spark-btn--text spark-splash-screen__help spark-margin-bottom--sm" translate="" ng-click="loginCtrl.openDialog('firstTimeUser')">First-Time User</button>
</div>
</div>
</div>
</form>
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;
Try also assigning the ng-model (loginCtrl.formData.id)
From loginCtrl, which I assume is the controller:
document.getElementsByName('UserId')[0].value = 'MyUserId';
formData.id = 'MyUserId';
If you're doing this asynchronously, you may need to $apply:
document.getElementsByName('UserId')[0].value = 'MyUserId';
$scope.$apply(function() {
formData.id = 'MyUserId';
});
This is the answer I figured out after being pointed in the right direction:
document.getElementsByName('UserId')[0].value = useridField;
angular.element(document.getElementsByName('UserId')).scope().loginCtrl.formData.id = useridField;
I am trying to combine input text with HTTP get. I tried some methods it works but it' doesn't what I want. I have some URL like this http://localhost/web.php?tN=false&f5=kaka
in f5 get some data from input in HTML. This my HTML
<div class="list">
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-user"></i> Username</span>
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-click="submitFunction()" required>
</label>
<label class="item item-input item-floating-label">
<span class="input-label"><i class="glyphicon glyphicon-lock"></i> Password</span>
<input id="inputPassword" class="form-control" placeholder=" Password" name="password" type="password" ng-model="loginData.password" required>
</label>
</div>
and this my controller
$scope.submitFunction = function() {
kaka.falselogin($scope.loginData.username).success(function(data) {
console.log(data);
});
};
My problem is that I must click after input in form username to get data. It's complicated if I must get data after input in form username
anyone has an idea ? Please help me to solve my problem. Thanks
You can just use the ng-change directive.
It'll run the provided function whenever the input`s value changed.
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-change="submitFunction()" required>
Considering you issue HTTP requests on each change, you'd basically flood the server.
To solve that issue you can debounce the model so that it takes x ms until the new value will be applied.
ng-model-options='{ debounce: 1000 }'
In combination it would look like this:
<input id="inputPassword" class="form-control" placeholder=" Username" name="loginname" type="text" ng-model="loginData.username" ng-model-options='{ debounce: 1000 }' ng-change="submitFunction()" required>
There you go :)