Replace form field text with php value by looping through array of form fields with javascript

Question

My website lists records for sale.

I have an html form with several fields as follows:

<input type="text"   name="artist" id="artist" class="txt"  />
<input type="text"   name="title" id="title" class="txt"  />
<input  class="tracks"  name="a1" id="a1" >
<input  class="tracks"  name="a2" id="a2" >
<input  class="tracks"  name="a3" id="a3" >

$tit="random title";

I want to have one button which calls a javascript function that replaces each form fields' text (if it contains the records title ($tit) to !! if the field name matches a list of form field names that are predefined in a tracks array this:

var tracks= ['a1', 'a2', 'a3' ];

I had a look at: // populating form fields with array

The code Ive got so far allows the change button below to replace the title in form field a1 to !! if the title text is found in form field a1 but i want the js code to loop through all form fields in the array and replace the title if its found.

<input type="button" class="button-8"  value="change" name="no" onclick="spling('a1','<?php echo $tit; ?>');">

<script>
function spling(v,t) {

// v= side a1
// t= record title $tit

var txt=document.getElementById(v).value;
var uc= t.toUpperCase()
//if (txt.indexOf(t) >= 0){
if (txt.toUpperCase().indexOf(uc) >=0) {
txt =txt.replace(t,'!!');
document.getElementById(v).value=txt;
}
else{
   document.getElementById('res').innerHTML = t+" not found in field "+v;  
}
}

 
</script>

I need to be able to replace the records title with !! if its found in a1,a2,a3

I want the js code to loop through all form fields in the array and change the text with one button click rather than having three separate buttons to replace the title text in fields a1,a2 and a3.

Thanks for your help!

The button replaces the title text in form field a1 to !! if field a1 contains the $tit text already.

I've googled for a solution but find myself joining snippets of code together and not getting the result I want.

The JS code you put here, is that spling function? Also if i am not misunderstood you want to loop through all a* fields and replace the value with !! if particular string is not found. Is that right? — CodeThing
– CodeThing, Commented Mar 30, 2023 at 13:44
A little more info: I added the function name just now. If the field contents match the record title i.e. if $tit = "compilation" and side a1/a2/a3 matches $tit, then replace the word compilation with !! in a1/a2/a3 form field text. — matt
– matt, Commented Mar 30, 2023 at 13:54

CodeThing · Accepted Answer · 2023-03-30 14:00:50Z

0

You can do something like this. What we did here is we loop through the tracks array and inside the loop we get the element by id.

function spling(t) {
  const val = t.toUpperCase();
  var tracks = ['a1', 'a2', 'a3'];
  let result = "";
  for (var i = 0; i < tracks.length; i++) {
    const track = document.getElementById(tracks[i]);
    const txt = track.value.toUpperCase();
    if (txt.indexOf(val) >= 0) {
      track.value = '!!';
    } else {
      result += t + " not found in field " + track.getAttribute('id') + "<br>";
    }
  }
  if (result) {
    document.getElementById('res').innerHTML = result;
  }
}

<input type="text" name="artist" id="artist" class="txt" />
<input type="text" name="title" id="title" class="txt" />
<input class="tracks" name="a1" id="a1">
<input class="tracks" name="a2" id="a2">
<input class="tracks" name="a3" id="a3">
<input type="button" class="button-8" value="change" name="no" onclick="spling('random title')">
<div id="res"></div>

answered Mar 30, 2023 at 14:00

CodeThing

2,7992 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

matt Over a year ago

Thanks so much for your quick answer! We're nearly there. The entire track.value is replaced by !! but I need the track.value text to be replaced as follows as an example: $tit="true blue" true blue (original mix) should be replaced thus: !! (original mix) instead of the whole string being replaced.

CodeThing Over a year ago

not quite getting what are you expecting but you can assign whatever you want to. Example: track.value = ANYTHING. track here refers to each input element in the loop

Collectives™ on Stack Overflow

Replace form field text with php value by looping through array of form fields with javascript

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related