CODEWITHSUNDEEP
javascriptjquery
user3833682
user3833682

Reputation: 263

Selector is not working in jquery

Hi I've HTML code which is 

<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">

<hr />
<hr />

<hr />
<hr />

<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">

<hr />
<hr />

<hr />
<hr />

<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

Now I want to search a value in my notes fields which is Towing amount paid Order ID 000000001 and I want to empty these fields and my javascript/jquery code is

$(document).ready(function() {
     if($("input[name^=notes]").val().indexOf("Towing amount paid Order ID ") > -1) {
         $("#testing").text('found it');
         /*var current = $("input[name^=notes]");
         var onePrevious = $(current).prev();
         var twoPrevious = $(current).prev().prev();
         current.attr('value', '');
         onePrevious.attr('value', '');
         twoPrevious.attr('value', '');*/
     } else {
         $("#testing").text('not found');
     }
});

But this code is giving me not found message what is wrong in my code I've tried different selectors but didn't work for me.

Upvotes: 0

Views: 52

Answers (5)

Ivanka Todorova
Ivanka Todorova

Reputation: 10239

This code searches only in the input which has value - This is test notes.

To look in all fields use $.each:

$(document).ready(function () {
    $("input[name^='notes']").each(function () {
        if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
            $("#testing").text('found it');
        } else {
            $("#testing").text('not found');
        }
    });
});

JSFiddle - http://jsfiddle.net/FakeHeal/362o548n/

Edit for clearing the fields: http://jsfiddle.net/FakeHeal/362o548n/1/

Upvotes: 2

charlietfl
charlietfl

Reputation: 171698

$("input[name^=notes]").val() will only ever return the value of the first element in the page than matches that selector.

In order to check all of them you need to look at each instance

I would suggest you modularize the repeating groups by wrapping each group in a container to help locate other related elements within each group

<div class="input-group">
    <input type="text" name="amount[]" id="amount_1" value="800">
    <input type="text" name="date[]" id="date_1" value="12/05/2015">
    <input type="text" name="notes[]" id="notes_1" value="This is test notes">
</div>

Then loop over the inputs you want to focus on

var hasNotes = $("input[name^=notes]").filter(function(){
      return this.value.indexOf("Towing amount paid Order ID ") > -1
}).length;
var message = hasNotes ? 'found it' :'not found'
$('#testing.text(message);

If you need to make adjustments to other values, use an each lopp and traverse within the container

Upvotes: 0

fboes
fboes

Reputation: 2239

$(document).ready(function() {
     $("input").each(function() {
       if ($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
         $("#testing").text('found it');
         /*var current = $("input[name^=notes]");
         var onePrevious = $(current).prev();
         var twoPrevious = $(current).prev().prev();
         current.attr('value', '');
         onePrevious.attr('value', '');
         twoPrevious.attr('value', '');*/
     }
   });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">

<hr />
<hr />

<hr />
<hr />

<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">

<hr />
<hr />

<hr />
<hr />

<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

Upvotes: 0

Irvin Dominin
Irvin Dominin

Reputation: 30993

You can use jQuery :contains pseudo it will find the first element that contains the required text

Ref: https://api.jquery.com/contains-selector/

Code:

if($("input[name^='notes']:contains('Towing amount paid Order ID ')")) {
    $("#testing").text('found it');
} else {
    $("#testing").text('not found');
}

Demo: http://jsfiddle.net/La1bq789/

Upvotes: 3

Sergey
Sergey

Reputation: 81

The main problem is that you checking only one element value and you need to check all elements. I did make some changes with your code, now it's working:

$("input[name^=notes]").each(function(){
  
if($(this).val().indexOf("Towing amount paid Order ID ") > -1) {
    $("#testing").text('found it');
    /*var current = $("input[name^=notes]");
    var onePrevious = $(current).prev();
    var twoPrevious = $(current).prev().prev();
    current.attr('value', '');
    onePrevious.attr('value', '');
    twoPrevious.attr('value', '');*/
} else {
    $("#testing").text('not found');
}
  });
                       
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="testing"></div>
<input type="text" name="amount[]" id="amount_1" value="800">
<input type="text" name="date[]" id="date_1" value="12/05/2015">
<input type="text" name="notes[]" id="notes_1" value="This is test notes">

<hr />
<hr />

<hr />
<hr />

<input type="text" name="amount[]" id="amount_2" value="1500">
<input type="text" name="date[]" id="date_2" value="12/10/2015">
<input type="text" name="notes[]" id="notes_2" value="Towing amount paid Order ID 000000001">

<hr />
<hr />

<hr />
<hr />

<input type="text" name="amount[]" id="amount_3" value="1600">
<input type="text" name="date[]" id="date_3" value="12/09/2015">
<input type="text" name="notes[]" id="notes_3" value="Towing amount paid Order ID 000000002">

Upvotes: 0

Related Questions