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><htmllang="en"><head><title>Document</title></head><body><header><H1>Give me miracle</H1></header><asideclass="input"><formaction="#"id="form"><labelfor="name">Input Your Name here</label><inputtype="text"name="name"id="name"><inputtype="submit"name="submit"id="submit"value="Submit"onclick="out(event)"></form></aside><asideclass="output"><h1>this is the output</h1><ulid="myUl"><liid="myInput">Input will be here on click of submit</li><li>dummy</li></ul></aside><script>functionout(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>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><asideclass="input"><formaction="#"id="form"><labelfor="firsName">Input Your First Name here</label><inputtype="text"name="firsName"id="firsName"><br><labelfor="lastName">Input Your Last Name here</label><inputtype="text"name="lastName"id="lastName"><br><inputtype="submit"name="submit"id="submit"value="Submit"onclick="out(event)"></form></aside><asideclass="output"><h1>this is the output</h1><ulid="myUl"><liid="myInput1">First Input will be here on click of submit</li><liid="myInput2">Second Input will be here on click of submit</li></ul></aside><script>functionout(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><asideclass="input"><formaction="#"id="form"><labelfor="firsName">Input Your First Name here</label><inputtype="text"name="firsName"id="firsName"><br><labelfor="lastName">Input Your Last Name here</label><inputtype="text"name="lastName"id="lastName"><br><inputtype="submit"name="submit"id="submit"value="Submit"onclick="out(event)"></form></aside><asideclass="output"><h1>this is the output</h1><ulid="myUl"><liid="myInput1">First Input will be here on click of submit</li><liid="myInput2">Second Input will be here on click of submit</li></ul></aside><script>functionout(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 takevar 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><htmllang="en"><head><title>Document</title><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><header><H1>Give me miracle</H1></header><asideclass="input"><formaction="#"id="form"onsubmit="addtoList(event);"><labelfor="name">Input Your Name here</label><inputtype="text"id="marvel"><inputtype="submit"value="Add to List"></form></aside><asideclass="output"id="container"><h1>this is the output</h1><ulclass="inputApendHere"><li>balls</li><li>dummy</li></ul></aside><script>functionaddtoList(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>functionout(){
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><htmllang="en"><head><title>Document</title><!-- jQuery CDN link --><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script></head><body><header><H1>Give me miracle</H1></header><asideclass="input"><formaction="#"id="form"onsubmit="addtoList('marvel');"><labelfor="name">Input Your Name here</label><inputtype="text"id="marvel"><inputtype="submit"value="Add to List"></form></aside><asideclass="output"id="container"><h1>this is the output</h1><ul><li>balls</li><li>dummy</li></ul></aside><script>functionaddtoList(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"