I need help with some text blocks that have to be able to be saved and loaded again by choice in a dropdown menu. I've tried it with JS but somehow it doesn't go. What to do?
I've tried it with JS but somehow it doesn't go.
var firstTemplate = $('.mail-template').val();
var secondTemplate = $('.mail-template').val();
var thirdTemplate = $('.mail-template').val();
function templateOne(a) {
a = event || window.event;
$('.mail-template').val(firstTemplate);
$('button#template-choice').html("Template 1");
return true;
}
function templateTwo(b) {
b = event || window.event;
$('.mail-template').val(secondTemplate);
$('button#template-choice').html("Template 2");
return true;
}
function templateThree(c) {
c = event || window.event;
$('.mail-template').val(thirdTemplate);
$('button#template-choice').html("Template 3");
return true;
}
function save(s) {
c = event || window.event;
if ($('#template>a:first-child').clicked == true) {
firstTemplate = $('.mail-template').val();
return true;
} else if ($('#template>a:nth-child(2)').clicked == true) {
secondTemplate = $('.mail-template').val();
return true;
} else if ($('#template>a:nth-child(3)').clicked == true) {
thirdTemplate = $('.mail-template').val();
return true;
}
}.bg-text h1 {
margin-top: 20px;
font-size: 30px;
}
a.invisible-link {
color: unset;
text-decoration: none;
padding: 0 3px;
}
a.invisible-link:hover {
color: #788bb6;
}
p.sprachen a.invisible-link:hover {
color: #fcaf17;
}
.spalte {
display: inline-block;
}
span.current-language {
color: #fcaf17;
padding: 0 3px;
}
p.sprachen {
font-family: "univers_47", Arial, sans-serif;
font-size: 20px;
}
button.send-quote {
text-decoration: underline;
}
input {
font-family: "univers_47", Arial, sans-serif;
font-size: 14px !important;
}
input[type="file"] {
visibility: hidden;
width: 100px;
transform: translateY(-20px);
}
label.upload-button {
/* background: #788bb6;
color: #fff;*/
padding-top: 18px;
border-radius: 3px;
position: relative;
transition: 300ms;
display: inline-block;
}
img[src*="upload.png"]:hover {
cursor: pointer;
transform: translateY(-5px);
transition: 300ms;
}
img[src*="upload.png"]:not(:hover) {
transition: 300ms;
}
img[src*="enter.png"]:hover {
transform: translateX(5px);
transition: 300ms;
}
img[src*="enter.png"]:not(:hover) {
transition: 300ms;
}
img[src*="download.png"]:hover {
cursor: pointer;
transform: translateY(5px);
transition: 300ms;
}
img[src*="download.png"]:not(:hover) {
transition: 300ms;
}
.download:disabled img {
opacity: 0.7;
}
div.quote-form-content p {
margin-bottom: 10px;
}
.form textarea.mail-template {
height: 150px;
width: 600px;
border-color: #2c3459;
border-radius: 3px;
font-family: "Courier New", serif;
}
/* Dropdown Button */
.dropbtn {
background-color: #788bb6;
color: white;
padding: 10px 15px;
font-size: 13px;
cursor: pointer;
border: none;
border-radius: 3px;
}
/* Dropdown button on hover & focus
.dropbtn:hover, .dropbtn:focus {
background-color: #2C3459;
} */
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #fff;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
}
/* Links inside the dropdown */
.dropdown-content a {
color: #000;
padding: 10px 15px;
text-decoration: none;
display: block;
font-size: 13px;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #788bb6;
color: #fff;
}
/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {
display: block;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
label.checkbox {
font-size: 13px;
border: none;
}
div.checkboxes {
margin-top: 15px;
display: none;
}
h4#kriterium {
display: none;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h2>Ihr Mail-Template</h2>
<h4>Wählen Sie zunächst Ihre gewünschtes Template aus:</h4>
<div class="dropdown">
<button onclick="dropdown()" class="dropbtn" id="template-choice">Ihr gewünschtes Template</button>
<div id="Template" class="dropdown-content">
<a href="#" onclick="templateOne()">Template 1</a>
<a href="#" onclick="templateTwo()">Template 2</a>
<a href="#" onclick="templateThree()">Template 3</a>
</div>
</div>
<h4>Hier können Sie Ihr Mail-Template konfigurieren.</h4>
<div class="form">
<textarea name="Mail-Template" class="quote-form-element quote-form-client-email last mail-template" cols="90" rows="20"></textarea>
<button class="button button-navy-blue send-quote" type="button" onclick="save()">Speichern <i class="fa fa-save"></i></button>The entered text is not loaded the next time and obviously it's not saved. So what is wrong?
What i understand is that your text area is not saving. In your save function you are not getting the text area data because of the
ifyou implement. I have commented that code and its getting data and updating the fields. I hope this will work for you.