HTML-форма представляет значения и сохраняет их все в новом массиве (javascript)

Я пытаюсь создать форму с одним текстовым вводом и кнопкой отправки. То, что я хочу, чтобы сценарий сделал, - это взять текст после нажатия кнопки «Отправить» и сохранить его как значение. После этого, если я напечатаю что-то еще (без обновления страницы) и нажмите «Отправить», сохраните ввод как другое значение. Этот процесс можно сделать за один раз, так что у меня будет 100 различных значений. То, что я также хочу делать с этими значениями, помещает их в новый массив. Так: var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];. кода я успел написать недо сейчас это, но это не будет реально помочь вам:HTML-форма представляет значения и сохраняет их все в новом массиве (javascript)

<!DOCTYPE html> 
<html> 
<body> 

<form id="form1"> 
Type the words here: <input type="text" name="fname"><br> 
<input type="button" onclick="myFunction()" value="Submit"> 
</form> 
<input type="button" onclick="myFunction2()" value="Print all inserted words at array"> 
<p id="demo"></p> 
<script> 
function myFunction() { 

} 
function myFunction2() { 
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""]; 
    document.getElementById("demo").innerHTML = AllValues; 
} 
</script> 

</body> 
</html>

Я задаю этот вопрос, после попытки много вещей, которые не работали, и я знаю, что сценарий будет работать только в том случае, если я использую локальное хранилище HTML, но у меня нет знаний об этом, даже если бы я много исследовал эту тему. Я не хочу хранить только значения, но хочу получить их в новом массиве. Я задаю вопрос немного более общим, как всегда, чтобы помочь как можно больше. Не могли бы вы мне помочь? Заранее спасибо.

источник

2015-06-04 Oluderi

Для очень простой способ сделать это, попробуйте выполнить следующие действия:

HTML:

<form id="form1">Type the words here: 
    <input type="text" name="fname"> 
    <br> 
    <input type="button" value="Submit" class="submit"> 
</form> 
<input type="button" class="show-button" value="Print all inserted words at array"> 
<p id="demo"></p>

JS:

var values = new Array(); 

$(".submit").on("click", function() { 
    values.push($('input[name="fname"]').val()); 
}); 

$(".show-button").on("click", function() { 
    $("#demo").html(values.join("<br>")); 
});

Fiddle здесь: http://jsfiddle.net/5z4g04js/2/

источник

2015-06-04 21:05:40 darshanags

Спасибо за помощь. Это очень помогло мне. Вы знаете, как я могу сделать кнопку, которая очищает массив (удаляет все сохраненные значения)? – Oluderi

использовать 'array_name.length = 0'. Я обновил скрипку: http://jsfiddle.net/5z4g04js/3/ – darshanags

У вас было несколько проблем, главное в том, что вы должны указать атрибут «id» для входного текста с именем «fname». Далее вы должны сохранить массив AllValues в контексте, видимом двумя объявленными функциями (в данном случае глобальным контекстом).

<!DOCTYPE html> 
<html> 
<body> 

<form id="form1"> 
Type the words here: <input type="text" name="fname" id="fname"><br> 
<input type="button" onclick="myFunction()" value="Submit"> 
</form> 
<input type="button" onclick="myFunction2()" value="Print all inserted words at array"> 
<p id="demo"></p> 
<script> 
var AllValues = []; 
function myFunction() { 
    var fname = document.getElementById("fname").value; 
    AllValues.push(fname); 
} 
function myFunction2() { 
    document.getElementById("demo").innerHTML = AllValues; 
} 
</script> 

</body> 
</html>

Попробуйте также немедленную функцию, чтобы избежать хранения переменных в глобальном контексте. Код, который я вставляю не очень чистый конечно, но работает :)

источник

2015-06-04 20:53:24

У вас есть проблема с оформлением запроса. 'onclick =" myFunction() "' присваивает обработчик кликов _result для вызова myFunction_, а 'onclick =" myFunction "назначает функцию с именем _myFunction_ в качестве обработчика. –

Вы можете использовать JQuery, чтобы сделать это:

var all_values =[]; 

    function myFunction() { 
    var temp_val = $("#fname").val(); 
     alert(temp_val); 
     all_values.push(temp_val); 
    } 


    function myFunction2() { 
    alert(all_values); 
    } 

<form id="form1"> 
Type the words here: <input type="text" name="fname" id="fname"><br> 
<input type="button" onclick="myFunction()" value="Submit"> 
</form> 
<input type="button" onclick="myFunction2()" value="Print all inserted words at array"> 
<p id="demo"></p>

работает demo

P.S. отредактировал ответ jquery с большим количеством изменений. working demo

источник

2015-06-04 20:56:46 cs04iz1

Если вы используете jQuery для этого, вы должны прикрепить обработчики кликов «правильным» способом. Inline 'onclick =" function "' обработчики - это не путь. –

На данный момент есть уже написанный код, и я делаю только необходимые изменения. Если бы это был мой, я бы использовал обработчик .click(). В любом случае, PLZ выдумать правильный путь, ведь мы находимся на обучающем сайте :) – cs04iz1

Да, я имел в виду jquery '.click()' или '.on (" click ", ...)' и просто думал, если вы переходили из OP plain JS в jQuery, вы можете использовать полное jquery-решение. Я бы сказал то же самое по поводу ответа Томаса Веглинского, но это было минимальным изменением и оставалось с простым JS. –

Мой ответ :

<form id="form1"> 
Type the words here: <input id="words" type="text" name="fname"><br> 
<input type="button" id="submitWords" value="Submit"> 
</form> 
<input type="button" id="printWords" value="Print all inserted words at array"> 
<p id="demo"></p> 
<script> 
var arrWords = []; 
var btnSubmit = document.getElementById('submitWords'); 
var btnPrint = document.getElementById('printWords'); 
var demo = document.getElementById('demo'); 

btnSubmit.onclick = function() { 
    var words = document.getElementById('words').value; 
    arrWords = words.split(' '); 
    console.log(arrWords); 
} 

btnPrint.onclick = function() { 
    for(var i = 0; i < arrWords.length; i++) { 
    demo.innerHTML += arrWords[i]+"<br>"; 
    } 
} 

</script> 

</body> 
</html>

источник

2015-06-04 21:19:27 Mario

Используя эту функцию getAllValues (имя), вы можете вернуть значения любого элемента с именем «имя».

function getAllValues(name) { 
    var nameMatches=document.getElementsByName(name); 
    var AllValues=[]; 
    for (var i=0; i<nameMatches.length; i++) { 
    AllValues.push(nameMatches[i].name); 
    AllValues.push(nameMatches[i].value); 
    } 
    return AllValues; 
}

Чтобы назвать это, вы должны использовать getAllValues('fname').

источник

2015-06-05 01:07:29

HTML-форма представляет значения и сохраняет их все в новом массиве (javascript)

ответ

Смежные вопросы