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>
Related
This question already has answers here:
What do querySelectorAll and getElementsBy* methods return?
(12 answers)
Get the Value of Radiobutton Using JS
(3 answers)
Closed 3 months ago.
So im working on creating a form on javascript, and one of the form criteria is selecting your favorite carbohydrate.
I want to display the selected option on the console, and i tried to create a function for it, but for some reasn when i log it, it says undefined.
My html:
<form>
<label for="firstName">First Name</label><br>
<input type="text" id="firstName" name="fname" required><br><br>
<label for="lastName">Last Name</label><br>
<input type="text" id="lastName" name="lname"><br><br>
<label for="email">Email</label><br>
<input type="email" id="email" name="email" required><br><br>
<label for="comment">Comment</label><br>
<textarea name="comment" id="comment" rows="6" cols="50"></textarea><br>
<p>My favorite Carbohydrate is:</p>
<input type="radio" id="pasta" name="favCarb" value="pasta" required>
<label for="pasta">Pasta</label><br>
<input type="radio" id="rice" name="favCarb" value="rice" required>
<label for="rice">Rice</label><br>
<input type="radio" id="potatoes" name="favCarb" value="potatoes" required>
<label for="potatoes">Potatoes</label><br>
<br><input onclick="submitData" type="submit" id="submitButton" value="Submit">
</form>
My Javascript:
let firstName = document.getElementById("firstName");
let lastName = document.getElementById("lastName");
let email = document.getElementById("email");
let comment = document.getElementById("comment");
let pasta = document.getElementById("pasta");
let rice = document.getElementById("rice");
let potatoes = document.getElementById("potatoes");
let faveCarb = document.getElementsByName("favCarb").value;
let submitButton = document.getElementById("submitButton");
submitButton.addEventListener("click", submitData);
function submitData(){
console.log(
"First Name: " + firstName.value +
" Last Name: " + lastName.value +
" Email: " + email.value +
" Comment: " + comment.value +
" Favorite Carb: " + faveCarb.value
)
};
Thanks for the help!
i tried using the .value method, but it logged "undefined" into the console
<form action="#"></form>
<label for="First-name">First name: </label>
<input type="text" id="First-name" placeholder="Please insert fiid."><br>
<label for="Second-name">Second name: </label>
<input type="text" id="Second-name" placeholder="Please insert second name"> <br>
<label for="Passenger-weight">Passengers weight: </label>
<input type="number" class="weight" id ="Passenger-weight" placeholder="Please enter passengers weight"><br>
<label for="cargo-weight">cargo weight: </label>
<input type="number" class="weight" id ="cargo-weight" placeholder="Please enter cargo weight"><br>
<input type="submit" id ="submit" ><br>
</form>
<p id="sum"></p>
<div id="sumoftotal"></div>
<body>
<script language="JavaScript">
document.getElementById("submit").onclick=function (){
let firstName = document.getElementById("First-name").value;
let lastName= document.getElementById("Second-name").value;
let num1 = document.getElementById("Passenger-weight").value;
let num2 = document.getElementById("cargo-weight").value;
let total =parseInt(num1) + parseInt(num2);
document.getElementById("sum").innerHTML=(`${firstName} ${lastName} ${total }`)
}
</script>
</body>
my problem can be numbered:
number 1: when I press the submit button, input values show up, BUT when I want to insert a different data, the previous one disappear. I studied about it, because whatever comes in the function scope become local we cannot apply it outside, BUT I don't know how to change it.
number 2: I want to have the sum of total weights I insert at the end of my list, I know we can do this by loop, BUT I need something simpler and more preliminary because I am a novice and it would be a big jump for the time being.
all in all, I would be happy if anyone could help me.
Here is the primary and most basic approach.
var data = document.getElementById('data');
var weightElement = document.getElementById('total-weight');
document.getElementById("submit").onclick = function() {
/* Getting data */
let firstName = document.getElementById("First-name").value;
let lastName = document.getElementById("Second-name").value;
let num1 = document.getElementById("Passenger-weight").value;
let num2 = document.getElementById("cargo-weight").value;
let total = parseInt(num1) + parseInt(num2);
/* Appending element */
data.innerHTML = data.innerHTML + `First Name - ${firstName}, Last Name - ${lastName}, Weight - ${total} <br/>`;
weightElement.innerHTML = parseInt(weightElement.innerHTML) + total;
}
<body>
<form action="#"></form>
<label for="First-name">First name: </label>
<input type="text" id="First-name" placeholder="Please insert fiid."><br>
<label for="Second-name">Second name: </label>
<input type="text" id="Second-name" placeholder="Please insert second name"> <br>
<label for="Passenger-weight">Passengers weight: </label>
<input type="number" class="weight" id="Passenger-weight" placeholder="Please enter passengers weight"><br>
<label for="cargo-weight">cargo weight: </label>
<input type="number" class="weight" id="cargo-weight" placeholder="Please enter cargo weight"><br>
<input type="submit" id="submit"><br>
</form>
<div id="data"></div>
<div>Total weight = <span id="total-weight">0</span></div>
</body>
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>
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>
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>