|
Yea, it is not your code sir.
I have no idea what it is.
I don't have any box with pre-populated values.
When I load the page and click on the Submit button, it is disabled.
It only becomes a problem when I click on any of the boxes and then click Submit without eve typing anything.
Your fiddle sample works great.
I will keep looking at it till I figure out what the issue is.
Again, sir, many thanks for all your help.
|
|
|
|
|
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() {
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,
enumerable: false,
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})$/;
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)) {
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},
beforeSend: function(xhr) {
$('#status').html('Saving...');
},
success: function(toFile) {
var d = new Date();
$('#status').html('Saved! Last: ' + d.toLocaleTimeString());
},
});
}
$('.form').submit(function(e) {
saveToFile();
e.preventDefault();
})
HTML:
<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
This is how I want count product codes under textarea + overall count:
Image
This shows what you can only type in textarea (Whitelisted product codes):
Image
|
|
|
|
|
Your pretty vague in saying what exactly your having trouble with.
I'm not going to write code for you, but think of part numbers as words, gathering each word and then count the occurrence of each word.
This is done all the time, using words like "apple, orange" so you get a count of "apples" and "oranges"
Perhaps search the internet for a JavaScript example of counting words!
Start again from scratch, and write functions to do the following.
So get all the text in the textarea
Gather and count each occurrence of a word and push the words into an array and increment the counter
Then loop the array, and qualify the words as a part number, remove the ones that don't qualify.
Now you have an array or words and the count.
Then do something with the array of words.
Now go back and write event listeners to trigger your main function.
If it ain't broke don't fix it
Discover my world at jkirkerx.com
|
|
|
|
|
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.
|
|
|
|
|
|
Try it, This is the best tutorial site:
https://www.tutorialspoint.com/reactjs/
|
|
|
|
|
Sorry for the belated reply, but the best I could tell you is on Udemy, search for React and the course from instructor Maximilian Shwarzmuller is the best one. It covers all aspect of react, plus redux and redux-saga, along with deployment on a web server and some backend.
|
|
|
|
|
I have coding of a quiz with an array which has questions and options. First time the function is called successfully but when restarting the quiz, the function is not invoked.
This is the code which is not working:
$(document).on('click', '#restart', function() {
showQuestions();
});
The whole coding is:
// Showing questions and options
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();
// Calling function on click of alternatives
$('#holder').on('click',
'.alternatives', function() {
showQuestions();
});
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();
}
});
// Restarting Quiz
$(document).on('click', '#restart', function() {
$(this).fadeOut();
$('#holder').fadeIn();
showQuestions();
});
modified 24-May-19 7:53am.
|
|
|
|
|
You could make your question clearer by using <pre> tags* around the code block, indenting properly, and removing all those redundant blank lines, so it looks like:
$(document).on('click', '#restart', function() {
$(this).fadeOut();
$('#holder').fadeIn();
showQuestions();
});
*or use the code button at the top of the edit window.
|
|
|
|
|
You can call this function on restart button onClick event...
function restartquiz(){
$(document).on('click', function() {
showQuestions();
});
}
|
|
|
|
|
Explain the working of timers in JavaScript? Also elucidate the drawbacks of using the timer, if any?
|
|
|
|
|
|
It is very rude to copy and paste your actual homework question here. Very lazy. You can't even put it into your own words. All you have to do is pay attention in class and then google if you foget. Here's the first result. JavaScript Timing Events[^]
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
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"
},
]
function showOptions(q)
{
let qHtml = '<div class="option">' + q.question + '</div>';
qHtml += q.options.map(o => '<div class="option">' + o + '</div>').join("");
return qHtml;
}
```
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;
});
```
$('#container div').each(function(eq, el) {
el = $(el);
if (typeof(el.attr('id')) === "undefined") {
el.attr('id', 'box-' + eq);
}
});
|
|
|
|
|
I don't quite follow where you are lost, but if you want the id to be unique then keep a global variable counter and add it to the end of each div's id and then increment it.
Social Media - A platform that makes it easier for the crazies to find each other.
Everyone is born right handed. Only the strongest overcome it.
Fight for left-handed rights and hand equality.
|
|
|
|
|
I have a source file in XML which I need to read in with javascript.
Now I use the XmlDocument object, but I find it very user-unfriendly.
Is there a library someone can recommend that will do the job better?
thanks!
|
|
|
|
|
It would probably help if you explained exactly what the problem is. SDKs/libraries are generally designed to help developers solve problems; user-friendliness are rarely a consideration.
|
|
|
|
|
Right now I'm using constructs like this:
xml.getElementsByTagName("group")[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue;
to get a value from some part of the XML.
But the XML could change slightly and so this goes wrong. I "could" check each and every node for the right value, but that would end up being terribly complicated as far as I can see. Mainly because it seems that a node is not only a tag, but also the value in the tag.
I tried XML transforms (xsl) , but the transform to html didn't work. (I looked it up and apparently there are some issues with javascript and xml transforms)
So simply put, I need to traverse the node tree (or "tag tree") in a simpler and easier way.
obsolete to say XML is not really my thing
|
|
|
|
|
V. wrote: xml.getElementsByTagName("group")[0].childNodes[1].childNodes[0].childNodes[0].childNodes[0].nodeValue; is exactly the sort of code that leads to trouble. You need to traverse in a logical fashion starting at the top node, and at each point check whether the child is the correct one you are looking for.
|
|
|
|
|
indeed, that's the whole point. I find this XmlDocument system far too complicated or I'm using it wrong somehow. I'm not against loops and if's/switch statements, but it would end up ridiculously complicated in my opinion.
eg.
<xml>
<mytag>the value of this tag</mytag>
</xml>
if you get to the tag "mytag" you get 2 nodes: one for the "mytag" and one for the contents of mytag ("the value of this tag").
In my mind, I would call "getValue" or something on the mytag node to get the contents. In XmlDocument you need to call the childnode first before getValue. Which is just weird.
|
|
|
|
|
Modern versions of Javascript have querySelector() and querySelectorAll() , which are a lot easier to use than traversing the tree - check your documentation (and document object) to see if you have them. You can basically pick out nodes using CSS selectors.
As an alternative there is XPath - it uses expressions to drill down into the tree, just not in the familiar CSS-way that querySelector and querySelectorAll do it.
The querySelector/querySelectorAll functions are available in all the modern browsers, but it looks like XPath is in everything apart from Internet Explorer.
|
|
|
|
|
thanks! I'll certainly have a look at that.
|
|
|
|
|
Greetings experts.
I have used this script before on page with Next, Previous, Submit code and it worked then.
Now, I am trying to use it on a similar application where users will fill the first page and click Next to go to the next page.
Usually, if a required field is not completed and the user clicks Next, a message will display warning the user that a required field must be filled up with the message displaying next to that field.
With the script, you could click Next without completing a required field and it will go to the next page.
You could even click submit and your data will submit without being asked to complete required fields.
What am I doing wrong?
<script type="text/javascript">
$(document).ready(function () {
$("#msform").validate({
rules: {
certsel: "required",
ssn1: "required",
ssn2: "required",
ssn3: "required",
fname: "required",
lname: "required",
email: {
required: true,
email: true
},
address: "required",
city: "required",
county: "required",
state: "required",
zip: "required",
birthmon: "required",
birthday: "required",
birthyr: "required",
ed: "required",
ref1name: "required",
ref1loc: "required",
ref1title: "required",
ref1area: "required",
ref1pre: "required",
ref1suff: "required",
ref2name: "required",
ref2loc: "required",
ref2title: "required",
ref2area: "required",
ref2pre: "required",
ref2suff: "required",
ref3name: "required",
ref3loc: "required",
ref3title: "required",
ref3area: "required",
ref3pre: "required",
ref3suff: "required",
convictions: "required",
txtCaptcha: "required",
nmon: "required",
nday: "required",
nyr: "required",
fullname: "required"
}
},
messages: {
certsel: "Please select the position for which you're applyingd.",
ssn1: "Please enter your complete Social Security Number.",
ssn2: "Please enter phone number.",
ssn3: "Please enter your name.",
fname: "Please enter your first and last names.",
lname: "Please enter your first and last names.",
email: "Please enter your email address.",
address: "Please enter your complete Address, including city, state and zip code.",
city: "Please enter your complete Address, including city, state and zip code.",
county: "Please enter your complete Address, including city, state and zip code.",
state: "Please enter your complete Address, including city, state and zip code.",
zip: "Please enter your complete Address, including city, state and zip code.",
birthmon: "Please enter your birth month, day and year.",
birthday: "Please enter your birth month, day and year.",
birthyr: "Please enter your birth month, day and year.",
ed: "Please enter your highest level of education or if you have a GED.",
ref1name: "Please enter all information for refrence 1.",
ref1loc: "Please enter all information for refrence 1.",
ref1title: "Please enter all information for refrence 1.",
ref1area: "Please enter all information for refrence 1.",
ref1pre: "Please enter all information for refrence 1.",
ref1suff: "Please enter all information for refrence 1.",
ref2name: "Please enter all information for refrence 2.",
ref2loc: "Please enter all information for refrence 2.",
ref2title: "Please enter all information for refrence 2.",
ref2area: "Please enter all information for refrence 2.",
ref2pre: "Please enter all information for refrence 2.",
ref2suff: "Please enter all information for refrence 2.",
ref3name: "Please enter all information for refrence 3.",
ref3loc: "Please enter all information for refrence 3.",
ref3title: "Please enter all information for refrence 3.",
ref3area: "Please enter all information for refrence 3.",
ref3pre: "Please enter all information for refrence 3.",
ref3suff: "Please enter all information for refrence 3.",
convictions: "Please indicate whether you have had any convictions.",
txtCaptcha: "Please enter the code on above.",
nmon: "Please enter today's date and your full name in the space provided.",
nday: "Please enter today's date and your full name in the space provided.",
nyr: "Please enter today's date and your full name in the space provided.",
fullname: "Please enter today's date and your full name in the space provided."
}
});
});
if ((!$('#msform').valid())) {
return false;
}
</script>
modified 26-Apr-19 11:04am.
|
|
|
|
|
Have you checked that both jQuery and the jQuery Validation scripts are included before this script block?
Have you checked that the <form> element's id is set to "msform" ?
Are there any script errors in the browser's developer console?
"These people looked deep within my soul and assigned me a number based on the order in which I joined."
- Homer
|
|
|
|
|
I am so sorry Richard,
I always forget to check the browser developer console for info.
I just did now and it turns out that I did not put jquery validate library at the of the page.
I did just that now it works, sort of.
It displays all the messages before user has a chance to invoke.
We would prefer that the textboxes look normal until user skips required field.
Many thanks for your prompt response as usual.
|
|
|
|
|