Java脚本按钮vs链接提交？

Question

我有一个名为保存更改功能，它看起来像这样

function saveChanges() { 
    var theCity = city.value; 
    var theState = state.value; 
    var theEmail = email.value; 
    var theAge = age.value; 
    var theGender = gender.value; 
    var theOther = other.value; 
    alert("theCity is: "+ theCity); 
    alert("theState is: "+ theState); 
    alert("theEmail is: "+ theEmail); 
    alert("theAge is: "+ theAge); 
    alert("theGender is: "+ theGender); 
    alert("theOther is: "+ theOther); 
} 
window.onload=function(){ 
    document.getElementById('ok').onclick=saveChanges; 

} 

，我有就可以了简单的HTML页面的多个输入。

要提交内容，我在底部有一个链接。

<a href="#" id="ok" style="color:white;">Click here <-- </a> 

我做了一个按钮，具有相同的id ='ok'，它不起作用。

我错过了什么？

Answer 1

href是相同的页面。在运行该脚本之前，单击该按钮可能会重定向。尝试返回false或其他东西。

Answer 2

我假设你的保存函数检查表单中的某些字段以提交它们。如果是这样，那么错误不是关于链接或提交，问题是你使用变量的方式。你不能只做city.value，你需要使用document.getElementById（'city'）。value。这将导致JavaScript给你一个“变量未定义”的错误，并停止执行。正确的代码是：

function saveChanges() { 
    var theCity = document.getElementById('city').value; 
    var theState = document.getElementById('state').value; 
    var theEmail = document.getElementById('email').value; 
    var theAge = document.getElementById('age').value; 
    var theGender = document.getElementById('gender').value; 
    var theOther = document.getElementById('other').value; 
    alert("theCity is: "+ theCity); 
    alert("theState is: "+ theState); 
    alert("theEmail is: "+ theEmail); 
    alert("theAge is: "+ theAge); 
    alert("theGender is: "+ theGender); 
    alert("theOther is: "+ theOther); 
} 
window.onload=function(){ 
    document.getElementById('ok').onclick=saveChanges; 

} 

Answer 3

尝试

HTML

<input type='text' id='city'> <br /> 
    <input type='text' id='state'> <br /> 
    <input type='text' id='email'> <br /> 
    <input type='text' id='age'> <br /> 

<hr> 
<a href="#" id="ok" style="">Click here </a>​​​​​​​​​​​​​​​​ 

的Javascript

function id(e){ 
    return document.getElementById(e); 
} 

function saveChanges(){ 
    var city = id('city').value, 
     state = id('state').value, 
     email = id('email').value, 
     age = id('age').value; 

    alert("City : " + city + "\nState :" + state +"\nEmail : " + email + "\n Age : " + age); 

    return false; 
} 
window​.onload = function(){  
    document.getElementById("ok").onclick = saveChanges; 
};​ 

演示：http://jsfiddle.net/Zjrd3/

Answer 4

document.getElementById不会适用于多个元素。 ID应该是唯一的。

Answer 5

请试试这个，

HTML

<form onsubmit="return validate(this)" method="POST" action="a_post_page.php"> 
    name: <input type="text" name="name" /> <br /> 
    email: <input type="text" name="email" /> <br /> 
    age: <input type="text" name="age" /> <br /> 
    gender: <input type="text" name="gender" /> <br /> 
    city: <input type="text" name="city" /> <br /> 
    <br /> 
    <input type="submit" name="submit_form" value="Save" /> 
</form> 

的Javascript

function validate(form1) { 
    if(form1.name.value === "") { 
     alert("Please type your name the name feild."); 
     return false; 
    } 
    if(form1.email.value === "") { 
     alert("Please type your email the email feild."); 
     return false; 
    } 
    if(form1.age.value === "") { 
     alert("Please type your age the age feild."); 
     return false; 
    } 
    if(form1.gender.value === "") { 
     alert("Please type your gender the gender feild."); 
     return false; 
    } 
    if(form1.city.value === "") { 
     alert("Please type your city the city feild."); 
     return false; 
    } 
    return true; 
}