У меня есть HTML-форма, и мне нужно отобразить значения полей формы под формой после того, как пользователь нажмет кнопку отправки. Как это сделать с помощью HTML и JavaScript?отображаемые значения формы html на той же странице после отправки
Попробуйте это:
onsubmit="return f(this.'yourfieldname'.value);"
Я надеюсь, что это поможет.
Что такое 'f'? Что такое 'onsubmit =" ... "'? Куда он идет в коде? Это очень упрощенный пример. Предполагая, что OP является новым для JavaScript, я не вижу, как это очень полезно. Пожалуйста, объясните * ваш код как минимум. –
<script type = "text/javascript">
function get_values(input_id)
{
var input = document.getElementById(input_id).value;
document.write(input);
}
</script>
<!--Insert more code here-->
<input type = "text" id = "textfield">
<input type = "button" onclick = "get('textfield')" value = "submit">
В следующий раз, задав здесь вопрос, укажите более подробную информацию и то, что вы пробовали.
Это работает? –
Это работает.
<html>
<head>
<script type = "text/javascript">
function write_below(form)
{
var input = document.forms.write.input_to_write.value;
document.getElementById('write_here').innerHTML="Your input was:"+input;
return false;
}
</script>
</head>
<!--Insert more code here-->
<body>
<form name='write' onsubmit='return write_below(this);'>
<input type = "text" name='input_to_write'>
<input type = "button" value = "submit" />
</form>
<div id='write_here'></div></body>
</html>
Возврат false из функции никогда не отправляет ее на другую страницу, но редактирует содержимое html.
нет это не работает! Я пробовал это сегодня, и это не сработало! – user2567857
@ user2567857 Он работает. Я тоже это пробовал. Почему бы вам не начать новый поток того, что вы пробовали, и поделиться ссылкой здесь. –
Вот один из способов сделать это.
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script language="JavaScript">
function showInput() {
document.getElementById('display').innerHTML =
document.getElementById("user_input").value;
}
</script>
</head>
<body>
<form>
<label><b>Enter a Message</b></label>
<input type="text" name="message" id="user_input">
</form>
<input type="submit" onclick="showInput();"><br/>
<label>Your input: </label>
<p><span id='display'></span></p>
</body>
</html>
И это то, на что похоже, когда run.Cheers.
Отображение HTML значения формы в той же странице после нажатия на кнопку отправить с помощью JS & HTML коды. Открыв его снова, он должен дать комментарии на этой странице.
Не могли бы вы быть более сложными? –
Это не так качественный ответ. –
Еще один способ сделать это (если вы используете форму), обратите внимание, что тип входа кнопка
<input type="button" onclick="showMessage()" value="submit" />
Полный код:
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
<form>
Enter message: <input type="text" id = "message">
<input type="button" onclick="showMessage()" value="submit" />
</form>
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
Но вы можете сделать это даже без формы:
<!DOCTYPE html>
<html>
<head>
<title>HTML JavaScript output on same page</title>
<script type="text/JavaScript">
function showMessage(){
var message = document.getElementById("message").value;
display_message.innerHTML= message;
}
</script>
</head>
<body>
Enter message: <input type="text" id = "message">
<input type="submit" onclick="showMessage()" value="submit" />
<p> Message is: <span id = "display_message"></span> </p>
</body>
</html>
Здесь вы можете использовать либо отправить или кнопку:
<input type="submit" onclick="showMessage()" value="submit" />
Нет необходимости устанавливать
return false;
из функции JavaScript для ни один из этих двух примеров.
Хорошо, это может быть довольно сложно, если вы не используете AJAX. Я определенно рекомендую его (вы можете найти учебник по W3Schools here).
Но в этом ответе я предполагаю, что вы не хотите использовать AJAX по какой-то причине, так что решение будет в чистом JavaScript.
Во-первых, давайте сделаем форму (все виды входов)
<form id="form">
Name: <input name="full-name" type="text" />
<br />
Favourite image: <input name="favourite_image" type="file" accept="image/*" />
<br />
Sex: Male <input name="sex" value="male" type="radio" /> Female <input name="sex" value="female" type="radio" />
<br />
Date: <input name="date" type="date" />
<br />
Are you a web developer: <input name="web-developer" type="checkbox" />
<br />
Your favourite web language(s):
<br />
<select name="favourite-web-language" multiple="multiple">
<option>HTML</option>
<option>CSS</option>
<option>JavaScript</option>
</select>
<br />
Your favourite color: <input name="favourite-color" type="color" />
<br />
<textarea name="textarea-comment">Wassup!</textarea>
<br />
<button type="button" id="submit-button">Show my inputs</button>
<br />
<br />
<br />
<h3>Your inputs are:</h3>
<output id="output"></output>
Теперь пришло время для JavaScript
Сделано этот ответ Object Oriented, поскольку она позволяет использовать несколько форм, чтобы иметь этот вид сценария.
/**
* Class for getting form content
*
* @version 1.0.0
*/
class FormContent{
/**
* Create new form content object
*
* @param {HTMLFormElement} formElement Single form element
* @param {string} inputSelectors Selectors for elements which will be used to read and display data (like jQuery selectors: # for IDs, . for classes and so on). Separate multiple selectors with comas.
* @param {HTMLButtonElement | HTMLInputElement} submitButton Submit button to display form data (although the type should be always 'button')
* @param {Element} outputSection Section where the form data is displayed
* @since 1.0.0
*/
constructor(formElement, inputSelectors, submitButton, outputSection){
/**
* Disabled elements (values will not be shown in output). Values can be tag names, attribute 'type' values or certain element (inside form)
*
* @type {Array}
* @since 1.0.0
*/
this.disabledElements = ["button", "reset", "submit"];
/**
* Input elements node list (created by inputSelectors)
*
* @type {NodeList}
* @since 1.0.0
*/
var inputElements = formElement.querySelectorAll(inputSelectors);
/**
* Get input elements
*
* @see inputElements
* @return {NodeList} Input elements
* @since 1.0.0
*/
this.getInputElements = function(){ return inputElements; };
/**
* Get submit button
*
* @return {HTMLButtonElement} Submit button
* @since 1.0.0
*/
this.getSubmitButton = function(){ return submitButton; };
/**
* Get output section
*
* @see outputSection
* @return {NodeList} Output section
* @since 1.0.0
*/
this.getOutputSection = function(){ return outputSection; };
/**
* Empty input's alternative (print) value
*
* @type {string}
* @since 1.0.0
*/
this.emptyValueMessage = "Unknown";
/**
* Error message (when there is empty required fields)
*
* @type {string}
* @since 1.0.0
*/
this.errorMessage = "<h4 style='color:#FF0000;'>Please fill all the required inputs!</h4>";
/**
* Instance for this class
*
* @type {FormContent}
* @since 1.0.0
*/
var thisInstance = this;
if(submitButton && outputSection){
submitButton.onclick = function(){
thisInstance.onSubmitButtonClick();
};
}
}
/**
* When submit button is clicked
*
* @since 1.0.0
*/
onSubmitButtonClick(){
var outputMessage = (this.areRequiredInputsFilled()) ? this.getFormattedFormContent() : this.errorMessage;
this.printToOutput(outputMessage);
}
/**
* Are all the required inputs/fields filled?
*
* @return {boolean}
* @since 1.0.0
*/
areRequiredInputsFilled(){
for(var node of this.getInputElements()){
if(node.required && !node.value){
return false;
}
}
return true;
}
/**
* Print/display form data to output element
*
* @see getOutputSections()
* @since 1.0.0
*/
printToOutput(content){
this.getOutputSection().innerHTML = content;
}
/**
* Get form content/data which is formatted
*
* @return {string} Formatted form content
* @since 1.0.0
*/
getFormattedFormContent(){
var formContent = "";
var formData = this.getFormData();
for(var input in formData){
formContent += "<b>" + input + "</b>: " + formData[input] + "<br />";
}
return formContent;
}
/**
* Get raw form data
*
* @return {json} Form data
* @since 1.0.0
*/
getFormData(){
var formData = {};
var noNameCounter = 0;
var formInputs = this.getFormInputs();
for(var input of formInputs){
let inputName = input.name || "no_name_element_" + noNameCounter;
let inputValue = input.data || input.value || this.emptyValueMessage;
if(!input.name){
noNameCounter++;
}
formData[inputName] = inputValue;
}
return formData;
}
/**
* Get all the form input elements
*
* @return {Array} Inputs and values (form data)
* @since 1.0.0
*/
getFormInputs(){
var formInputs = [];
for(var input of this.getInputElements()){
if(!this.disabledElements.includes(input.tagName.toLowerCase()) && !this.disabledElements.includes(input.type) && !this.disabledElements.includes(input)){
if(input.type === "radio"){
if(input.checked){
formInputs.push(input);
}
}else if(input.type === "checkbox"){
input.value = (input.checked) ? true : false;
formInputs.push(input);
}else if(input.multiple){
formInputs.push(this.getMultipleInput(input));
}else if(input.value || input.innerHTML){
formInputs.push(input);
}else{
formInputs.push(input);
}
}
}
return formInputs;
}
/**
* Get input which has attribute multiple
*
* @param {HTMLInputElement} multipleInput Input with attribute multiple
* @return {HTMLInputElement} Input instance
* @since 1.0.0
*/
getMultipleInput(multipleInput){
var inputInstance = document.createElement("input");
inputInstance.name = multipleInput.name;
var values = [];
if(multipleInput.type !== "file"){
for(var option of multipleInput){
if(option.selected){
values.push(option.value);
}
}
}else{
for(var file of multipleInput.files){
values.push(file.name);
}
}
inputInstance.data = values.toString();
return inputInstance;
}
}
var forms = document.getElementsByTagName("form");
for(var form of forms){
let inputSelectors = "input, select, textaera";
let submitButton = form.querySelector("#submit-button");
let outputSection = form.querySelector("#output");
new FormContent(form, inputSelectors, submitButton, outputSection);
}
В основном этот сценарий петли через каждый входной элемент и использует name и value (или иногда data) атрибуты для отображения данных формы.
Он распознает атрибуты, такие как multiple и required и функционирует соответственно. И он должен работать с каждым входным элементом (текстовой области, файл загрузки, выбор цвета и т.д.)
JSFiddle например here
Оливер, я надеюсь, вы сможете помочь мне отредактировать этот скрипт. Есть две вещи, которые мне нужно выполнить. У меня простая форма вопросника, и у некоторых из сгруппированных вопросов с переключателем есть опция «Другое». После выбора «Другое» я хотел бы, чтобы появилось скрытое текстовое поле, чтобы они могли добавить свой собственный ответ. Я не могу понять, как реализовать это в более чем одной области формы. И Q 2. Как удалить ответ радио-кнопки из результатов и ТОЛЬКО показать их добавленный текст. Я не хочу видеть «Unknown» или «on». Я хочу видеть Nothing для этого конкретного переключателя типа в результатах – flipflopmedia
<html>
<body>
<!-- Trigger/Open The Modal -->
<div style="background-color:#0F0F8C ;height:45px">
<h2 style="color: white">LOGO</h2>
</div>
<div>
<button id="myBtn"> + Add Task  </button>
</div>
<div>
<table id="tasksTable">
<thead>
<tr style="background-color:rgba(201, 196, 196, 0.86)">
<th style="width: 150px;">Name</th>
<th style="width: 250px;">Desc</th>
<th style="width: 120px">Date</th>
<th style="width: 120px class=fa fa-trash"></th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3> Add Task</h3>
</div>
<div class="modal-body">
<table style="padding: 28px 50px">
<tr>
<td style="width:150px">Name:</td>
<td><input type="text" name="name" id="taskname" style="width: -webkit-fill-available"></td>
</tr>
<tr>
<td>
Desc:
</td>
<td>
<textarea name="desc" id="taskdesc" cols="60" rows="10"></textarea>
</td>
</tr>
</table>
</div>
<div class="modal-footer">
<button type="submit" value="submit" style="float: right;" onclick="addTasks()">SUBMIT</button>
<br>
<br>
<br>
</div>
</div>
</div>
<script>
var tasks = [];
var descs = [];
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var rowCount = 1;
function addTasks() {
var temp = 'style .fa fa-trash';
tasks.push(document.getElementById("taskname").value);
descs.push(document.getElementById("taskdesc").value);
var table = document.getElementById("tasksTable");
var row = table.insertRow(rowCount);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
var cell3 = row.insertCell(2);
var cell4 = row.insertCell(3);
cell1.innerHTML = tasks[rowCount - 1];
cell2.innerHTML = descs[rowCount - 1];
cell3.innerHTML = getDate();
cell4.innerHTML='<td class="fa fa-trash"></td>';
rowCount++;
modal.style.display = "none";
}
function getDate() {
var today = new Date();
var dd = today.getDate();
var mm = today.getMonth() + 1; //January is 0!
var yyyy = today.getFullYear();
if (dd < 10) {
dd = '0' + dd;
}
if (mm < 10) {
mm = '0' + mm;
}
var today = dd + '-' + mm + '-' + yyyy.toString().slice(2);
return today;
}
</script>
</body>
</html>
@Iesus: Конечно, вы можете. Привяжите обработчик отправки к форме, прочитайте значения, измените DOM, отправьте данные через Ajax. –
@FelixKling, Не думал об этом. Это действительно сработает. Возможно, немного по сравнению с этим парнем, но это сработало бы ^^. Вы даже можете сделать это проще, например, опубликовать данные с целевым кадром/окном (или iframe) и получить данные onsubmit –
@FelixKling. В чем проблема с HTML, Javascript. Он тоже может делать это на стороне клиента. Если ему не нужно ничего делать со значениями или отправлять его в любом месте. Но просто отредактируйте содержимое HTML. –