Using javascript to automatically create input-group from Bootstrap 3 - javascript

I'm trying to use javascript to automatically modify my input boxes to
<div class="input-group">
**<input type="text" class="form-control " placeholder="Text input">**
<span class="input-group-addon">*</span>
</div>
jsfiddle: http://jsfiddle.net/BEC7N/
The bold line is the line that already exists.
Below is my javascript attempt
$('[data-val-required]').prepend(' <div class="input-group">');
$('[data-val-required]').append(' <span class="input-group-addon">*</span></div>');
But it doesn't work. Any ideas? Thank you.

Change your code to this:
$('[data-val-required]').wrap(' <div class="input-group"></div>');
$('[data-val-required]').after(' <span class="input-group-addon">*</span>');
$('[data-val-required]').after(' <span class="required-indicator">*</span>');
Working Example

Use .wrap()
$('[data-val-required]').wrap('<div class="input-group" />');
$('[data-val-required]').after(' <span class="input-group-addon required-indicator">*</span>');

Related

Problem with copying a string, Javascript

I'm sorry if there's already a question like this, but I've found nothing about this, nor do I know exactly what to look for.
The problem:
When I copy #download_link via the copy button it only copies 53297234.png instead of 5ec8515390d267.53297234.png
My code:
<script>
function copy2clip(element) {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($(element).text()).select();
document.execCommand("copy");
$temp.remove();
}
</script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button class="btn btn-outline-secondary" type="button" onclick="copy2clip('#download_link')">Copy</button>
</div>
<input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/". $row['name'] ."" disabled>
</div>
$row['name'] = 5ec8515390d267.53297234.png
Thanks in advance :)
I'm not sure why you're getting a partial string--the code shouldn't work as is. Assuming your PHP variable concatenation is working (it's a good idea to establish that, then remove it from the question so it's reproducible and isolated), the .text() function can't be used to access an input element's value. Use $(element).val() instead.
From the docs:
The .text() method cannot be used on form inputs or scripts. To set or get the text value of input or textarea elements, use the .val() method.
As an aside, I wouldn't use $ to prefix your vars in JS. It's not a typical style and makes it confusing to see what's jQuery and what's JS.
If this doesn't solve the problem, then the issue is likely in your PHP script. Make sure it's concatenating correctly.
function copy2clip(element) {
var temp = $("<input>");
$("body").append(temp);
temp.val($(element).val()).select();
document.execCommand("copy");
temp.remove();
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<button
class="btn btn-outline-secondary"
type="button"
onclick="copy2clip('#download_link')"
>Copy</button>
</div>
<input
type="text"
class="form-control"
id="download_link"
placeholder="Link"
value="https://example.org/u/5ec8515390d267.53297234.png"
disabled
>
</div>
If you are interested in writing some fancy clean code, you should check this library
clipboard.js .
Example:
// you need to instantiate it by passing selector
new ClipboardJS('.btn');
<!-- Include the script via CDN (you can download it) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/2.0.4/clipboard.min.js"></script>
<div class="input-group mb-3">
<div class="input-group-prepend">
<!-- Trigger -->
<button class="btn btn-outline-secondary" type="button" data-clipboard-target="#download_link">Copy</button>
</div>
<input type="text" class="form-control" id="download_link" placeholder="Link" value="https://example.org/u/" .
$row['name'] ."" readonly>
</div>

Jquery does not set text box value

I am trying to set the value of a text box when file upload is selected , how ever it does not happen but I see correct value in alert box.
<div class="row">
<div class="col-xs-2">
<div class="file-label"><i></i>#Resources.FolderPath</div>
</div>
<div class="col-xs-4">
<input class=".form-control" name="fileText" type="text" />
<div class="fileUpload btn btn-primary">
<span>Browse</span>
<input type="file" name="File" id="fileUpload" class="upload"/>
</div>
</div>
<div class="col-xs-4">
<label id="fileSizeError" style="color: red"></label>
</div>
</div>
$(document).ready(function () {
$(document)
.on("change","#fileUpload",
function (e) {
alert($("#fileUpload").val());
$("#fileText").val($("#fileUpload").val());
alert("hi");
});
});
Please help me here.I am using Asp.net MVC as platform.
Your input has a name, but #fileText is an ID selector. Either add an id to it, or use an attribute selector to find it.
So either:
<input class=".form-control" id="fileText" name="fileText" type="text" />
<!-- add id------------------^^^^^^^^^^^^^ -->
or
$("[name=fileText]").val($("#fileUpload").val());
// ^^^^^^^^^^^^^^^---- use attribute selector
Try native js:
document.getElementById("fileText").defaultValue = $("#fileUpload").val();
OR
$("#fileText").attr("value", "some value");
Also;
Check to see if your original code works with replacing .val() with .text

How to change value of input

I have the following html structure:
<div class="checkout-related-view__related-row last">
<div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--left">
<input class="checkbox related-checkbox" data-role="none" id="related-checkbox-7085508-020-01077" type="checkbox" value="10">
<label for="related-checkbox-7085508-020-01077"><span class="checkbox"></span> Old Bed or Mattress Recycling</label>
</div>
<div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--right">
<span class="price"><span class="currency">£</span>39</span> <a class="checkout-icon checkout-icon-info related-info" data-content="We will collect your old bed frame, mattress, divan base and headboard, and recycle as much as possible into new material."
data-html="true" data-original-title="Recycling Service" data-toggle="popover" data-trigger="focus" href="javascript:void(0)" tabindex="0" title=""><span class="visuallyhidden">Recycling Service</span></a>
</div>
<div class="checkout-related-view__related-row-cell checkout-related-view__related-row-cell--qty">
<div class="input-combobox input-combobox__with-qty" data-label="Qty" data-range-max="1" data-range-min="0">
<span class="input-combobox__label">Qty</span>
<input class="input-combobox__text input-qty" name="related_products[7085508][10][qty]" type="text" value="0">
</div>
</div>
</div>
I've try using JS to change the QTY. Unfortunatelly there is no luck.
Please note that the code has no ID. Is there any way how I can set the value using name or class?
The code I've tried and didn't work is :
document.getElementsByClassName("input-combobox__text input-qty").value="1";
Can you please help?
getElementsByClassName returns an array of elements, and you can't apply value to an array. Instead, grab the first item in the returned array:
document.getElementsByClassName("input-combobox__text input-qty")[0].value = "1";
document.getElementsByClassName returns an array of elements, if you want to set the value of the first match do so
document.getElementsByClassName("input-combobox__text input-qty")[0].value="1";

How to validate input field inside ng-repeat

I want to validate an input field where i want to be able to check whether the current input is greater than the previous input.
Here is what i mean
<div class="col-xs-10" ng-repeat="period in trim.rent_period" >
<div class="col-xs-6">
<div class="form-group">
<label class="col-xs-5 control-label" for="rentperiod">Rental Period
<span class="colon--label">:</span>
</label>
<div class="col-xs-6">
<input id="rentperiod" name="rentperiod" type="text" class="form-control" ng-model="rent.period" ng-change="checkRentPeriod($index);" required>
</div>
</div>
</div>
</div>
<div class="col-xs-2">
<i class="pull-left fa fa-plus-circle add-rent--icon" ng-click="addRent(currentIndex);"></i>
</div>
Here the add button adds an input into the list , and i want to make sure that the current input is greater than the previous input.
Try to wrap your code with form tag. And then check for validation of form if everything is okay. You can do this by following this guide here as a way to solve your question
https://docs.angularjs.org/guide/forms
change your ng-model="rent.period" to correct, something starting from "period", like ng-model="period.rent"
no need for extra method ng-change="checkRentPeriod($index);"
add that simple block after input:
<span ng-if="$index > 0 && period.rent && period.rent > trim.rent_period[$index - 1].rent">
Rent is greater than {{trim.rent_period[$index - 1]}}
</span>

How come my input box's value isn't being returned?

Using twitter bootstrap, I have created a button with an input box beside it. I'm trying to then access that value in my view using jQuery but for some reason I can't get anything back besides "undefined". Here's my code:
jQuery:
var browserInput = $("#browserInput").val();
console.log(browserInput);
Html:
<div class="col-lg-4">
<div class="input-group">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" id="addBrowser">
<span class="glyphicon glyphicon-plus"></span>
Add
</button>
</span>
<input id="browserInput" type="text" class="form-control" style="display: none;" >
</div>
</div>
If this is your actual code layout, you won't get a value because the DOM isn't loaded at the time you are requesting the value.
You should try to wrap your function in document ready
$(document).ready(function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
If you want to have the value on keyup or interaction with the input box, you can also do it like
$(document).ready(function() {
$('#browserInput').on('keyup',function() {
var browserInput = $("#browserInput").val();
console.log(browserInput);
});
});
I'm going to undelete my answer because apparently it helped the poster solve his issue...
<input id="browserInput" type="text" value="" class="form-control" style="display: none;" />
Seems that having the value="" in the <input> tag made a difference for him.
I wonder if he meant "" instead of undefined.

Categories