How I Can Get The Result On A Display
i tried to make form, and i had a problem when i can't get the input from user to display in my web, its make me stressed, i cannot sleep in this week, i already leave my home, i l
Solution 1:
Use decorations according to your preference
As submit is to submit form to server and reload page to the feedback , here preventDefault(); ignores that way and execute the function when submit is clicked without executing default function of reloading/open new tab as specified by user in server side language.
Getting values from input and enter to id using specific id :
Here first input value is taken to a const which then enter in id using .innerHTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
</head>
<body>
<header>
<H1>Give me miracle</H1>
</header>
<aside class="input">
<form action="#" id="form">
<label for="name">Input Your Name here</label>
<input type="text" name="name" id="name">
<input type="submit" name="submit" id="submit" value="Submit" onclick="out(event)">
</form>
</aside>
<aside class="output">
<h1>this is the output</h1>
<ul id="myUl">
<li id="myInput">Input will be here on click of submit</li>
<li>dummy</li>
</ul>
</aside>
<script>
function out(event) {
event.preventDefault();
const pliss = document.getElementById("name").value;
const show = document.getElementById("myUl");
const theOutput = document.createElement("li");
document.getElementById("myInput").innerHTML = pliss;
}
</script>
</body>
</html>Getting values from multiple inputs and enter to
id using specific id separately :If there are more than 1 input than refer to below snippet , method is almost same as first snippet
<head>
<title>Document</title>
</head>
<body>
<header>
<H1>Give me miracle</H1>
</header>
<aside class="input">
<form action="#" id="form">
<label for="firsName">Input Your First Name here</label>
<input type="text" name="firsName" id="firsName">
<br>
<label for="lastName">Input Your Last Name here</label>
<input type="text" name="lastName" id="lastName">
<br>
<input type="submit" name="submit" id="submit" value="Submit" onclick="out(event)">
</form>
</aside>
<aside class="output">
<h1>this is the output</h1>
<ul id="myUl">
<li id="myInput1">First Input will be here on click of submit</li>
<li id="myInput2">Second Input will be here on click of submit</li>
</ul>
</aside>
<script>
function out(event) {
event.preventDefault();
const pliss1 = document.getElementById("firsName").value;
const pliss2 = document.getElementById("lastName").value;
document.getElementById("myInput1").innerHTML = pliss1;
document.getElementById("myInput2").innerHTML = pliss2;
}
</script>
</body>
</html>Getting values from multiple inputs and enter to certain id using for loop :
Comments are provided in below snippet
<head>
<title>Document</title>
</head>
<body>
<header>
<H1>Give me miracle</H1>
</header>
<aside class="input">
<form action="#" id="form">
<label for="firsName">Input Your First Name here</label>
<input type="text" name="firsName" id="firsName">
<br>
<label for="lastName">Input Your Last Name here</label>
<input type="text" name="lastName" id="lastName">
<br>
<input type="submit" name="submit" id="submit" value="Submit" onclick="out(event)">
</form>
</aside>
<aside class="output">
<h1>this is the output</h1>
<ul id="myUl">
<li id="myInput1">First Input will be here on click of submit</li>
<li id="myInput2">Second Input will be here on click of submit</li>
</ul>
</aside>
<script>
function out(event) {
event.preventDefault();
var inputValue = document.getElementById("form").getElementsByTagName("INPUT")
//Number of li tags should be equal to number of inputs whose values you want to take
var inputValueToLi = document.getElementById("myUl").getElementsByTagName("LI")
//Here length is used 1 less because there are 3 input tags(out of which one is submit)
for (let i = 0; i < inputValue.length-1; i++) {
//loop through every values and enter them
inputValueToLi[i].innerHTML = inputValue[i].value
//Here how it is working
//inputValueToLi[1].innerHTML = inputValue[1].value
//inputValueToLi[2].innerHTML = inputValue[2].value
}
}
</script>
</body>
</html>Getting values from input and appending to li tag using .append method :
Taken from one @Sourav Das but in JavaScript way .
Here in below snippet first an li element is crated using .createElement and value from input is taken to var whose value is then created as textNode which then entered in created li tag using .appendChild . This tag is then entered in ul tag by using .appendChild again .
Refer to this to know more about following method
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header>
<H1>Give me miracle</H1>
</header>
<aside class="input">
<form action="#" id="form" onsubmit="addtoList(event);">
<label for="name">Input Your Name here</label>
<input type="text" id="marvel">
<input type="submit" value="Add to List">
</form>
</aside>
<aside class="output" id="container">
<h1>this is the output</h1>
<ul class="inputApendHere">
<li>balls</li>
<li>dummy</li>
</ul>
</aside>
<script>
function addtoList(event) {
event.preventDefault();
var li = document.createElement("li");
var inputValue = document.getElementById("marvel").value;
var t = document.createTextNode(inputValue);
li.appendChild(t);
document.querySelector(".inputApendHere").appendChild(li);
document.querySelector("#marvel").value = "";
}
</script>
</body>Solution 2:
It's simple if you get no input from user instead of letting him procced notify him like:-
<script>
function out(){
const pliss = document.getElementById("name").value;
if(pliss == "" || pliss == null){
alert("Please enter your name")
}
else{
const show = document.getElementById("myUl");
const theOutput = document.createElement("li");
}
}
</script>
Solution 3:
You are not using any JQuery library file or cdn into the tag. Down here is the working code,
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<!-- jQuery CDN link -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header>
<H1>Give me miracle</H1>
</header>
<aside class="input">
<form action="#" id="form" onsubmit="addtoList('marvel');">
<label for="name">Input Your Name here</label>
<input type="text" id="marvel">
<input type="submit" value="Add to List">
</form>
</aside>
<aside class="output" id="container">
<h1>this is the output</h1>
<ul>
<li>balls</li>
<li>dummy</li>
</ul>
</aside>
<script>
function addtoList(id) {
var temp = $("#"+id).val();
var newli = '<li>'+temp+'</li>';
$("#container ul").append(newli);
}
</script>
</body>
Post a Comment for "How I Can Get The Result On A Display"