Jquery Search String from span not working correctly - javascript

I am working with JQuery Filter and I am facing issue while searching string in span.
Following is the Search function which I am using:
function searchAccoms() {
var searchString = $('#searchval').val();
$('span.acc-head').each(function(){
var spanString = $(this).text();
if(spanString.search(searchString) == 1){
console.log('found');
}else{
console.log('Not Found');
}
});
}
HTML:
<input type="text" placeholder="Search" id="searchval" name="searchval">
<img src="images/icon_search.png" class="search-btn" type="submit" onclick="return searchAccoms();">
Scenario: I have following text in SPAN tag:
field
field
extra field
field1
field3
field2
Example SPAN:
<span id="18" class="acc-head"> field1</span>
When I search 'field' in the search box it works fine but when I search 'Field' the first letter in caps 'F' then it is not working. I am looking for %Field% like commend in MySQL.
Is there any other way to do the search?

Just make both strings either lowercase or uppercase to make the search case insensitive:
function searchAccoms() {
var searchString = $('#searchval').val();
$('span.acc-head').each(function(){
var spanString = $(this).text();
if (spanString.toLowerCase().search(searchString.toLowerCase()) == 1) {
console.log('found');
} else {
console.log('Not Found');
}
});
}
Another option would be to construct a regex, something like
var searchString = $('#searchval').val();
var regex = new RegExp(searchString, 'i');
...
if(spanString.search(regex) == 1)
but just making the strings the same case seems a lot easier

I guess if(spanString.match(searchString)) should do the work even if it returns an array .

Related

compare Two field if the field is in the content of other field using javascript after submit button clicked

Hi I am not a javascript expert thats why I will really appreciate any advice
I have a textfield named try where in I will input something
ex:
try value is
87
then I have another textfield named field11
field11 has a value of
777-a98;87-bx23;000-t88;245-k7
I wanted to compare try and field11 if try is found in the content of field 11 it will set the textfield named msg to 87-bx23 matched
msg value will be
87-bx23 matched
my code is like this but its not giving the desired output I know my comparison is wrong it just I dont know how
<script>
$(document).ready( function(){
$('#submit').click(function() {
if (document.getElementById('try').value != document.getElementById('field11').value)
{
alert('dont match!');
$("#msg").val ("dont match!");
}
else if (document.getElementById('try').value == document.getElementById('field11').value) {
}alert(document.getElementById('try').value + " exists");
$("#msg").val(document.getElementById('try').value + " exists");
});
});
</script>
I also try this but if I input 77 it saying it exist even not
<div id="requirement #2">
<button type="button" id="button2" onclick="StringSearch()">Search</button>
</div>
<script>
function StringSearch() {
var SearchTerm = document.getElementById('try').value;
var TextSearch = document.getElementById('field11').value;
if (SearchTerm.length > 0 && TextSearch.indexOf(SearchTerm) > -1) {
alert("Patient Exists");
} else {
alert("Patient Does not exist click add if you want to add the patient");
$("#msg").val(document.getElementById('try').value + " exists");
$("#t1").val("1");
}
}
</script>
document.getElementById('field11').value.match(new RegExp("(" + "87" + "-[a-z0-9]+);"))[1])
The Generated Regex when try value = 87:
/(87-[a-z0-9]+);/
So what is this monstrosity? We generate a Regex Expression, that looks for the try value followed by a dash, and one or more characters from a-z or 1-9, followed by a semicolon. String.match() is used to determine an array of matches, the array[1] is the first capture group (the part of the RegEx between the brackets), which is in this case 87-bx23
I have tried to rewrite your code to store variables for the elements and use a Regexp to do the search for the value:
<script>
$(document).ready( function(){
var tryElem = document.getElementById('try');
var field1 = document.getElementById('field11');
$('#submit').click(function() {
var regex = new Regexp(tryelem +'[^;]*');
var match = regex.exec(field.value);
if (match)
{
alert(match + " exists");
$("#mag").val(match + " exists");
}
else
{
alert('dont match!');
$("#msg").val ("dont match!");
}
});
});
</script>
The code does more or less the same as yours, except for the regex:
tryelem +'[^;]*'
It builds a regular expression form the the value of tryElem and then it searches forward and matches up to the first semi colon (zero or more characters).
Now the match will contain: '87-bx23'.
You can try this:
<input type="text" id="try"/>
<input type="text" id="field11" value="777-a98;87-bx23;000-t88;245-k7"/>
<input type="text" id="msg"/>
<input type="button" id="submit"/>
And js:
$(function(){
$("#submit").click(function(){
var Try=$("#try").val(),
f11=$("#field11").val(),
msg=$("#msg");
//but if you want search in number part only (before dash sign), uncomment line below and comment next line.
//var r=((";"+f11+";").match(new RegExp(";([^;-]*"+Try+".*?-.+?);"))||[])[1];
var r=((";"+f11+";").match(new RegExp(";([^;]*"+Try+"[^;]*);"))||[])[1];
msg.val(r||"don't match!!");
});
});
You can check or change both of them online

Initials field in HTML form,

For a project i need a initial textfield which use the every first letter of a forname and bornnames. So basically the field needs to autoformat the input by user. If i fill in my initials MGJ it needs to be M.G.J. (after every letter he must put in the point).
Be aware;
The webform made with Webform module Drupal, so i only could use css or Javascript.
Are there some easy option for that?
Regards,
Martijn
http://nosir.github.io/cleave.js/ you can use this library to format your input the easy way.
Or you can do it like this in JS
var input = document.querySelector('#initials');
input.addEventListener('focusout', function() {
this.value = this.value.split('').join('.');
})
<input type="text" id="initials" />
all you need to do is to split your string and then join with a dot.
string.split('').join('.');
Oke I allready found the solution my own; i used:
`$( document ).ready(function() {
if ($(".input")[0]){
$(".input").focusout(function() {
var initials = this.value.replace(/\./g,'');
this.value = initials.split('').join('.');
});
}
});
})( jQuery );`
Late answer; I needed the same thing but wasn't happy with the current answers.
document.getElementById('initialsOnly').addEventListener('keyup', function(e) {
if (e.code === 'Backspace') {
this.value = this.value.slice(0, -1);
} else {
const newString = this.value.replace(/[\W\d]/g, '').split('').join('.').toUpperCase();
this.value = newString + (newString.length > 0 ? '.' : '');
}
});
<input id="initialsOnly" type="text" />

JavaScript Form Validation for Textarea with Multiple Values

How would I implement error checking of multiple values entered into a textarea? I need to make sure that the values entered use commas as a delimiter before the form is submitted.
You can use
value.split(",")
to separate each word and individually validate them and
value.split(",").length < 2
to check if commas were entered. Should be good to get you started.
Update: I have update the fiddle with your new inputs. It includes check for empty inputs before or after comma, and it trims out spaces before validation
Working example here
Here is a sample implementation:
Markup
<textarea id="textarea" placeholder="comma separated values"></textarea>
<span id="msg"></span>
<br>
<button onclick="submit()">Submit</button>
Script
function isValid() {
var value = document.getElementById("textarea").value;
var values = value.split(',');
if(values.length > 0 && values.length < 5){
for(var i =0;i<values.length;i++);{
if(parseInt(values[i]) === NaN) return false;
}
return true;
}
return false;
}
function submit(){
if(isValid()){
document.getElementById("msg").innerText = "Valid";
//submit the form
} else {
document.getElementById("msg").innerText = "not a valid input";
}
}

JQuery if input starts with a value

I am managing to check the value inside a postcode input field using the following:
html:
<input type="text" class="cart-postcode2" size="10" tabindex="22">
JQuery:
$('.cart-postcode2').keyup(function(){
var value = $(this).val();
if (value.indexOf('BT') >= 0) {
alert("is ireland");
}
})
This is working great however I want it to only alert if it starts with BT and does not contain BT in any part of the value, does anyone know if this is possible?
So typing BT2 9NH will alert "Ireland" but typing OX2 8BT will not
You can check if string starts with BT, as indexOf() will give index zero if value stats with BT
$('.cart-postcode2').keyup(function(){
var value = $(this).val();
if (value.indexOf('BT') == 0) {
alert("is ireland");
}
})
a regex solution:
$('.cart-postcode2').keyup(function(){
var value = $(this).val();
if (value.match(/^BT/)) {
alert("is ireland");
}
})

checking space between text in javascript

I want to check the gap between two or more words, i have given as an input, in a text box. If there had any space, then i want to alert user that no space is allowing. I can check the existence of text simply using "if else" statement. But can't do the desired stuff in this way. My code is given below :
<script type="text/javascript">
function checkForm()
{
var cName=document.getElementById("cName").value;
var cEmail=document.getElementById("cEmail").value;
if(cName.length<1)
{
alert("Please enter both informations");
return false;
}
if(cEmail.length<1)
{
alert("Please enter your email");
return false;
}
else
{
return true;
}
}
Name : <input type="text" id="cName" name="cName"/>
<br/>
<br/>
Email : <input type="text" id="cEmail" name="cEmail"/>
<br/>
<br/>
<input type="submit" value="Go!"/>
</form>
Thankyou
Just use the match() method of strings. For example:
'Spaces here'.match(' ');
That returns true.
'Nospace'.match(' ');
That returns false.
So for what you want, just use something like this:
if(cName.match(' ')){
alert('Spaces found!');
return false;
}
Demo
your question not very clear , but i hope you want to count your words you can use the following code to split a text and by using the length property you count the word
var b = document.getElementById("cName").value;
var temp = new Array();
temp = b.split(' ');
var count= temp.length;
and if you want to validate your name field that should not use any space
if ( ^[A-Za-z]$.test(document.getElementById("cName").value) ) {
// your code;
}
if ( document.getElementById("cName").value.indexOf(' ') > 0 ) {
alert('space found');
}

Categories

Resources