2015-04-23 2 views
3

У меня возникли проблемы с попыткой выяснить, как это сделать. Я хочу, используя поля в форме, поскольку переменные вызывают функцию JavaScript.Передача параметров функции JavaScript из формы

У меня есть это:

<form> 
 
<select name="users" onchange="showUser(this.value)"> 
 
    <option value="">Select a person:</option> 
 
    <option value="1">Peter Griffin</option> 
 
    <option value="2">Lois Griffin</option> 
 
    <option value="3">Joseph Swanson</option> 
 
    <option value="4">Glenn Quagmire</option> 
 
    </select> 
 
</form>

из примера, но то, что мне нужно, но не работает:

<form onsubmit="myFunction(this.num_cluster)"> 
 
    Num. Cluster: <input type="text" id="num_cluster"> 
 
    <input type="submit"> 
 
</form>

облако кто-нибудь Помогите мне ? Спасибо :)

ответ

1

Изменения id к name - после того, что вы можете получить доступ к значению поля ввода

function myFunction(form, event) { 
 
    event.preventDefault(); 
 
    alert(form.num_cluster.value); 
 
}
<form onsubmit="return myFunction(this, event)"> 
 
    Num. Cluster: <input name="num_cluster" type="text"> 
 
    <input type="submit"> 
 
</form>

Как проблема немного интереснее - мы можем расширить наш метод onsubmit

function s(form, event) { 
 
    event.preventDefault(); 
 

 
    var values = Array.prototype.slice.call(form.elements) // as form elements are not an array 
 
    .filter(function(element) { 
 
     return element.type !== 'submit'; // I don't need submit button 
 
    }) 
 
    .map(function(element) { 
 
     return (element.name + ': ' + element.value); // get name and value for rest form inputs and assign them to values variable 
 
    }); 
 

 
    alert('values => ' + values.join(', ')) // finish 
 
}
<form onsubmit="return s(this, event)"> 
 
    <p>Foo: 
 
    <input type="text" name='foo' /> 
 
    </p> 
 
    <p>Bar: 
 
    <input type="text" name='bar' /> 
 
    </p> 
 
    <p>Baz: 
 
    <select name='baz'> 
 
     <option value="lorem">lorem</option> 
 
     <option value="ipsum">ipsum</option> 
 
    </select> 
 
    </p> 
 
    <p> 
 
    <input type="submit" /> 
 
    </p> 
 
</form>

+0

Hi @ krzysztof-safjanowski, спасибо за ваш ответ. Не могли бы вы объяснить мне, что делает метод «preventDefault»? Без него он не работает, и Id нравится понимать это. Thanks – Oveie

+0

@Oveie 'event.preventDefault' - https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault предотвращает действие по умолчанию (оно отправляется для формы). Я могу себе представить, что есть какая-то проверка. Если все в порядке, вы можете выполнить что-то вроде 'event.target.submit()' и отправить содержимое формы на бэкэнд. –

0
function myFunction(){ 
    var value=document.getElementById("num_cluster").value; 

/// value has the actual thing that you need 
//... rest of your code 
} 

Вы можете использовать этот оператор даже в событии onsubmit, непосредственно написав Java-скрипт.

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