JavaScript

<asp:Button runat="server" id="btnSubmit" style="width:120px;padding: 0; border: 0;background-color:#D8D8D8 !important;color: #808080; height:30px;" Text="Generate Report" OnClick="btnSubmit_Click" Enabled="false" />

script type="text/javascript">

//function to enable button if two textboxes contains text
function SetButtonStatus(sender, target) {
var uuid = document.getElementById('<%=suuid.ClientID %>');
var calllist = document.getElementById('<%=caller_list_id.ClientID %>');
var phone = document.getElementById('<%=phonenumber.ClientID %>');
var startdate = document.getElementById('<%=date_start.ClientID %>');
var enddate = document.getElementById('<%=date_end.ClientID %>');
var calltype = document.getElementById('<%=call_type.ClientID %>');

//Condition to check whether user enters text in a two textbox or not
if ((((((sender.value.length >= 3 || uuid.value.length >= 3) || (sender.value.length >= 3 || calllist.value.length >= 3) || (sender.value.length >= 3 || phone.value.length >= 3)  || (sender.value.length >= 3 || startdate.value.length >= 3)  || (sender.value.length >= 3 || enddate.value.length >= 3)  || (sender.value.length >= 3 || calltype.value.length >= 3))))))
document.getElementById(target).disabled = false;
else
document.getElementById(target).disabled = true;
}
</script>

<asp:TextBox id="phonenumber" style="width:150px;" class="form-control" onkeyup="SetButtonStatus(this,'btnSubmit')" runat="server" />

    <script type="text/javascript">
     $(document).ready(function() {
     $("input").keypress(function(e) {
      if (e.which == 254) {
       $('#btnSubmit').click();
      return false;
     }
    return true;
  });
});
</script>

I want count in my textarea product codes.
I have whitelist for product codes so I cant type or write anything else into textarea.
Found bad issue, I can write only static product codes like (first 16 is product code other 6 is how many products it is in list...):

0FAR12345H00123C + 00001P
0FAR54321H00321C + 00001P
0FAR54321H00321C + 00002P

So now I have two problems..
First problem, whitelist universal product codes like this:

0FAR12345H00123C + 00001P
0FAR543H00321C + 00001P
0F321H321C + 00001P
0R31H1C + 001P

Second problem is how to count these product codes under textarea + overall count.

Example under textarea counts:
0FAR12345H00123C: 5
0FAR543H00321C: 2
0F321H321C: 6
0R31H1C: 4
Overall: 17

Javascript:

<pre>
"use strict";
	toFile.focus();

	var timeoutId;
	$('#toFile').on('keypress', function() {
	    console.log('Textarea Change');
	    
	    clearTimeout(timeoutId);
	    timeoutId = setTimeout(function() {
	        // Runs 3 second (3000 ms) after the last change    
	        saveToFile();
	    }, 3000);
	});

	toFile.addEventListener("keyup", event => {
	    const data = toFile.value.split("\n");
	    const result = data.unique();
	    info.textContent = result.length !== data.length ? "Duplicate removed" : "";
	    toFile.value = result.join('\n');
	});

	if (!Array.prototype.unique) {
	    Object.defineProperty(Array.prototype, "unique", {
	        configurable: false,  // these 3 properties default to false so not needed
	        enumerable: false,    // But have added them just to show their availability.
	        writable: false,         
	        value: function() { 
	            const existing = {};
	            return this.filter(a => existing[a] = !existing[a] ? true : false);
	        }
	    });
	} else {
	    throw new Error("Array.prototype.unique already defined.");
	}

	const CODE = ['Product', 'Codes', 'Here'];
	const reg = /^([a-zA-Z0-9]{1,6})$/;

	// Ensure values been inserted are in correct format
	function onInput() {
	  let values = event.target.value
	    .split('\n')
	    .map(v => {
	      v = v.trim().toUpperCase();
	      if (v.length <= 16) {
	        if (CODE[0].substr(0, v.length) != v &&
	          CODE[1].substr(0, v.length) != v) {
	          v = v.substr(0, v.length - 1);
	        }
	      } else if (!v.substr(16, 22).match(reg)) { // at the moment static 16 product code lenght + 6 is count of products.
	        v = v.substr(0, v.length - 1);
	      }
	      return v;
	    }).join('\n');

	  event.target.value = values;
	}
	
	function saveToFile() {
	    console.log('Saving to the db');
	    toFile = $('#toFile').val().replace(/\n\r?/g, '<br />');
		$.ajax({
			url: "test2.php",
			type: "POST",
			data: {toFile:toFile}, // serializes the form's elements.
			beforeSend: function(xhr) {
	            // Let them know we are saving
				$('#status').html('Saving...');
			},
			success: function(toFile) {
				// You can get data returned from your ajax call here. ex. jqObj.find('.returned-data').html()
	            // Now show them we saved and when we did
	            var d = new Date();
	            $('#status').html('Saved! Last: ' + d.toLocaleTimeString());
			},
		});
	}

	$('.form').submit(function(e) {
		saveToFile();
		e.preventDefault();
	})

<form class="contact-form" method="post">
    <textarea id="toFile" name="toFile" oninput="onInput()"></textarea><br>
    <input type="submit" value="Submit">
</form>

<!-- under here I want show count of product codes + overall count -->

<div id="status"></div>
<div id="info"></div

does anyone know of any good interactive tutorials for ReactJS, React Native? It seems there is only like 1 or 2 actually interactive tutorials that exist, the rest are just video tutorials.

$(document).on('click', '#restart', function() {
     showQuestions();
 });

 var x = "";
 var i = 0;

 function showQuestions() {
 document.getElementById('holder').
 innerHTML = x;

for (j = 0; j < words[i].options.length; j++) {
    if (i < words.length) {
       $('#holder').append("<div 
       id="+words[i].options[j] + " 
       class='alternatives'>" + 
       words[i].options[j] + "
       </div>");
       }
     }
      if (i < words.length) {
         $('#holder').append('<div 
         id="quest">' + 
         words[i].question + '</div>');
         i++;
     }
 }

 showQuestions();

 $('#holder').on('click', 
'.alternatives', function() {
     showQuestions();
});

 // Checking answers

    score = 0;
    k = 0;

 $(document).on('click', 
'.alternatives', function() {
     let guess = this.id;
     if (k < words.length) {
    var correct = words[k].answer;
         k++;
     }
     if (guess === correct) {
         score++;
     }

     if (score <= words.length) {
         z = score;
         document.getElementById('summary').innerHTML = z;
     }

     if (k >= words.length) {
         $('#holder').fadeOut();
         $('#restart').fadeIn();
     }
 });

$(document).on('click', '#restart', function() {
    $(this).fadeOut();
    $('#holder').fadeIn();
    showQuestions();
});

The function displays values of options property of array in separate divs. I want to give each div a unique id, which I have given, but the first displayed divs are replaced by totally different divs on click; so I am unable to give ids to each div. I want that divs should remain same and only the values should change on click. Presently the ids that I have given are removed when next values are displayed on click.  How can I achieve that?  Thanks for your suggestions.

<button id="btnNext" onclick="showOptions();"> Options </button>

<div id="container"> </div>

var antonyms = [

       {
           question: "soft",
           options: ["dark", "white", "heavy", "hard", "down", "pretty", "butter", "cotton"],
           answer: "hard"

       },

       {
           question: "beautiful",
           options: ["pretty", "ugly", "handsome", "wonderful", "up", "high", "cheerful", "black"],
           answer: "ugly"

       },
    ]

    // Define a method that generates the HTML for one question.


    function showOptions(q)

    {
        let qHtml = '<div class="option">' + q.question + '</div>';

        qHtml += q.options.map(o => '<div class="option">' + o + '</div>').join("");

        return qHtml;

    }

```
    // Start showing the first question. Click event will show next question.


    let container = document.getElementById("container");

    let button = document.getElementById("btnNext");

    let qIdx = 0;

    container.innerHTML = showOptions(antonyms[qIdx]);

    button.addEventListener("click", function()

        {

            qIdx += 1;

            if (qIdx < antonyms.length)

                container.innerHTML = showOptions(antonyms[qIdx]);

            else

                button.disabled = true;

        });

```
    // Giving unique id to each option div

    $('#container div').each(function(eq, el) {

        el = $(el);

        if (typeof(el.attr('id')) === "undefined") {

            el.attr('id', 'box-' + eq);

        }

    });