How to add restriction on each duplicated field using jquery
I'm trying to add restrictions on every duplicated field I add using jquery. The outcome should be that each duplicated field should restrict the user from entering more than 5 words per field.
This is the code I have so far. Anyone who can help? I'll appreciate it guys. Thank you!
$('.itextarea').each( function(){
$(this).on('keyup', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
}else{
$('p.help').empty();
}
});
});
UPDATE: Sorry, here's the html for those who were asking for it.
<textarea class="itextarea form-control" name="id_desc" aria-required="true"></textarea>
javascript jquery html each keyup
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
add a comment |
I'm trying to add restrictions on every duplicated field I add using jquery. The outcome should be that each duplicated field should restrict the user from entering more than 5 words per field.
This is the code I have so far. Anyone who can help? I'll appreciate it guys. Thank you!
$('.itextarea').each( function(){
$(this).on('keyup', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
}else{
$('p.help').empty();
}
});
});
UPDATE: Sorry, here's the html for those who were asking for it.
<textarea class="itextarea form-control" name="id_desc" aria-required="true"></textarea>
javascript jquery html each keyup
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
Add also your html
– Mohammad
Nov 20 '18 at 7:47
add a comment |
I'm trying to add restrictions on every duplicated field I add using jquery. The outcome should be that each duplicated field should restrict the user from entering more than 5 words per field.
This is the code I have so far. Anyone who can help? I'll appreciate it guys. Thank you!
$('.itextarea').each( function(){
$(this).on('keyup', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
}else{
$('p.help').empty();
}
});
});
UPDATE: Sorry, here's the html for those who were asking for it.
<textarea class="itextarea form-control" name="id_desc" aria-required="true"></textarea>
javascript jquery html each keyup
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
I'm trying to add restrictions on every duplicated field I add using jquery. The outcome should be that each duplicated field should restrict the user from entering more than 5 words per field.
This is the code I have so far. Anyone who can help? I'll appreciate it guys. Thank you!
$('.itextarea').each( function(){
$(this).on('keyup', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
}else{
$('p.help').empty();
}
});
});
UPDATE: Sorry, here's the html for those who were asking for it.
<textarea class="itextarea form-control" name="id_desc" aria-required="true"></textarea>
javascript jquery html each keyup
javascript jquery html each keyup
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
edited Nov 20 '18 at 8:06
jaegyo23
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
asked Nov 20 '18 at 7:40
jaegyo23jaegyo23
38
38
Add also your html
– Mohammad
Nov 20 '18 at 7:47
add a comment |
Add also your html
– Mohammad
Nov 20 '18 at 7:47
Add also your html
– Mohammad
Nov 20 '18 at 7:47
Add also your html
– Mohammad
Nov 20 '18 at 7:47
add a comment |
2 Answers
2
active
oldest
votes
When you want to share the same functionality on elements created by other scripts you can access them by using $('body').on( events, selectors, callback):
$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
add a comment |
I created a sample fiddle for you. As mentioned by @darklightcode you should use such selector $('body').on( events, selectors, callback), but also you need to bind input event instead of keydown and also you need an additional check duplicated texarea fields. Hope this will help you
answered Nov 20 '18 at 8:13
dganencodganenco
2217
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388290%2fhow-to-add-restriction-on-each-duplicated-field-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
When you want to share the same functionality on elements created by other scripts you can access them by using $('body').on( events, selectors, callback):
$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
add a comment |
When you want to share the same functionality on elements created by other scripts you can access them by using $('body').on( events, selectors, callback):
$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
add a comment |
When you want to share the same functionality on elements created by other scripts you can access them by using $('body').on( events, selectors, callback):
$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
When you want to share the same functionality on elements created by other scripts you can access them by using $('body').on( events, selectors, callback):
$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>$('#add-field').on('click', function() {
$('#banner-message').append(`<input class="itextarea" />`);
})
// This is how you should access dynamically added elements
$('body').on('keyup', '.itextarea', function() {
var words = this.value.match(/S+/g).length;
if (words > 5) {
var trimmed = $(this).val().split(/s+/, 5).join(' ');
$(this).val(trimmed + ' ');
$('p.help').empty().append('You can only add 5 words per field.');
} else {
$('p.help').empty();
}
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="banner-message">
<button type="button" id='add-field'>
Add New Field
</button>
<input class="itextarea" />
</div>answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
answered Nov 20 '18 at 7:49
darklightcodedarklightcode
1,256109
1,256109
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
add a comment |
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
Will try this one on my code. Thanks @darklightcode :) I'll let you know if it works on me
– jaegyo23
Nov 20 '18 at 8:08
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
It worked!! Thank you!! I'm not able to upvote this comment but just letting everyone know this worked. :) Thank you :)
– jaegyo23
Nov 20 '18 at 8:11
add a comment |
I created a sample fiddle for you. As mentioned by @darklightcode you should use such selector $('body').on( events, selectors, callback), but also you need to bind input event instead of keydown and also you need an additional check duplicated texarea fields. Hope this will help you
answered Nov 20 '18 at 8:13
dganencodganenco
2217
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
add a comment |
I created a sample fiddle for you. As mentioned by @darklightcode you should use such selector $('body').on( events, selectors, callback), but also you need to bind input event instead of keydown and also you need an additional check duplicated texarea fields. Hope this will help you
answered Nov 20 '18 at 8:13
dganencodganenco
2217
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
add a comment |
I created a sample fiddle for you. As mentioned by @darklightcode you should use such selector $('body').on( events, selectors, callback), but also you need to bind input event instead of keydown and also you need an additional check duplicated texarea fields. Hope this will help you
answered Nov 20 '18 at 8:13
dganencodganenco
2217
I created a sample fiddle for you. As mentioned by @darklightcode you should use such selector $('body').on( events, selectors, callback), but also you need to bind input event instead of keydown and also you need an additional check duplicated texarea fields. Hope this will help you
answered Nov 20 '18 at 8:13
dganencodganenco
2217
answered Nov 20 '18 at 8:13
dganencodganenco
2217
answered Nov 20 '18 at 8:13
dganencodganenco
2217
answered Nov 20 '18 at 8:13
dganencodganenco
2217
2217
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
add a comment |
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
Thank you @dganenco for putting the effort to add a fiddle. But I needed all fields to get restricted to 5 words. Your first field doesn't apply it.
– jaegyo23
Nov 20 '18 at 8:22
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
anyway, i've accepted @darklightcode 's comment as a solution to my problem. :)
– jaegyo23
Nov 20 '18 at 8:23
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53388290%2fhow-to-add-restriction-on-each-duplicated-field-using-jquery%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Add also your html
– Mohammad
Nov 20 '18 at 7:47