Display form value in div - javascript

Is there a way to display a forms preset value in a div while also displaying the users new input?
The last one I got to work with this code:
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>
JS :
var inputBox = document.getElementById('chatinput');
inputBox.onkeyup = function(){
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
But for some forms the value is already set and I need them to be displayed aswell.
Thanks in advance!

But for some forms the value is already set and I need them to be displayed aswel
You should add :
document.getElementById('printchatbox').innerHTML = inputBox.value;
Before onkeyup event.
var inputBox = document.getElementById('chatinput');
document.getElementById('printchatbox').innerHTML = inputBox.value;
inputBox.onkeyup = function(){
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>
Hope this helps.

You can do it like following. Just add document.getElementById('printchatbox').innerHTML = inputBox.value this line directly in script tag.
<div class='printchatbox' id='printchatbox'></div>
<input type='text' name='fname' value="Kees" class='chatinput' id='chatinput'>
<script>
var inputBox = document.getElementById('chatinput');
inputBox.onkeyup = function () {
document.getElementById('printchatbox').innerHTML = inputBox.value;
}
document.getElementById('printchatbox').innerHTML = inputBox.value;
</script>

Firstly use jQuery because you should.
<script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.min.js"></script>
The HTML
<input type="text" name="my_input" id="my_input" value="">
<div id="current_value">
<!-- We'll put the value here -->
</div>
The JavaScript
<script type="text/javascript">
// Check current set value and update div HTML
$( document ).ready( function() {
$('#current_value').html($('#my_input').val());
});
// On change, update the div HTML
$( document ).on('keyup', '#my_input', function() {
$('#current_value').html($(this).val());
});
</script>
That should do it for you - here's the codepen: http://codepen.io/anon/pen/yeVQVe

Related

How can I remove an element from a form using its ID in JQuery?

Hello and happy new year to everyone :D.
I am currently trying to develop a way to add and delete an input from a form using javascript and jquery.
The problem is i am not familiarized with declaring functions on jquery so I beg for your help because I currently ran out of ideas.
I currently have this.
So the idea is to have 4 buttons in the bottom. Two for add or delete extra inputs for percentages "A", and the other pair to add or delete extra inputs for percentages "B".
I was trying to do it the easy way by declaring four independent functions (i.e addA, removeA, addB, removeB), but i want to achieve this in a few lines. So that's why i opted to declare it as a function with two input parameters. Since i did that the code doesn't work anymore :(
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
$('#edadd').on('click', add('edinpt','edesc'));
$('#edrem').on('click', remove('edinpt','edesc'));
$('#idadd').on('click', add('idinpt','idesc'));
$('#idrem').on('click', remove('idinpt','idesc'));
</script>
</body>
</html>
Thank you so much!
I edited you html, please see below, jquery codes must be inside the $(function(){
and your syntax in on click function is incorrect.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="idesc">
<input type='text' id='idesc_1' value='idesc_1'>
</div>
<div id="edesc">
<input type='text' id='edesc_1' value='edesc_1'>
</div>
<input type="hidden" value="1" id="idinpt">
<input type="hidden" value="1" id="edinpt">
<button id="idadd">Add input for data A</button><button id="idrem">Remove input for data A</button>
<button id="edadd">Add input for data B</button><button id="edrem">Remove input for data B</button>
<script>
$(function(){
$('#edadd').on('click', function(){
add('edinpt','edesc')
});
$('#edrem').on('click', function(){
remove('edinpt','edesc')
});
$('#idadd').on('click', function(){
add('idinpt','idesc')
});
$('#idrem').on('click', function(){
remove('idinpt','idesc')
});
})
</script>
<script type="text/javascript">
function add(inpnum, inpnam){
var act_id = parseInt($('#'+inpnum).val());
if(act_id<5){ //5 input
var new_id = act_id+1;
var new_input = "<input type='text' id='"+inpnam+"_"+new_id+"' value='"+inpnam+"_"+new_id+"'>";
$('#'+inpnam).append(new_input);
$('#'+inpnum).val(new_id);
}
}
function remove(inpnum, inpnam){
var last_id = $('#'+inpnum).val();
if(last_id>1){
$('#'+inpnam+'_'+last_id).remove();
$('#'+inpnum).val(last_id-1);
}
}
</script>
</body>
</html>

How to sync slider value with form placeholder passthrough?

Pardon as I am a newbie coder. I have a slider that outputs a value as I drag it and display it with a span tag
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<div class="login-box">
<form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
<div class="user-box">
<input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
</div>
<div>
<input type="text" id="txtInput1">
</div>
<ul class="actions">
<li><button type="submit">Submit Score</button></li>
</ul>
</form>
</div>
which is linked to javascript code
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("input1", function() {
const slider1Value = this.value;
output1.innerText = input1Value;
input.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}
because I want to pass the output of the slider value to a form tag because I want to submit the value to a googlesheet using API
everything is working, however, whenever I drag the slider the value displayed on the form placeholder is not updating. I want to sync them and update in real-time. Is this possible? Am I missing anything obvious?
Please save me. Thanks!
There was couple of mistakes, mostly in the naming of the variables, but the most important one is was inside your eventListener.
As you can see, the first element inside () should be the type of the event, not the name of the variable. So I've put change (see more info here), instead of input1.
Other changes are mostly typing errors, as I've said.
var slider1 = document.getElementById("myRange1");
var output1 = document.getElementById("demo1");
var input1 = document.getElementById("txtInput1");
output1.innerText = slider1.value; // Display the default slider value
input1.value = slider1.value;
// Update the current slider value (each time you drag the slider handle)
slider1.addEventListener("change", function() {
const slider1Value = this.value;
output1.innerText = slider1Value;
input1.value = slider1Value;
});
slider1.oninput = function() {
output1.innerHTML = this.value;
}
<div class="slidecontainer">
<input type="range" min="0" max="10" value="5" class="slider1" id="myRange1">
</div>
<h4>Score: <span id="demo1"></span></h4>
<div class="login-box">
<form action="https://sheetdb.io/api/v1/69kvuydqzi9bu" method="post" id="sheetdb-form">
<div class="user-box">
<input type="text" placeholder="Enter name of panel" name="data[Panel]" required>
</div>
<div>
<input type="text" id="txtInput1">
</div>
<ul class="actions">
<li><button type="submit">Submit Score</button></li>
</ul>
</form>
</div>

use a dynamic jQuery function for more than one Field and div

I have a jQuery code that gets the value of the text input and add its value to a div class. while following code works fine, i am trying to find out how to make this function work more dynamic for more than one text input and more than one divs, without copying the same script for each input and div again and again.
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-1').val();
$("#myDiv_1").removeClass().addClass(value);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput(this);
});
});
jQuery(document).ready(function($) {
function checkForInput(element) {
var value = $('.my-input-2').val();
$("#myDiv_2").removeClass().addClass(value);
}
$('input.my-input-2').on('change keyup', function() {
checkForInput(this);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
You can use an attribute for each input that its value represents the id of the div
jQuery(document).ready(function($) {
$('input.class-input').on('change keyup', function() {
const $this = $(this);
const value = $this.val();
const divId = $this.data('for');
$(`#${divId}`).removeClass().addClass(value);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="class-input" value="" data-for="myDiv_1">
<input type="text" class="class-input" value="" data-for="myDiv_2">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>
In case if you don't want to have identical classes for input elements.(As per your code.) Hope it helps.
jQuery(document).ready(function($){
function checkForInput(elementClass,elementValue) {
var inputNumber= elementClass.substr(elementClass.length-1);
var divclass='#myDiv_'+inputNumber;
$(divclass).removeClass().addClass(elementValue);
}
$('input.my-input-1').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
$('input.my-input-2').on('change keyup', function() {
checkForInput($(this).attr('class'),$(this).val());
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="my-input-1" value="">
<input type="text" class="my-input-2" value="">
<div id="myDiv_1" class=""> First Div </div>
<div id="myDiv_2" class=""> Second Div </div>

color handler changing CSS

I am trying to make it possible to change the background color of pull quotes by using the input type="color" tag in a form.
my HTML is as follows
<form action="change.php" method="post">
name: <input type="text"><br/>
email: <input type="email" id="email"><br/>
<label for="background-color">Choose a color for background :</label>
color: <input type="color" name="bgcolor"><br/>
<input type="submit" name="submit" value="Submit">
</form>
You see I was trying to do it in PHP by getting the color value from a POST , but I would reay like to solve this question in Jquery if possible.
You can achieve this with something like the following. You need an id attribute for you input. Then on blur event you will change the div background color with the input value if it is valid.
Also, you have to include jQuery in html <head>.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
JSFIDDLE
HTML:
<input type="text" name="bgcolor" id="bgcolor" maxlength="6" placeholder="Hex representation of the color">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#'+color)
if (isOk) { //If input is a valid representation of a color
$('#your_div_id').css('background-color', '#'+color);
}
});
});
isOk regex from here.
Or using type="color":
HTML:
<input type="color" name="bgcolor" id="bgcolor" value="">
JQuery:
$(document).ready(function() {
$('#bgcolor').on('change', function() {
var color = $(this).val();
$('#your_div_id').css('background-color', color);
});
});
UPDATE:
Move the following inside $(document).ready(function () { like this:
$(document).ready(function () {
$('span.pq').each(function () {
var quote = $(this).clone();
quote.removeClass('pq');
quote.addClass('pullquote');
$(this).before(quote);
}); //end each
$('#note').draggable();
$('#bgcolor1').on('change', function () {
var color = $(this).val();
$('#id1').css('background-color', color);
});
$('#bgcolor2').on('change', function () {
var color = $(this).val();
var isOk = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test('#' + color)
if (isOk) { //If input is a valid representation of a color
$('#id1').css('background-color', '#' + color);
}
});
});

Javascript: Dynamic adding of text fields and select tag is not getting saved

<html>
<head>
<title></title>
<script >
fields = 0;
function addInput() {
if (fields != 3) {
document.getElementById('text').innerHTML += "<input type='text' name='clients_form[clients_name]' size='32' maxlength='32' value='' id='clients_form_clients_name_"+fields+"' />"+
'<select id="client_category_name_'+fields+'" name="client_category[]"><option value="">Select Category</option><option value="1">internal</option><option value="2">external</option><option value="3">others</option></select>';
fields = fields+ 1;
} else {
document.getElementById('text').innerHTML += "<br />More then 3 not allowed.";
document.form.add.disabled=true;
}
}
</script>
</head>
<body>
<form name="form">
<input type="button" onclick="addInput();" name="add" value="Add More" />
</form>
<div id="text">
</div>
</body>
</html>
Question: When I click on add more first and type something and click on add more again the one i entered before is removed. What is the reason behind this. And how to fix it?
Thanks In advance
.innerHtml replaces the content which you place next..so use append like
var t = document.createElement("div"),
document.getElementById("theBlah").appendChild(t);
Problem is that typing something in the input does not change its value parameter but sets its value property (know the difference), e.g. it changes this.value instead of this.attributes.value, which results in innerHTML not actually containing the typed value.
So since innerHTML += 'string' ist just like setting innerHTML = innerHTML + 'string', it resets the input value to its attribute, which is empty.
I'd really recommend to use jQuery here, because with pure JS you'd have to first create the input and select element, then apply all needed attributes with multiple .setAttribute() calls.
I used Jquery and solved it this way:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
var counter = 1;
$("#addButton").click(function () {
if(counter>6){
alert("Not allowed");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.html(Added my text box and select tag here);
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
$("#removeButton").click(function () {
if(counter==1){
alert("No more textbox to remove");
return false;
}
counter--;
$("#TextBoxDiv" + counter).remove();
});
});
</script>
</head><body>
<div id='TextBoxesGroup'>
<div id="TextBoxDiv1">
</div>
</div>
<input type='button' value='Add More' id='addButton'>
<input type='button' value='Remove' id='removeButton'>
</body>
</html>

Categories