I have a form. Built with Bootstrap3. On this form I have twitter typeahead fields.
I need to be able to nest a button in the typeahead field as is standard with bootstrap.
When the form loads the button is part of the field. When the field is typed in the button shifts downwards approximately 4 pixels.
The HTML for that section of the form is:
<div class="form-group">
<div class="input-group" id="partTypeahead">
<label for="Part Number">Part Number</label>
<input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+ Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
<span class="input-group-btn">
<button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
</span>
</div>
</div>
I have even tried adding a method to modify the button's css when the field is typed in and it simply ignores anything like that.
Not sure if this is the exact solution you are looking for, check out this:
The HTML:
<div class="form-group">
<label for="Part Number">Part Number</label>
<div class="input-group" id="partTypeahead">
<input type="text" class="form-control input-sm typeahead" id="partNumber" placeholder="4+ Characters then Press Search" data-toggle="tooltip" data-placement="top" title="Enter At Least 4 Characters And Then Press Search Button">
<span class="input-group-btn">
<button class="btn btn-default btn-xs moveDown" type="button" id="showPart" data-toggle="tooltip" data-placement="right" title="Go to Part"><span class="glyphicon glyphicon-open"></span></button>
</span>
</div>
CSS:
label{
display:block;
}
input,button{
min-height:30px;
}
Check out the JSFiddle.
Related
Problem: Can't get code to 'click' button to execute action
Context: I'm able to get the element and change it from disabled to visible so I know I have the button class name correct in the command prior to this one but for whatever reason when the code gets to this switch case nothing happens; and no error is provided in the xcode console. There is no button input id and no form name associated either.
Question: Since I'm certain I have the getElementsByClassName....click() part correct, and I know this is the only element on the page with this name is there another way to execute the 'click'
Website HTML code:. [Last few lines of code]
<div class="mr-0 mr-md-5 pr-md-4 mb-4">
<p class="mb-1 body-s" role="" aria-live="">Password</p>
<span class="aria-hidden-logic d-none" aria-hidden="false">
<label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="oldPassword"></label>.
</span>
<div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
<input class="form-control is-invalid" type="password" id="oldPassword" placeholder="Old password" maxlength="40" aria-describedby="error-oldPassword" aria-label="oldPassword" value="">
<button class="body-xs show-hide-btn" aria-label="Show Current Password">Show</button>
<div aria-live="polite">
<div class="error-class" id="error-oldPassword">Please enter your password</div>.
</div>
</div>
<span class="aria-hidden-logic d-none" aria-hidden="false">
<label class="body-xs font-weight-bold mt-lg-2 mt-xl-2" for="newPassword"></label>.
</span>
<div class="input-controller aria-hidden-logic mb-2" aria-hidden="false">
<input class="form-control " type="password" id="newPassword" placeholder="New password" maxlength="40" aria-describedby="error-newPassword" aria-label="newPassword" value="">
<button class="body-xs show-hide-btn" aria-label="Show New Password">Show</button>.
<div aria-live="polite"></div>
<span>
<ul class="ul-list-helpText">
<li class="">Password must be 8-40 characters long.</li>
<li class="">Your new password cannot be the same as your old password.</li>
</ul>
</span>
</div>
<div class="d-flex justify-content-end">
<button type="button" class="btn btn-link body-s h-auto my-2 mr-3">Cancel</button>.
<button type="button" class="btn btn-secondary core-btn uca-button btn btn-sm btn-primary">Save</button>
</div>
</div>
Swift Code [Doesn't work to click Save button]
webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].click();"){
(result, error) -> Void in
print(error)
}
Swift Code [Works to enable Save button - when it's originally disabled]
webView.evaluateJavaScript("document.getElementsByClassName('btn btn-secondary core-btn uca-button btn btn-sm btn-primary')[0].disabled = false;"){
(result, error) -> Void in
print(result)
print(error)
}
I'm working on an e-commerce project that uses jquery repeater in the wizard. I need to loop through the elements of the input to make my validations. Here is my input form code.
<button data-repeater-create type="button" class="btn btn-dark btn-sm icon-btn ml-2 mb-2 float-right">
<i class="mdi mdi-plus"></i>
</button>
<div data-repeater-list="group">
<div data-repeater-item class="d-md-flex mb-2">
<div class="form-group mr-1">
<input type="text" class="mt-0 form-control form-control-sm" id="sku" name="sku" placeholder="sku">
</div>
</div>
</div>
It comes in the browers elements like this,
<input type="text" class="mt-0 form-control form-control-sm" id="sku" name="group[0][sku]" placeholder="sku">
you can see, its like an array. So I need to get all these elements and validated all. For other field validation I have use
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
can I use this for the those field?
Thanks in advance.
this is my code for first element, inside of first dynamic form
<input type="text" class=" form-control" id="pPilihan" style="font-size: 1rem;" name="p_pilihan[]" required placeholder="Masukan Nama Pilihan, contoh: Merah / XL">
Tambah
this is my code for add input element
<div class="copy d-none">
<div class="control-group input-group" style="margin-top:10px">
<input type="text" class="form-control" id="pPilihan" style="font-size: 1rem;" name="p_pilihan[]" required placeholder="Masukan Nama Pilihan, contoh: Merah / XL">
<div class="input-group-btn">
<button class="btn btn-danger remove" type="button"><i class="glyphicon glyphicon-remove"></i> Hapus</button>
</div>
</div>
</div>
and this is my js
$(document).ready(function() {
$("body").on("click", ".add-more", function(){
var html = $(".copy").html();
$(".after-add-more").before(html);
});
$("body").on("click",".remove",function(){
$(this).parents(".control-group").remove();
});
});
The question is not clear to me but I can see a bug in your code, you simply can't have two elements having the same id. Each time 'add more' button is clicked the input element with id="pPilihan" is getting repeated, which is wrong. You can solve this by using a counter to produce a dynamic id (if you need one).
I have a one text box search, and one button,when i add the text and click button, related data will be getting but when i click another search.that is taking same id,previous id not clearing. how to clear that id
<div class="col-lg-4 col-sm-4 col-xs-12">
<i class="glyphicon glyphicon-search"></i>
<div class="form-group">
<input type="text" class="form-control" id="isbncollegeid" data-ng-model="isbncollege" placeholder=" Search By college ISBN" name="isbncollegeid">
</div>
</div>
<div class="col-sm-4">
<br />
<div class="form-group">
<input type="hidden" id="bookcollgeIsbn" name="bookcollgeIsbn" />
<button type="button" class="btn btn-sky" id="IsbntcolDetails" data-ng-disabled="LibraryIsbnForm.$invalid" data-ng-click="DetailscolByISBN()">Get Details<i class="fa fa-exclamation"></i>
</button>
<button type="button" class="btn btn-sky" id="clear" data-ng-click="ClearISbnCollege()">Clear<i class="fa fa-exclamation"></i>
</button>
</div>
</div>
In your ClearISbnCollege just make isbncollege model empty
$scope.ClearISbnCollege = function() {
$scope.isbncollege = "";
}
When you will click the Clear button, input will be emptied.
You can use below line of code after getting results in javascript:
document.getElementById('elementid').value = "";
in Jquery:
$('#elementid').val("");
How to place more than 1 nested element in paragraph
I have
p
label Item image
.input-group
input#addItemFile.form-control(type='file')
input.form-control(type='text', readonly='')
span.input-group-addon.btn.btn-default.btn-file.btn-primary Browse
And expect
<input class="form-control" id="addItemFile" type="file">
<input class="form-control" type="text" readonly="">
<span class="input-group-addon btn btn-default btn-file btn-primary">Browse</span>
But i get
<p>
<label>Item image</label>
</p>
<div class="input-group"><input class="form-control" id="addItemFile" type="file">
<input class="form-control" type="text" readonly="">
<span class="input-group-addon btn btn-default btn-file btn-primary">Browse</span>
</div>
Thank you!
The code you have will generate markup with the div inside the paragraph. The problem is that HTML forbids divs from appearing there so the browser will implicitly end the paragraph before the div and then discard the end tag for the paragraph.
You need to use an element that is allowed inside a paragraph instead.
e.g. span.input-group
Try the following instead:
p label Item image
.input-group
input#addItemFile.form-control(type='file')
input.form-control(type='text', readonly='')
span(class="input-group-addon btn btn-default btn-file btn-primary") Browse
The above code nests for me fine. Output in Firefox:
<p> label Item image<div class="input-group"><input id="addItemFile" type="file" class="form-control"><input type="text" readonly="" class="form-control"><span class="input-group-addon btn btn-default btn-file btn-primary">Browse</span></div></p>