I'm trying to wrap the price of an item in a span. Right now the RegExp wraps the numbers but not the $ (dollar sign). I need a regex that wraps the entire price.
HTML
<fieldset>
<label>
<input>Thing $4.99</input>
</label>
</fieldset>
JQUERY
var rxp = new RegExp("([0-9]+\.?[0-9]+)", "gm");
$( "fieldset label" ).each(function() {
var $this = $(this);
var content = $this.html();
console.log($(this).html());
$this.html(content.replace(rxp, "<span>$1</span>"));
});
This is not the correct way to do it. html() method will return you html markup, but changing it will not change the DOM. Instead you should empty your parent and append new span in it. Also you are using input tag in a wrong way, it can't have children, you should set value to value attr:
// HTML
<fieldset>
<label>
<input value="Thing $4.99" />
</label>
</fieldset>
// JavaScript
var priceRegExp = /^.*(\$[0-9](\.[0-9]{2})?).*$/;
$("fieldset label").each(function() {
var $this = $(this);
var inputVal = $this.children('input').prop('value');
var price = priceRegExp.exec(inputVal)[1];
$this.empty().append('span').text(price);
});
Related
What you type inside the input box should be replicated below, on each span.
I can do this with de js code below, but to do so I need to make the same code over and over again for each span that needs to be completed. I've tried using same class "one" on every span, but only works on the first span. I have to create a new class for every span and some code for each one of those spans.
I want to know a way to replicate the same text in many many spans without so much code. How?
var rep = document.getElementById('A');
rep.addEventListener('input', function() {
var result = document.querySelector('span.one');
result.innerHTML = this.value;
});
var rep = document.getElementById('A');
rep.addEventListener('input', function() {
var result = document.querySelector('span.two');
result.innerHTML = this.value;
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>
Use querySelectorAll to select all the elements of same css selector. Please use following code:
Please use this link to study more about querySelectorAll
var rep = document.getElementById('A');
rep.addEventListener('input', function() {
var result = document.querySelectorAll('span');
for(const res of result) {
res.innerHTML = this.value;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="A">
<p>One: <span class="one"></span></p>
<p>Two: <span class="two"></span></p>
I would like to set the text of the label. Unfortunately the number 36 will change on each page refresh.
<label for="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" id="rn_TextInput_36_Label" class="rn_Label">TEXT HERE</label>
<input type="text" id="rn_TextInput_36_Incident.CustomFields.c.other_action_taken" name="Incident.CustomFields.c.other_action_taken" class="rn_Text" maxlength="50" required="">
I can get the ID by using:
var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');
How can I then use this to set the label text i.e. target the label by the value of the for attribute in JavaScript - not jQuery
So as mentioned, the number will change each time so I can't use the ID value of rn_TextInput_36_Label that the label currently has
Your element has the class rn_Label, so you can select by that.
var el = documment.querySelector(".rn_Label");
If you need to get more specific, you can include the tag name and part of the for attribute.
var el = documment.querySelector("label.rn_Label[for^=rn_TextInput_][for$=_Incident.CustomFields.c.other_action_taken]");
So this last selector selects the first element that:
has tag name label
has class name rn_Label
has a for attribute that starts with rn_TextInput_
has a for attribute that ends with _Incident.CustomFields.c.other_action_taken
And of course you can use querySelectorAll to select all elements on the page that meet that criteria.
you can work same as this code:
var input = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0];
if(input.labels.length > 0) {
var labelID = input.labels[0].id;
document.getElementById(labelID ).innerHTML = 'New Text for this lable';
}
else {
alert('there is no label for this input');
}
https://jsfiddle.net/SETha/75/
var id = document.getElementsByName('Incident.CustomFields.c.other_action_taken')[0].getAttribute('id');
document.querySelector("label[for='"+id+"']").innerText = 'new text';
It gets the ID and then uses querySelector to get the related label and sets the innertext
This is my html
<td>
<input type="text" name="FullName"/>
<img/>
</td>
I'm trying to get the image element as the following way. However, it's not working-
var form = document.forms["myform"];
var fullNameTextBox = form["FullName"];
var thisImage = fullNameTextBox.nextSibling;
thisImage.style.display = 'block'; //shows uncaught type error,can not set property display of undefined.
Any help?
You've to use nextElementSibling
var form = document.forms["myform"];
var fullNameTextBox = form["FullName"];
var thisImage = fullNameTextBox.nextElementSibling;
thisImage.style.display = 'block';
.nextSibling will match textnodes (like the whitespace)
Either remove the whitespace from your html
<input type="text" name="FullName"/><img/>
or use .nextElementSibling
I need to remove y from the text character:
My mark up:
<label>
<input type="checkbox" name="_sft_category[]" value="" data-sf-cr="_sft_31" data-sf-hide-empty="1"> y2012 <span class="sf-count">(8)</span>
</label>
it has to become 2012 and I am trying the following but with no luck
$('label input').text(function() {
var text = $(this).text();
return text.indexOf('y') == 0 ? text.substring(1) : text;
});
There is a blank space in my text output, I wonder if that has something to do as it is " y2012 "
You are not setting value again in input
$('label input').text(function() {
var text = $(this).text();
text = text.replace('y','');
$(this).val(text);
});
Note: If you can change the original markup instead of fixing it using javascript that will be better.
In this case it is not the input element's text, it is the contents of a text node so
var $input = $('label input'),
elTxt = $input[0].nextSibling;
elTxt.nodeValue = elTxt.nodeValue.replace(/^(\s)?y/, '$1')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<label>
<input type="checkbox"> y2012
</label>
Use this:
return text.replace("y", "")
JAVASCRIPT
I am just trying to returen the value of the date selected but it's coming back undefined.
var getDate = function() {
var bdinput = $('#bd.bdinput').val();
var _this = bdinput;
console.log(_this);
};
$("button.bdsubmit").click(function() {
console.log(getDate());
})
HTML
<form id="bd">
<input name="BirthDate" class="bdinput" type="date" />
<button class="bdsubmit" type="submit">Submit Date</button>
You need .val() to get value of input not .value
var bdinput = $('#bd .bdinput').val();
// ^ also need space here
$('#bd .bdinput') will select element with class bdinput inside element with id bd.
$('#bd.bdinput') will select a element with id 'bd' and class bdinput (both id and class in one element)
If you want to do it with .value
var bdinput = $('#bd .bdinput')[0].value;
Or
var bdinput = $('#bd .bdinput').get(0).value;
It was a simple mistake.
var bdinput = $('#bd.bdinput').value;
should be:
var bdinput = $('#bd. bdinput').val();