I'm trying to take the user input of the form and on submit, populate a space in the DOM with the input. I also want to be able to print multiple user inputs in the same space (i.e. something like printing an array of user inputs onto the page each time a user submits)
function create_list_markup() {
document.getElementById("display").innerHTML =
"<h1 class='list-title'>"
+ document.getElementById('title').value + "</h1>"
+ "<br><br>"
+ "Recipient: "
+ document.getElementById('recipient').value
+ "<br>" + "Link: "
+ document.getElementById('link').value
+ "<br>"
+ "Price: "
+ document.getElementById('price').value;
}
function create_gift_markup(gift) {
const markup = `
<p>
<span class=''> ${gift.title} </span><br>
<span class=''> ${gift.recipient} </span><br>
<span class=''> ${gift.link} </span><br>
<span class=''> ${gift.price} </span><br>
</p>`;
return markup;
}
function insert_gifts(gift_markup) {
const gift_fragment = document.createDocumentFragment();
gift_markup.forEach(function __append_markup_to_docfrag(markup) {
let container_element = document.createElement('span');
container_element.insertAdjacentHTML('afterbegin', markup);
gift_fragment.appendChild(container_element.firstElementChild);
});
document.body.appendChild(gift_fragment);
}
function create_list_markup() {
const gift_markup = create_gift_markup(gifts)
insert_gifts(gift_markup)
}
The create_list_markup function works and prints out the user input to the screen (in conjunction with a div with an id of "display"), however I wanted to print multiple outputs to the same space, so I wrote the rest of the code. That's the stuff that doesn't work.
Here is the markup:
<h1>Christmas Gifts</h1>
<form class="gift-form" name="giftform" action="" id="gift">
<h2>Gift Submit Form</h2>
<label>Title of Gift</label>
<input type="text" name="title" value="" placeholder="Enter a title" id="title">
<label>Recipient of Gift</label>
<input type="text" name="recipient" value="" placeholder="Enter a recipient" id="recipient">
<label>Link to Gift Picture</label>
<input type="text" name="link" value="" placeholder="Enter link to picture" id="link">
<label>Price of Gift</label>
<input type="text" name="price" value="" placeholder="Enter price" id="price">
<button type="button" value="Submit" onClick="create_list_markup()">Submit</button>
</form>
<div class="list-box">
<h2>Gift List</h2>
<div id="display"></div>
</div>
Related
FormSubmit.co shows the page " The form was submitted successfully. Return to original site:" And it doesn't redirect to my strong end and doesn't send a message to my email address, I will add that sometimes it works correctly and sometimes it doesn't, I don't know what it depends on or someone can help me ? I will add that I created my code without any skills, please have mercy
<script>
$(document).ready(function () {
$('#submit').click(function() {
check = $('option[disabled]:selected').length;
if(check == 8) {
document.getElementById("pole1").innerHTML="<b>WYBIERZ SMAK I ILOŚĆ KTÓRA CIĘ INTERESUJE !!!!</b>";
document.getElementById("pole1").style.color="red";
document.getElementById("pole1").style.fontSize ="30px";
return false;
}
});
});
$(document).ready(function () {
$('#input1').keyup(function(){
var input1 = $('#input1').val();
var input3 = $('#input3').val();
$('#input2').val('NEW ORDER ' + input1 + ', PACZKOMAT : ' + input3 );
});
$('#input3').keyup(function(){
var input1 = $('#input1').val();
var input3 = $('#input3').val();
$('#input2').val('NEW ORDER ' + input1 + ', PACZKOMAT : ' + input3 );
});
});
</script>
</head>
<div id="form"></div>
<form
action=here is my email to which new submissions are coming in in the form of a special link " method="POST" id="myform">
<input type="hidden" id="input2" name="_subject" value="">
<input type="hidden" name="_next" value=here is a redirect to the next page that should appear after completing the entire form ">
<input type="hidden" name="_template" value="table">
// here should be 8 different select options
<div class="numer"><center>
<label for="phone"><b>Twój numer telefonu</b></label> <br>
<input type="tel" id="phone" name="Numer telefonu" placeholder="Wpisz swój numer telefonu" size="27" style="margin-top: 5px;" maxlength="12" required><br><br>
</center></div>
<div class="adres"><center>
<label><b>Dokładny adres paczkomatu</b></label> <br>
<div class="map11"><input type="text" name="Adres Paczkomatu" placeholder="Wpisz dokładny adres swojego paczkomatu" size="43" required>
<img class="image1" src="URL" width="25px" height="25px">
<img class="image2" src="URL" width="25px" height="25px">
</center></div><br><br>
<div class="numer.paczkomatu"><center>
<label><b>Numer wybranego paczkomatu</b></label> <br>
<div class="map22"><input class="map22" type="text" id="input3" name="Numer paczkomatu" placeholder="Wpisz numer wybranego paczkomatu" size="35" maxlength="8" required>
<img class=" image11" src="URL" width="25px" height="25px">
<img class=" image22" src="URL" width="25px" height="25px">
</center></div> <br>
</div>
<center><input value="Wyślij" type="submit" id="submit"></button></center>
</form>
</body>
</html>
I am creating a JS form where i need 3 inputs from user and after typing the 3 inputs , on clicking 'Add record' button ,it should display them on the same page one after another (line by line) for every button click. With my code, it is writing every new input entry in the same line and not next line. How do i do it ?
My result:
Andrew Arts 2007 Evelyn Computers 2006
Expected result :
Andrew Arts 2007
Evelyn Computers 2006
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
return false;
}
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<p id='f1'></p>
</body>
You use a <br> tag to break the line inside a <p> tag.
You just have to make a small change in your function :
function doSubmit() {
document.getElementById('f1').innerHTML += document.myform.name.value + " ";
document.getElementById('f1').innerHTML += document.myform.major.value + " ";
document.getElementById('f1').innerHTML += document.myform.year.value + " ";
document.getElementById('f1').innerHTML +='<br />'
return false;
}
If you're looking to style your form values , it would be good to append <p>tag for each form value . It will require a small change like below :
function doSubmit() {
document.getElementById('form-value').innerHTML += '<p>'+ document.myform.name.value + " " + document.myform.major.value + " " + document.myform.year.value + " " + "</p>";
return false;
}
Your HTML :
<body>
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30"
type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="form-value">
</div>
I would suggest creating a new p element for every submitted input. You also don't want to store the user input into the innerHTML, because it can lead to cross-site scripting attacks. To prevent this, you can use innerText instead. Here is an example of how you can achieve all that with your code:
function doSubmit() {
const newInputParagraph = document.createElement("p");
newInputParagraph.innerText += document.myform.name.value + " ";
newInputParagraph.innerText += document.myform.major.value + " ";
newInputParagraph.innerText += document.myform.year.value + " ";
document.getElementById("inputs").appendChild(newInputParagraph);
}
And you need to add container for input results (simple div) to your markup, for example like this:
<form name="myform">
<p>
Name: <input name="name" size="30" type="text" /> course: <input name="major" size="30" type="text" /> Year : <input name="year" size="4" type="text" />
</p>
<input type="button" value="Add record" onClick='doSubmit(); return false' />
</form>
<div id="inputs"></div>
I have this code in which i want to capture "subject" from input field and append it to "Subject" of "form" tag.
I am not getting how to use document.getElementById here.
Please help.
<!DOCTYPE html>
<html>
<body>
<form name="form1" method="post" action="mailto:somebody#gmail.com?Subject=Internal Issues enctype="text/plain">
<label for="Subject">Subject</label>
<input type="text" id="Subject" name="Subject">
</html>
</body>
Here don't use method or type with form attribute and your input test must contains name="subject"
Try with,
document.getElementById('sender').addEventListener("click", sendEmail);
function GetBody() {
var body = "Assignee : " + document.getElementById('Assignee').value + '\n' + "Requester: " + document.getElementById('Requester').value + '\n';
return body;
};
function sendEmail() {
var email = 'someone#gmail.com';
var body = GetBody();
var subject = document.getElementById('subject').value;
var mailto_link = 'mailto:' + email + '?subject=' + subject + '&body=' + encodeURIComponent(body);
window.location.href = mailto_link;
}
<form>
<div style="white-space:nowrap">
<label for="Requester" style="padding-right:50px;">Requester*</label>
<input type="text" id="Requester" name="Requester:" placeholder="Your Vuclip Mail Id..">
</div>
<div style="white-space:nowrap">
<label for="Assignee" style="padding-right:57px;">Assignee*</label>
<input type="text" id="Assignee" name="Assignee" placeholder="Whom you want to assign">
</div>
<div style="white-space:nowrap">
<label for="subject" style="padding-right:57px;">Subject*</label>
<input id="subject" name="subject " type="text" value="I have a suggestion" style="width: 870px; font-size: 18px;" />
</div>
</form>
<button id="sender">Send email</button>
This question already has answers here:
Display HTML form values in same page after submit using Ajax [closed]
(7 answers)
Closed 5 years ago.
I am trying to display what is typed and submitted in my form, on the same page. I got the first entry "name" to display, but can't get the rest to show up. I am using JQuery validator. I feel like it's something simple I am missing here. Thanks!
Script:
$(function() {
$("#signup").validate();
$("#signup").submit(function(e) {
e.preventDefault();
var display =
$("#name").val();
$("#theage").val();
$("#theemail").val();
$("#result").html(display);
});
});
Html:
<div>
<form id="signup">
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" title="Required" class="required">
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" title="Required" class="required digits">
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">
<input type='submit' value='Submit' name="submit" id='submitme'>
</form>
<p> Your name: </p>
<p> Age: </p>
<p> Email: </p>
<p id="result"></p>
</div>
You need to concatenate the form values. Right now, you're only adding the name to your display var.
var display =
$("#name").val(); // statement ends here because of semicolon
$("#theage").val();
$("#theemail").val();
needs to change to
var display =
$("#name").val() + " " +
$("#theage").val() + " " +
$("#theemail").val();
The error is not throwing in console, you were missing plugins.
$(function() {
$("#signup").validate();
$("#signup").submit(function(e) {
e.preventDefault();
var display =
$("#name").val();
$("#theage").val();
$("#theemail").val();
$("#result").html(display);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.16.0/jquery.validate.min.js"></script>
<div>
<form id="signup">
<label for="name" class="label">Enter your name</label>
<input type="text" name="name" id="name" title="Required" class="required">
<label for="theage" class="label">Enter your age</label>
<input type="text" name="theage" id="theage" title="Required" class="required digits">
<label for="theemail" class="label">Enter your email</label>
<input type="text" name="theemail" id="theemail" title="Please enter a valid email address" class="required email">
<input type='submit' value='Submit' name="submit" id='submitme'>
</form>
<p> Your name: </p>
<p> Age: </p>
<p> Email: </p>
<p id="result"></p>
</div>
To display the values entered on the form you could use the following:
$(function() {
$("#signup").validate();
$("#signup").submit(function(e) {
e.preventDefault();
var display = "<p>Your name: " + $("#name").val() + "</p><p>Your age: " + $("#theage").val() + "</p><p>Your email: " + $("#theemail").val() + "</p>";
$("#result").html(display);
});
});
I believe your problem is because you are only adding $("#name").val() to the display variable, You need to concatenate them.
var display = $("#name").val() + " " +
$("#theage").val() + " " +
$("#theemail").val();
Here's an example:
var result =
"Hello "; // semi colon ends the assignment
"world"; // this is doing nothing
$('#result1').html(result);
var result2 =
"Hello " +
"world";
$('#result2').html(result2);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
1:
<div id="result1"></div>
<br> 2:
<div id="result2"></div>
I am trying to input a break tag at the end of each line of code so that it doesn't just read all in one line inside the input box.
I have encoded the break tag as i thought that's how you can use html inside of an input box but for some reason it is just showing exactly what i have typed.
Any help to correct this would be much appreciated.
This is what i have so far. I have only encoded one of the break tags for demonstration purposes, just to show you what i have done.
<div data-role="content" id="feedbackcontent">
<form action="MAILTO:bg54wl#student.sunderland.ac.uk" method="post" enctype="text/plain" id="fback">
<label for="fname">Full Name:</label>
<input type="text" name="fname" id="fname" data-clear-btn="true" placeholder="Your Full name..." required>
<label for="email">Email:</label>
<input type="text" name="email" id="email" data-clear-btn="true" placeholder="Your Email Address..." required email>
<label for="comments">Comments (Optional):</label>
<input type="text" name="comments" id="comments" data-clear-btn="true">
<label for="deviceinfo" id="deviceinfo">Device Information:
<input style="height:50px;" readonly name="deviceinfo" id="deviceinformation"/>
</label>
<input type="submit" value="Send">
</form>
</div>
</div><!-- /content -->
<script>
document.addEventListener('deviceready', function(event) {
var content = "";
content += "Version: " + device.cordova + "<br/>";
content += "Platform: " + device.platform + "<br/>";
content += "Device Model: " + device.model + "<br/>";
content += "Platform Version: " + device.version + "<br/>";
content += "UUID: " + device.uuid + "<br/>";
var element = document.getElementById("deviceinformation").value = content;
}, false );
</script>
Input tags completely ignore newlines.
You can use a textarea instead. Textareas preserve whitespace.
<textarea name="theName">
You can have
Multiple lines
In textareas
</textarea>