How to print any number of these inputs by clicking the + button?
(with the help of javascript)
<div class="mb-3">
<label for="exampleFormControlTextarea1" class="form-label">options</label>
<ul id="my_list">
<div class="input-group mb-3">
<div class="input-group-text">
<input class="form-check-input mt-0" type="checkbox">
</div>
<input type="text" class="form-control">
</div>
</ul>
<button type="button" class="mt-3" id="btn_p" onclick="child_new()" >+</button>
add this js:
document.getElementById("btn_p").addEventListener("click", function(){
window.alert(document.getElementById("TheInputThatYouWant").value)
})
Related
I am trying to copy full form on click add button,
copying only label name.
below JS code: below is js code trying to add form dynamically.
how to add same form below last div onclick '+' button.
using js code below, only adding panel, but it's not working.
document.getElementById('add').onclick = duplicate;
var i = 0;
var original = document.getElementById('add-form');
function duplicate() {
var clone = original.cloneNode(true); // "deep" clone
clone.id = "add-form" + ++i; // there can only be one element with an ID
original.parentNode.appendChild(clone);
}
<div class="row mt-4">
<div class="row">
<div class="col-md-3 text-center mt-3 ml-3">
<button type="button" class="btn btn-light" id="add"><i class="fas fa-plus fa-xs"></i></button>
</div>
<div class="col-md-3 text-center mt-3 ml-4">
<button type="button" class="btn btn-light" id="minus"><i class="ri-delete-bin-line mr-0"></i></button>
</div>
</div>
<div class="col-md mt-1" id="add-form" style="width: 100%;">
<button class="accordion btn btn-primary">Product screen</button>
<div class="panel">
<div class="col-sm-12">
<div class="card mt-3">
<div class="col-md-12">
<!-- first row -->
<div class="row" style="margin-top: 9px;">
<div class="col-sm">
<label for="fname">product_name
</label>
<input type="text" id="fname" class="form-control" placeholder="product_name">
</div>
<div class="col-sm">
<label for="fname">price
</label>
<input type="text" id="fname" class="form-control" placeholder="price">
</div>
<div class="col-sm">
<label for="fname">pur_id
</label>
<input type="text" id="fname" class="form-control" placeholder="pur_id">
</div>
<div class="col-sm">
<label for="field2">type
</label>
<select name="field2" id="field2" class="selectpicker form-control" data-style="py-0" width="50">
<option selected>select one</option>
<option>type1</option>
<option>type2</option>
<option>type3</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
after click add button displayed only this panel.
The only thing that I changed in my code was that I changed the IDs e.g. previewContrast to preview_contrast and I get a Property value null error.
The error shows for the line "var color = colorObjekt.value.replace("#", "");
I would be grateful if someone could find the error in this code.
var textColorContrast = getColor('txtColor');
var bgColorContrast = getColor('bgColor');
var lumi1 = getLumi(textColorContrast);
var lumi2 = getLumi(bgColorContrast);
if (lumi1 !== false && lumi2 !== false) {
txtColor.style.color = '#'+textColorContrast;
bgColor.style.backgroundColor = '#'+bgColorContrast;
var ratio = (Math.max(lumi1, lumi2) + 0.05) / (Math.min(lumi1, lumi2) + 0.05);
contrastText.innerHTML = (Math.round(ratio * 100) / 100) + ':1';
}
function getColor(location) {
var colorObjekt = document.getElementById(location);
var color = colorObjekt.value.replace("#", "");
return color;
}`
Here is the html
<div class="tab-content container-fluid" id="navi_content" role="main">
<div class="tab-pane fade show active" id="post" role="tabpanel" aria-labelledby="post-tab">
<div class="row" role="row">
<h2 role="heading" class="col-10">Input</h2>
<div class="col-2" role="gridcell">
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-info" role="button"
data-toggle="popover" title="Info" data-trigger="focus"
data-content="On this page you can enter a text to display on the LED Scroll Board. You can also change the background and text color as well as the speed and brightness settings in the Settings modal. By selecting the Date or Clock Mode you can post the current date or time on to the board"
data-placement="bottom"></button>
<button type="button" class="btn btn-lg btn-outline-secondary fas fa-cogs" role="button" data-toggle="modal"
title="Settings" data-target="#settings"></button>
</div>
</div>
<form class="text__form" id="form">
<div class="form-row" role="row">
<div class="form-group col-10" role="gridcell">
<label class="text__label" for="text__input" id="input_label">
Your message:
</label>
<input type="text" class="form-control text__input-text" id="text_input"
placeholder="Text input here... :)" role="textbox" aria-required="true" aria-labelledby="input_abel" required>
<p class="text__counter">150 characters left...</p>
</div>
<div class="col-2 text__colorpicker" role="gridcell">
<div class="form-group" role="gridcell">
<label class="text__label" for="text_color" id="text_color_label">Text Color</label>
<input class="text__input-color" type="color" name="textcolor" id="text_color" value="#ff0000"
aria-labelledby="text_color_label">
</div>
</div>
</div>
<div class="card" role="none">
<div class="card-body" role="group">
<h3 class="card-header" role="heading">Modes</h3>
<fieldset class="form-check" id="color_radios">
<legend class="col-form-label text__card-label" id="modes_legend">
Color Modes
</legend>
<div class="row" role="row">
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode"
id="rainbow_mode" value="1" role="radio" aria-labelledby="rainbow_label">
<label for="rainbow_mode" class="form-check-label text__card-label" id="rainbow_label">Rainbow
Mode</label>
</div>
<div class="form-check form-group col-sm-6" role="form">
<input class="form-check-input text__input-radio" type="radio" name="colorMode" id="solid_mode"
value="0" role="radio" aria-labelledby="solid_mode_label" aria-checked="true" checked>
<label for="solid_mode" class="form-check-label text__card-label" id="solid_mode_label">Solid
Mode</label>
<div class="form-group" role="form">
<label for="bg_color" id="bg_color_label" aria-label="Background Color"> Color</label>
<input type="color" name="bgColor" id="bg_color" value="#ABCDEF" aria-labelledby="bg_color_label">
</div>
</div>
</div>
</fieldset>
Hi guys so when I try to add a question and answers this code works. But if I have made 2 questions and want to add a answer it will put an extra "answer" field in BOTH of the question. But ofcourse I only want to add an answer field to the "question" button i clicked on
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer()">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer() {
answer++;
var allanswers = document.getElementById('all_answers')
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>
If something is unclear I will try to explain it.
Please dont be to harsh I am pretty new to javascript...
All you needed to do was specify in your questions container an ID for where to put your answers in your add answer function i just used the question increment as an id and added that to the <div id="all_answers_${id}"> id and passed the id in the click function onclick="add_answer(${id})".
var question = 0;
function add_question() {
question++;
var allquestions = document.getElementById('all_questions')
var divquestion = document.createElement("div");
var id = question;
divquestion.innerHTML = `
<div id="all_questions">
<div class="form-group">
<label for="question" class="col-form-label">Question `+ question + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-question"></i></span></div>
<input type="text" class="form-control" name="question">
</div>
</div>
<div class="form-group mx-5">
<label for="answer" class="col-form-label">answer 1:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer 2:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
<div id="all_answers_${id}">
</div>
<button type="button" class="btn btn-success m-1" onclick="add_answer(${id})">add answer</button>
<hr>
</div>
`;
allquestions.appendChild(divquestion)
}
var answer = 2;
function add_answer(id) {
answer++;
var allanswers = document.getElementById('all_answers_'+id)
var divanswer = document.createElement("div");
divanswer.innerHTML = `
<div class="form-group mx-5">
<label for="title" class="col-form-label">answer ` + answer + `:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-file"></i></span></div>
<input type="text" class="form-control" name="answer">
</div>
</div>
`;
allanswers.appendChild(divanswer)
}
<div class="modal-body">
<div class="row">
<div class="col">
<form class="form-horizontal" action="functions/postSurveyActions.php" method="POST" enctype="multipart/form-data">
<div class="form-group">
<label for="title" class="col-form-label">Title:</label>
<div class="input-group">
<div class="input-group-prepend"><span class="input-group-text"><i class="fas fa-tags"></i></span></div>
<input type="hidden" name="hiddenSurveyGet"/>
<input type="text" class="form-control" name="title">
</div>
</div>
<div class="form-group">
<label for="description" class="col-form-label">Description:</label>
<textarea type="text" class="form-control" rows="4" name="description"></textarea>
</div>
<div class="list-group" id="myList">
<a class="list-group-item active main-color-bg">Survey:</a>
</div>
<button type="button" class="btn btn-success m-2" onclick="add_question()">add question</button>
<div id="all_questions">
<!-- this is the place where all questions get included with javascript -->
<hr>
</div>
<button type="button" class="btn btn-success m-2 float-right btnAddSurvey">Add survey</button>
</form>
</div>
</div>
</div>
I Made a switch to toggle between 2 contact forms. Everytime when using the button, the second form jumps.
Take a look here:
https://imgur.com/G4kGqjl
Here is my js:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
$("#mail-form, #phone-form").fadeToggle();
});
And here my HTML:
<div class="div_switch">
<label>
<h1 class="switch_text">Email</h1>
</label>
<label class="switch">
<input name="checkbox" type="checkbox" value="checkbox">
<span class="slider round"></span>
</label>
<label>
<h1 class="switch_text">Rückruf</h1>
</label>
</div>
<div id="mail-form" class="mail-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="form-row">
<div class="form-group col">
<label for="exampleFormControlTextarea1"></label>
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3" placeholder="Deine Nachricht..."></textarea>
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden</button>
</div>
</form>
</div>
<div id="phone-form" class="phone-form">
<form class="" action="index.html" method="post">
<div class="contact-selector">
</div>
<div class="form-row">
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-signature"></i></div>
</div>
<input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Dein Name">
</div>
<div class="input-group col-md">
<div class="input-group-prepend">
<div class="input-group-text"><i class="fas fa-envelope"></i></div>
</div>
<input type="email" class="form-control" id="inlineFormInputGroup" placeholder="Deine E-Mail-Adresse">
</div>
</div>
<div class="email-btn-holder">
<button type="submit" class="reshape_btn email-submit">Senden <span><i class="fas fa-arrow-right"></i></span></button>
</div>
</form>
</div>
I tried a couple of things. Setting the display of the parent div to absolute and some other css stuff i found on the webs but cant remember. But nothing helped.
I would really appreciate some help.
Thanks in advance!!
You should separate both forms and set a callback on your fadetoggle function (there's a completion event, use that to your favor). Try something like:
$("#phone-form").hide();
$("input[name=checkbox]").click(function(){
if($("#mail-form").is(':visible')){
$("#mail-form").fadeToggle(function(){
$("#phone-form").fadeToggle();
});
} else {
$("#phone-form").fadeToggle(function(){
$("#mail-form").fadeToggle();
});
}
});
Also, check out the api:
http://api.jquery.com/fadetoggle/
I would go with #Mauricio Cárdenas' answer, but if you absolutly must have them fade at the same time, you can do this:
<style>
#parentDiv{position:relative}
#mail-form, #phone-form{position:absolute;top:0}
</style>
<div ID="parentDiv">
<div id="mail-form" class="mail-form">
//Your form code
</div>
<div id="phone-form" class="phone-form">
//Your form code
</div>
</div>
This sets both forms to absolute and places them at the same position. Adding the parent div set to relative assures the forms position won't be set by the body.
I have a ejs(html) file, and There is a div class called "card".
What I want to do is that, if I click the button("Click me") then,
card-header(header1) has to be changed(before --> after) with colored back-ground.
However when I clicked the button, only the back-ground color was changed (excluding the header). need your help.
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.setAttribute("value", "After");
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6
Update the innerHTML
function save() {
var x = document.getElementById("header1");
x.style.backgroundColor="#cfe8f9";
x.innerHTML = "After";
}
<div class="col-sm-6">
<div class="card">
<div class="card-header" id="header1" style="font-weight:bold;">before</div>
<div class="card-body">
<form action="" method="POST">
<input type="hidden" id="input_flag" value="">
<div class="form-group">
<div class="input-group">
<div class="input-group-prepend">
<span class="input-group-text">noID</span>
</div>
<input type="text" id="notiSeq_1" name="notiSeq_1" class="form-control" value="" style="background-color:#FFFFFF">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-sort-numeric-asc"></i>
</span>
...
...
...
<button type="button" class="btn btn-primary" onclick ="save()">Click me</button>
</div> //end of col-sm-6