Adding input value from a form to an ul - javascript

I have a user input under a form, and I am trying to get the input to be added as a li under an ul. This is my code so far:
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
//console.log(input.value);
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" name="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>
<script type="text/javascript" src="script.js"></script>

button.addEventListener("click", function(e) {
e.preventDefault();
var li = document.createElement("li"); // create an li
li.textContent = input.value; // set its text content to input's value
reminderList.appendChild(li); // add it to the ul
});
Example:
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
var li = document.createElement("li"); // create an li
li.textContent = input.value; // set its text content to input's value
reminderList.appendChild(li); // add it to the ul
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" name="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>

Try this https://jsfiddle.net/tLx48h5L/
It pass the value to a function and create options inside the ul with the value of the input.
function createLis(option){
var template = "<option>"+option+"</option>";
var content = document.querySelector("#reminderList").innerHTML;
document.querySelector("#reminderList").innerHTML = content + template;
}
Cheers

You can select your reminder input element:
var reminderValue = document.querySelector("#reminder");
And add it's value to your li element
reminderList.innerHTML = reminderValue.value;
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var reminderValue = document.querySelector("#reminder");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
reminderList.innerHTML = reminderValue.value;
//console.log(input.value);
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" name="reminder" id="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>
https://jsfiddle.net/4wfrkvxs/

Check plz this solution.
var button = document.querySelector("#lagre");
var reminderList = document.querySelector("#reminderList");
var input = document.forms.reminderForm.reminder;
button.addEventListener("click", function(e) {
e.preventDefault();
var li = document.createElement('li');
li.innerText = document.getElementById('reminder').value;
document.getElementById('reminderList').appendChild(li);
});
<main class="container">
<div class="reminderContainer">
<div class="left">
<h1>Min huskeliste</h1>
<ul id="reminderList">
</ul>
</div>
<div class="right">
<form action="#" name="reminderForm">
<div class="reminderInput">
<label for="reminder">Jeg må huske...</label>
<input autofocus type="text" id="reminder" name="reminder">
</div>
<input id="lagre" type="submit" name="submit" value="Lagre">
</form>
</div>
</div>
</main>
<script type="text/javascript" src="script.js"></script>

Related

How to use screenshot api?

I am practicing to capture screenshot of webpage by using api.
I want to change the img src, on the button click.
Code is as follows:
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url"
id="input" value="" />
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
<button onclick="changeimg()">Capture</button>
</section>
And this is JavaScript:
<script type="text/javascript" charset="utf-8">
var url = document.getElementById("input").value;
function changeimg() {
document.getElementById("screenshot").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + url + "&dimension=1024x768";
}
</script>
You should get the input value inside the function and the img id is sh not screenshot
Now it's work
const input = document.getElementById("input");
function changeimg() {
document.getElementById("sh").src = "https://api.screenshotmachine.com?key=c04d3a&url=" + input.value + "&dimension=1024x768";
}
<section>
<div class="urldiv">
<label for="Url">Url</label>.
<br>
<input type="text" name="Url" id="input" value="" />
<button onclick="changeimg()">Capture</button>
</div>
<div class="ss">
<img id="sh" src="https://api.screenshotmachine.com?key=c04d3a&url=screenshotmachine.com&dimension=1024x768"/>
</div>
</section>

Check input field is empty or not

I am going to create simple validation form using Vanilla JavaScript, but I have problem, I want to check first ('entername') field, if user will not enter any letters in it, i want to console log message ('enter name'), it's works fine, but after that user reenter his name if field it returns in console ('enter name'), i want to return ('not enter') message.
var userBtn = document.getElementById('checkuserinputs');
var checkUserName = document.getElementById('user-name').value;
var checkUserSurname = document.getElementById('user-surname').value;
var checkUserPhone = document.getElementById('user-mobile').value;
userBtn.addEventListener('click', function(){
if(checkUserName.length == 0){
console.log('enter name')
}else{
console.log('not enter')
}
})
<div class="container-fluid">
<div class="modal-costum-row">
<div class="enter-name-side">
<div class="input-row">
<input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername">
</div>
</div>
<div class="enter-surname-side">
<div class="input-row">
<input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname">
</div>
</div>
</div>
<div class="enter-tel-numb-side">
<div class="input-row input--wide">
<input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber">
</div>
</div>
</div>
<button id="checkuserinputs">check input</button>
You need to get the value after clicking the button. If you put it outside of the click event, the value will never be updated.
var userBtn = document.getElementById('checkuserinputs');
userBtn.addEventListener('click', function () {
var checkUserName = document.getElementById('user-name').value;
var checkUserSurname = document.getElementById('user-surname').value;
var checkUserPhone = document.getElementById('user-mobile').value;
if (checkUserName.length == 0) {
console.log('enter name')
} else {
console.log('not enter')
}
})
<div class="container-fluid">
<div class="modal-costum-row">
<div class="enter-name-side">
<div class="input-row">
<input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername" />
</div>
</div>
<div class="enter-surname-side">
<div class="input-row">
<input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname" />
</div>
</div>
</div>
<div class="enter-tel-numb-side">
<div class="input-row input--wide">
<input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber" />
</div>
</div>
</div>
<button id="checkuserinputs">check input</button>
You need to retrieve the value of the input field in the click function callback:
userBtn.addEventListener('click', () => {
const checkUserName = document.getElementById('user-name').value;
if(checkUserName.length === 0){
console.log('enter name')
} else {
console.log('not enter')
}
})
change the variable geting value to button click function that is,
var userBtn = document.getElementById('checkuserinputs');
userBtn.addEventListener('click', function(){
var checkUserName = document.getElementById('user-name').value;
var checkUserSurname = document.getElementById('user-surname').value;
var checkUserPhone = document.getElementById('user-mobile').value;
if(!checkUserName){
console.log('enter name')
}else{
console.log('not enter')
}
})
var userBtn = document.getElementById('checkuserinputs');
userBtn.addEventListener('click', function(){
var checkUserName = document.getElementById('user-name').value;
var checkUserSurname = document.getElementById('user-surname').value;
var checkUserPhone = document.getElementById('user-mobile').value;
if(!checkUserName){
console.log('enter name')
}else{
console.log('not enter')
}
})
<div class="container-fluid">
<div class="modal-costum-row">
<div class="enter-name-side">
<div class="input-row">
<input class="costum--input" type="text" id="user-name" name="user-nm" placeholder="entername">
</div>
</div>
<div class="enter-surname-side">
<div class="input-row">
<input class="costum--input" type="text" id="user-surname" name="surname" placeholder="entersurname">
</div>
</div>
</div>
<div class="enter-tel-numb-side">
<div class="input-row input--wide">
<input class="costum--input" type="tel" id="user-mobile" name="user-mobile" placeholder="enterphonenumber">
</div>
</div>
</div>
<button id="checkuserinputs">check input</button>

how dynamically add new button by javascript

I have two textboxes and one button,
I want to add one new textfield, that should show card name from textbox1 and Link URL append from textbox2 when I click on button
//AddnNewCardNavigator
var counter=2;
var nmecardtxt= document.getElementById("textbox1").value;
var linkurltxt= document.getElementById("textbox2").value;
$("#addbutton").click(function(){
if(nmecardtxt ==""||nmecardtxt ==0||nmecardtxt ==null
&& linkurltxt ==""||linkurltxt ==""|| linkurltxt ==0||linkurltxt ==null){
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
var NewCarddiv = $(document.createElement('div')).attr("id",'cardlink'+counter);
NewCarddiv.after().html()
})
</script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
<div id="textboxesgroup">
<div id="textboxdiv1">
<label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url:    </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
Your variables nmecardtxt and linkurltxt must be created inside the click function,
because it's empty at the loading of the page.
I also took the liberty to use jQuery for that variables, as you're already using it, and tried to enhance some other things:
(See comments in my code for details)
//AddnNewCardNavigator
var counter = 2;
// On click function
$("#addbutton").click(function() {
// Here it's better
var nmecardtxt = $("#textbox1").val();
var linkurltxt = $("#textbox2").val();
// Modified you test here
if (!nmecardtxt || !linkurltxt) {
alert("Please insert value in Card name and Link Url textboxes and must be correct");
return false;
}
// Modified creation of the card
var link = $(document.createElement('a')).attr("href", linkurltxt).html(linkurltxt);
var NewCarddiv = $(document.createElement('div')).attr("id", 'cardlink' + counter).html(nmecardtxt + ": ").append(link);
$('#cards').append(NewCarddiv);
//NewCarddiv.after().html(); // Was that line an attempt of the above ?
});
body {
background: #888;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- text boxes-->
<div class="row">
<div class="col-md-12">
<div id="textboxesgroup">
<div id="textboxdiv1">
<label style="color:blanchedalmond">Card Name: </label><input type="textbox" id="textbox1">
</div>
<div id="textboxdiv2">
<label style="color:blanchedalmond">Link Url:   </label><input type="textbox" id="textbox2">
</div>
</div>
</div>
</div>
<!-- Added the below -->
<div id="cards">
</div>
<button id="addbutton">Add…</button>
Hope it helps.
Here's a simplified version of what you're trying to accomplish:
function addNewCard() {
var name = $('#name').val();
var url = $('#url').val();
var count = $('#cards > .card').length;
if (!name || !url) {
alert('Missing name and/or URL.');
}
var card = $('<div class="card"></div>').html("Name: " + name + "<br>URL: " + url);
$("#cards").append(card);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="name">Name:</label>
<input type="text" id="name" name="name">
<label for="url">URL:</label>
<input type="text" id="url" name="url">
<input type="submit" value="Add Card" onclick="addNewCard();">
<div id="cards">
</div>

Clone elements and add into mark-up code so form submission picks them up

When the clone button is clicked, size and length fields should be cloned and placed below. Crucial point is, I should be able to see these cloned mark-up code when I check the browser source code because I'll submit all fields.
HTML
<style>
div { display:inline-block; }
.needles, .yarns, .options { border:1px solid #14A; padding:10px; }
</style>
<div class='needles'>
<p>NEEDLES</p>
<div class='options'>
<div class='label'>Size</div>
<div class='field'>
<input id='size-0' name='size-0' value='Size' />
</div>
</div>
<br />
<div class='options'>
<div class='label'>Length</div>
<div class='field'>
<input id='length-0' name='length-0' value='Length' />
</div>
</div>
<br /><br />
<button>Clone</button>
</div>
<br />
<div class='yarns'>
<p>YARNS</p>
<div class='options'>
<div class='label'>Size</div>
<div class='field'>
<input id='size-0' name='size-0' value='Size' />
</div>
</div>
<br />
<div class='options'>
<div class='label'>Length</div>
<div class='field'>
<input id='length-0' name='length-0' value='Length' />
</div>
</div>
<br /><br />
<button>Clone</button>
</div>
I did something like this but I think it is a mess to be honest.
$("button").click(function(event) {
event.preventDefault();
var $parent = $(this).closest('div');
var $length = $parent.prev();
var $size = $length.prev();
var size = $size.clone(false).wrap('<p>').parent().html();
var length = $length.clone(false).wrap('<p>').parent().html();
var spanId = $(size).children('span').attr('id');
var idArray = spanId.split("__");
var currentIdentifierNo = idArray[idArray.length-2];
var newIdentifierNo = parseInt(currentIdentifierNo)+1;
var currentIdentifier = '__' + currentIdentifierNo + '__';
var newIdentifier = '__' + newIdentifierNo + '__';
var re = new RegExp(currentIdentifier, 'g');
size = size.replace(re, newIdentifier);
length = length.replace(re, newIdentifier);
var html = size + length;
$(this).before(html);
});
You have to change the name attribute for this to work:
length.find('input').attr('name', 'length-1');
size.find('input').attr('name', 'size-1');
If you send the same key / value pairs in the form, the server doesn't know which is which.

jQuery fadeIn div when input is in focus?

I'm trying to change the innerHTML of a div and fade it in when a input in my form comes into focus. I also want to test whether or not it's been faded in at all because when the page loads it will begin faded out.
To summarize, I essentially want to display a tooltip in another div and switch the tooltip with fading in and out as my inputs come into focus on my form.
Here's what I have so far:
<script type="text/javascript">
var visible = 0;
var nameText = "<p>May I get your<br/>full name?</p>";
var emailText = "<p>Could I please<br/>get your email<br/>address?</p>";
var messageText = "<p>What is the<br/>message you<br/>would like to send?</p>";
$('.inp').on("focus", function(event){
if (visible == 0)
{
var fadeTime = 1;
visible = 1;
}
else
fadeTime = 500;
$('bubble').fadeOut(fadeTime).html(function() {
if ($this.attr('id') == "name")
return nameText;
else if ($this.attr('id') == "email")
return emailText;
else if ($this.attr('id') == "message")
return messageText;
}).fadeIn(500);
});
</script>
I'm not receiving any JavaScript errors. My HTML for my bubble and inputs looks like this:
<footer class="container">
<div class="row reveal">
<div class="mailman fourcol">
<img src="images/mailman.png" alt="The Mail Man" />
<div id="bubble">
</div>
</div>
<div class="contact eightcol last">
<h1>CONTACT US FOR</h1> <h1>MORE INFORMATION</h1>
<div class="clear"></div>
<form name="contact-form">
<div class="form-left">
<div class="contact-name inp">
<input type="text" name="name" id="name" value="Name" />
</div>
<div class="contact-email inp">
<input type="text" name="email" id="email" value="Email" />
</div>
<div class="clear"></div>
<div class="contact-message inp">
<input type="text" name="message" id="message" value="Message" />
</div>
</div>
<div class="contact-submit">
</div>
</form>
</div>
</div>
</footer>
I did some fix to you. Check the demo.
The main problems are:
focus event should be fired on input element, $('.inp').on("focus", function(event){ should be $('.inp').on("focus", 'input', function(event){
$this.attr(id), you missed var $this = $(this); outside, or just use var id = this.id;.
$('bubble') should be $(#bubble)

Categories

Resources