I have some JS code that will turn my code bold, italicized, or underlined with user input, so if the user checks bold the text will be bolded.
Here is the code:
$('input[name="textStyle"]').change(function(){
if ($(this).val() == 'bold'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('font-weight', 'bold');
else $('input[name="styledText"]').css('font-weight', 'normal');
}
else if ($(this).val() == 'italic'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('font-style', 'italic');
else $('input[name="styledText"]').css('font-style', 'normal');
}
else if ($(this).val() == 'underline'){
if ($(this).is(':checked')) $('input[name="styledText"]').css('text-decoration', 'underline');
else $('input[name="styledText"]').css('text-decoration', 'none');
}
});
body {
background-color: #5f5959;
color: #000000;
}
textarea[type=text], select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea[type=submit] {
width: 100%;
background-color: #f9f9f9;
color: 000000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea[type=submit]:hover {
background-color: #908989;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
Bold:<input name="textStyle" type="checkbox" value="bold"/>
<br>
Italic:<input name="textStyle" type="checkbox" value="italic"/>
<br>
Underline:<input name="textStyle" type="checkbox" value="underline"/>
</form>
<div style="margin-left: 240px; width: 1000px; height: 665px;">
<p><center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center></p>
<textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
<form style="font-family: 'Poppins', sans-serif;">
<textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
<input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
</form>
</div>
It is giving me an error, and it is not bolding/italicized/underlined. I think this is because the JS code is checking for input, but the tag is textarea. Is there any way I can let it accept both? I want the large area that is blank to be bolded/italicized/underlined with user input. Thanks!
First instead of $('input[name="styledText"]') you should do $('textarea[name="styledText"]'). Secondly jquery .css also accepts an object, so create an object cssProps and add default properties. Then on toggling of the check box change the value of these keys. Once it is done then at the end use .css and pass the cssProps properties
let cssProps = {
'font-weight': '',
'font-style': '',
'text-decoration': ''
}
$('input[name="textStyle"]').change(function() {
const val = $(this).val()
if ($(this).is(':checked')) {
switch (val) {
case 'bold':
cssProps['font-weight'] = 'bold';
break;
case 'italic':
cssProps['font-style'] = 'italic';
break;
case 'underline':
cssProps['text-decoration'] = 'underline';
break;
}
} else {
switch (val) {
case 'bold':
cssProps['font-weight'] = '';
break;
case 'italic':
cssProps['font-style'] = '';
break;
case 'underline':
cssProps['text-decoration'] = '';
break;
}
}
$('textarea[name="styledText"]').css(cssProps)
});
body {
background-color: #5f5959;
color: #000000;
}
textarea[type=text],
select {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
}
textarea[type=submit] {
width: 100%;
background-color: #f9f9f9;
color: 000000;
padding: 14px 20px;
margin: 8px 0;
border: none;
border-radius: 4px;
cursor: pointer;
}
textarea[type=submit]:hover {
background-color: #908989;
}
div {
border-radius: 5px;
background-color: #f2f2f2;
padding: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form style="font-family: 'Poppins', sans-serif; color: #f9f9f9;">
Bold:<input name="textStyle" type="checkbox" value="bold" />
<br> Italic:
<input name="textStyle" type="checkbox" value="italic" />
<br> Underline:
<input name="textStyle" type="checkbox" value="underline" />
</form>
<div style="margin-left: 240px; width: 1000px; height: 665px;">
<p>
<center style="font-family: 'Poppins', sans-serif; font-size: 13px;">When submit, your text will clear and your blog will be published!</center>
</p>
<textarea type="text" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>
<form style="font-family: 'Poppins', sans-serif;">
<textarea name="styledText" type="text" style="font-family: 'Poppins', sans-serif; border-width: 2px; border-style: solid; outline: none; border: none; height: 445px;"></textarea>
<input style="height: 50px; width: 1000px; font-family: 'Poppins', sans-serif; border-radius: 7px;" value="Submit" type="submit">
</form>
</div>
$('[name="styledText"]') will access all tags with name="styledText"
Can you please check the below code? Hope it will work for you. We have used textarea element instead of input in javascript code becuase you used textarea as a field.
Please refer to this link: https://jsfiddle.net/yudizsolutions/o1msuL83/
Please refer below link. I have made one change in your HTML <textarea type="text" name="styledText" placeholder="Title" style="font-family: 'Poppins', sans-serif;"></textarea>. Also I have target name attribute like $('[name="styledText"]').
https://codepen.io/Umesh8965/pen/jOymyLo
Related
I have JS code where I am changing the style of an HTML element based on an AJAX response.
So my code looks like this.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0];
button_submit.style.cursor = '\"' + response[1] + '\"';
button_submit.style.marginTop = '\"' + response[3] + '\"';
document.getElementById("email").style.visibility = '\"' + response[2] + '\"';
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
But the style is not changing even after all of the JS function is finished.
I wonder what is wrong with my code.
The response of the AJAX is an array that I am going to put on style properties using JS.
Sample response:
['false', 'pointer', 'hidden', '-3%']
The string 'false' is not the same as the boolean false. The disabled property should be a boolean.
You shouldn't add quotes around the other properties. Quotes are part of the syntax in textual styles, they're not part of the property value itself.
$.ajax(settings).done(function(response) {
const button_submit = document.getElementById("submit")
button_submit.disabled = response[0] === 'true';
button_submit.style.cursor = response[1]';
button_submit.style.marginTop = response[3];
document.getElementById("email").style.visibility = response[2];
})
input[type=text],
select {
width: 100%;
padding: 12px 20px;
display: inline-block;
border: 1px solid #ccc;
border-radius: 4px;
box-sizing: border-box;
font-size: 20px;
margin-bottom: 1.2 rem;
margin-bottom: -6%;
}
#submit {
width: 100%;
background: #f39d13;
background: linear-gradient(to bottom, #f39d13 0, #c64f01 100%);
color: white;
padding: 14px 20px;
margin-top: 4%;
border: none;
border-radius: 4px;
font-size: 20px;
cursor: pointer;
}
#customForm {
border-radius: 5px;
padding: 20px;
margin: auto;
width: 65%;
}
p {
font-size: 12px;
color: gray;
margin-top: 5%;
text-align: center;
}
#email {
visibility: hidden;
font-size: 16px;
color: red;
line-height: -6px;
line-height: 1.6;
text-align: left;
display: block;
}
</head>
<div id="customForm">
<form accept-charset="UTF-8" id="" action="#action" method="POST">
<input name="inf_form_xid" type="hidden" value="dd500cb6988ssd3e0151492cb3eff8cf594" />
<input name="inf_form_name" type="hidden" value="UYTS" />
<input name="if_version" type="hidden" value="1.70.0.4582435" />
<div class="if-field">
<label for="inf_field_Email"></label>
<input id="inf_field_Email" name="inf_field_Email" placeholder="Enter your email address " type="text" /></div>
<div>
<div> </div>
</div>
<label id="email">Please enter a valid email address.</label>
<div class="ifn-submit">
<button id="submit" type="submit">Send Now</button></div>
</form>
</div>
input {
background-color: black;
color: #33ff00;
font-family: ocr a extended;
border: 0px;
width: 110px;
font-size: 16px;
}
<input type="text">
I tried display:inline-block, min-width, display:inline and they didn't work.
You need to use JavaScript.
Listen for the input event, set the input's width to 0px and get its scrollWidth, then set that back to the width of the input.
const input = document.querySelector('input');
input.addEventListener('input', function() {
input.style.width = "0px";
input.style.width = input.scrollWidth + "px";
})
input {
background-color: black;
color: #33ff00;
font-family: ocr a extended;
border: 0px;
min-width: 110px;
width:110px;
font-size: 16px;
}
<input type="text">
You could also do this with HTML and CSS using an editable textbox
<div>
<span class="input" role="textbox" contenteditable>Type here</span>
</div>
Learn more: https://css-tricks.com/auto-growing-inputs-textareas/
.input {
background-color: black;
color: #33ff00;
font-family: 'ocr a extended', sans-serif;
border: 0px;
min-width: 110px;
font-size: 16px;
padding: 1px 10px;
}
building a show your password with a caps lock warning on a form. But need to use appendTo so the HTML can be added to a pre-written shortcode.
Whenever the Html is added by appendTo the Javascript function can not find the added HTML.
code: https://codepen.io/edutize/pen/qBZXmOZ
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "#user_pass").addClass("fa fa-fw
fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
});
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
input.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
You're generating elements inside document ready which usually is initiated later than when the JS is loaded. When the $(".toggle-password").click(function() event listener is attached to .toggle-password, #caps doesn't exists yet.
Either moving the event listener into the document ready after the #caps element is created or moving the #caps element creation outside the document ready will work.
// Jquery appendTo capslock message and eye icons html
$(document).ready(function(){
$("<span></span>").appendTo(".login-password").attr("toggle", "user_pass").addClass("fa fa-fw fa-eye field-icon toggle-password");
$("<p>WARNING! Caps lock is ON.</p>").appendTo(".login-password").attr("id", "caps");
// toggle between classes and change attribute type
$(".toggle-password").click(function() {
$(this).toggleClass("fa-eye fa-eye-slash");
var input = $($(this).attr("toggle"));
if (input.attr("type") == "password") {
input.attr("type", "text");
} else {
input.attr("type", "password");
}
});
// capslock function change style from display none to block
var input = document.getElementById("user_pass");
var text = document.getElementById("caps");
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none"
}
});
});
.login-username input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-username input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=password] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=password]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
.login-password input[type=text] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding: 12px;
padding-left: 15px;
border: none;
border-radius: 4px;
resize: vertical;
font-family: 'Roboto', sans-serif;
font-size: 15px;
outline: none;
background-color: #f0f0f0;
margin-top: 10px;
margin-bottom: 10px;
transition: .1s;
}
.login-password input[type=text]:hover {
background-color: #e6e6e6;
transform: scale(1.01);
}
#caps {
display: none;
margin-left: auto;
margin-right: auto;
width: 50%;
color: red;
}
.field-icon {
margin-left: 72.5%;
margin-right: auto;
z-index: 2;
position: absolute;
margin-top: -40px;
color: #8A8A8A;
}
.login-submit input[type=submit] {
display: block;
margin-left: auto;
margin-right: auto;
width: 50%;
padding-top: 20px;
padding-bottom: 20px;
background-color: #24af61;
border: #24af61;
border-radius: 5px !important;
border-width: 1.5px;
color: white;
cursor: pointer;
display: block;
border-radius: 5px;
font-family: 'Poppins', sans-serif;
font-size: 18px;
transition: 0.3s;
font-weight: bold;
margin: 30px auto;
}
.login-submit input[type=submit]:hover {
background-color: #ffffff;
-webkit-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
-moz-box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
box-shadow: 0px 0px 12px 4px rgba(0,0,0,0.11);
transform: scale(1.05);
color: #24af61;
border-style: solid;
border: #24af61;
border-width: 1.5px;
border-radius: 15px;
}
#media screen and (max-width: 767px) {
.login-password input[type=password] , .login-username input[type=text] , .login-submit input[type=submit] {
width: 75%;
}
#media screen and (max-width: 767px) {
.field-icon {
margin-left: 82%;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="memberium-form">
<form name="loginform" id="loginform" action="https://traderonthestreet.com/wp-login.php" method="post">
<input id="learndash-login-form" type="hidden" name="learndash-login-form" value="754942d3df">
<p class="login-username">
<label for="user_login"></label>
<input type="text" name="log" id="user_login" class="input" value="" size="20" placeholder="Email *">
</p>
<p class="login-password">
<label for="user_pass"></label>
<input type="password" name="pwd" id="user_pass" class="input" value="" size="20" placeholder="Password *">
<!-- html thats being added by jquery appendTo -->
<!-- <span toggle="#user_pass" class="fa fa-fw fa-eye field-icon toggle-password"></span>
<p id="caps">WARNING! Caps lock is ON.</p> -->
</p>
<p class="login-submit">
<input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Login">
<input type="hidden" name="redirect_to" value="https://traderonthestreet.com/wp-admin/">
</p>
</form>
</div>
I am working on a simple program that takes input from user and performs arithmetic function on the input value and then displays result in div element via innerHTML. I have tried the ClipboardJS library with implementing data target in button to target div element content but it's not showing any result.
Can you help me, please?
$(document).ready(function() {
document.getElementById("idofdiv").style.display = "none";
document.getElementById("copybutton").style.display = "none";
$("#showbuttonid").click(function() {
var a = $("input#inputvaluebox").val();
var b = a * 10;
var b = "Value is" + b;
document.getElementById("idofdiv").style.display = "block";
document.getElementById("copybutton").style.display = "block";
document.getElementById("idofdiv").innerHTML = b;
});
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600&display=swap');
.labelclass {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.inputvaluecss {
box-sizing: border-box;
border: 1px solid #DDDDDD;
outline: none;
margin-left: 42px;
margin-top: 16px;
width: 275px;
padding-top: 12px;
padding-left: 15px;
padding-bottom: 12px;
}
.inputvaluecss:focus {
box-shadow: 0 0 5px #2EDC29;
border: 1px solid #2EDC29;
}
.divclass {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: black;
background-color: white;
width: 700px;
padding-left: 18px;
padding-top: 13px;
padding-bottom: 13px;
padding-right: 18px;
box-sizing: border-box;
border: 1px solid #DDDDDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard#2/dist/clipboard.min.js"></script>
<form>
<br>
<label for="inputvaluebox" class="labelclass">Input Value</label>
<input type="text" id="inputvaluebox" name="inputvaluename" class="inputvaluecss"><br><br>
<input type="reset" id="resetbuttonid">
<button type="button" id="showbuttonid">Show</button><br><br><br>
<div id="idofdiv" class="divclass"></div><br>
<button type="button" id="copybutton" data-clipboard-target="#idofdiv">Copy content!</button>
</form>
What you are doing is trying to add math functions to string
In your case a is a string and b is a number
So you try to convert a to number and b to string. That won't work
This worked for me
$(document).ready(function() {
document.getElementById("idofdiv").style.display = "none";
document.getElementById("copybutton").style.display = "none";
$("#showbuttonid").click(function() {
var a = $("input#inputvaluebox").val();
var c = parseInt(a)
var b = c * 10;
var d = "Value is" + b;
document.getElementById("idofdiv").style.display = "block";
document.getElementById("copybutton").style.display = "block";
document.getElementById("idofdiv").innerHTML = d;
});
});
You just need one more line of code. Just take a read in the official documentation: https://clipboardjs.com/#setup
new ClipboardJS('#copybutton')
$(document).ready(function() {
document.getElementById("idofdiv").style.display = "none";
document.getElementById("copybutton").style.display = "none";
$("#showbuttonid").click(function() {
var a = $("input#inputvaluebox").val();
var b = a * 10;
var b = "Value is " + b;
document.getElementById("idofdiv").style.display = "block";
document.getElementById("copybutton").style.display = "block";
document.getElementById("idofdiv").innerHTML = b;
});
new ClipboardJS('#copybutton')
});
#import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght#600&display=swap');
.labelclass {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
}
.inputvaluecss {
box-sizing: border-box;
border: 1px solid #DDDDDD;
outline: none;
margin-left: 42px;
margin-top: 16px;
width: 275px;
padding-top: 12px;
padding-left: 15px;
padding-bottom: 12px;
}
.inputvaluecss:focus {
box-shadow: 0 0 5px #2EDC29;
border: 1px solid #2EDC29;
}
.divclass {
font-size: 20px;
font-family: 'Open Sans', sans-serif;
color: black;
background-color: white;
width: 700px;
padding-left: 18px;
padding-top: 13px;
padding-bottom: 13px;
padding-right: 18px;
box-sizing: border-box;
border: 1px solid #DDDDDD;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/clipboard#2/dist/clipboard.min.js"></script>
<form>
<br>
<label for="inputvaluebox" class="labelclass">Input Value</label>
<input type="text" id="inputvaluebox" name="inputvaluename" class="inputvaluecss"><br><br>
<input type="reset" id="resetbuttonid">
<button type="button" id="showbuttonid">Show</button><br><br><br>
<div id="idofdiv" class="divclass"></div><br>
<button type="button" id="copybutton" data-clipboard-target="#idofdiv">Copy content!</button>
</form>
I have a form in which I have add and minus buttons. On click event it should add a new input field and delete the selected input field correspondingly. Add button functions well in my case but deleting selected input field is not working.
I hope I explained my question properly if not let me know.
Thanks in advance.
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="multivaluebox ">
<input asp-for="#Model" class=" form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
<br />
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
<script>
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" />';
document.getElementById('wrapper').appendChild(newdiv);
}
function deletetextbox() {
var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');
for (i = 0; i < inputlist.length; i++) {
if (document.getElementsByClassName('form-multivaluebox-textbox').isActive) {
$(this).remove();
}
}
}
I've put this together but it's not perfect.
It will allow you to add items to the wrapper and remove a selected item. However I'd suggest having a remove button at the end of each textbox to be more precise and user friendly.
var currentSelection;
function makeCurrentSelection(element){
currentSelection = element;
}
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" onfocus="makeCurrentSelection(this)"/>';
document.getElementById('wrapper').appendChild(newdiv);
}
function deletetextbox() {
currentSelection.remove();
}
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
<input asp-for="#Model" class=" form-multivaluebox-textbox" value="hello" onfocus="makeCurrentSelection(this)">
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+">
<br>
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-">
</div>
Not perfect but this will give you some idea regarding how to add/delete elements in JavaScript.
Add elements in wrapper div
Removes element from wrapper div
Please expand the snippet while executing.
Hope this helps !
function addtextbox() {
var newdiv = document.createElement('div');
$(newdiv).addClass('multivaluebox');
newdiv.innerHTML = ' <input asp-for="#Model" class=" form-multivaluebox-textbox" value="#(Model?.Count >= 3 ? Model[2] : null)" id="Labels" />';
document.getElementById('wrapper').appendChild(newdiv);
}
function deletetextbox() {
var inputlist = document.getElementsByClassName('form-multivaluebox-textbox');// document.getElementsByClassName()
for (i = 0; i < inputlist.length; i++) {
var elem = inputlist[0];
return elem.parentNode.removeChild(elem);
}
}
.multivaluebox {
border: 1px solid #ccc;
background-color: white;
padding: 10px;
width: 60%;
}
.form-multivaluebox-textbox {
border: 1px solid #ccc;
border-radius: 0;
width: 100%;
}
.btncontainer {
width: 6%;
padding-left: 1%;
margin: 0;
}
.subbutton {
margin-top: 2px;
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
}
.addbutton {
width: 34px;
height: 34px;
padding: 1%;
background-color: #0098ff;
color: white;
border: none;
font-weight: bold;
margin-bottom: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper" class="multivaluebox ">
<input asp-for="#Model" class="form-multivaluebox-textbox" value="hello" />
</div>
<div class="btncontainer col-sm-1">
<input type="button" class="addbutton " onclick="addtextbox(); " value="+" />
<br />
<input type="button" class=" subbutton" onclick="deletetextbox();" value="-" />
<div ></div>