CODEWITHSUNDEEP
javascripthtml
Cripto
Cripto

Reputation: 3751

Java script button vs link to submit?

I have a function called save changes and it looks like this

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;

}

and I have a simple html page multiple inputs on it.

To submit the content, I have a link at the bottom.

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

I have made a button with the same id='ok' and it does not work.

What am I missing?

Upvotes: 0

Views: 110

Answers (5)

Kashif Naseem
Kashif Naseem

Reputation: 166

Please try this,

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;  
}

Upvotes: 1

kmoney12
kmoney12

Reputation: 4490

document.getElementById is not going to apply to more than one element. ID's should be unique.

Upvotes: 0

Andy Ecca
Andy Ecca

Reputation: 1969

Try

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;
};​

Demo : http://jsfiddle.net/Zjrd3/

Upvotes: 0

Mickle Foretic
Mickle Foretic

Reputation: 1409

I'm assuming that your save function checks some fields in a form in order to submit them. If so then the error isn't about the link or the submit, the problem is the way you are using variables. You can't just do city.value, you need to use document.getElementById('city').value. This will cause javascript to give you a "variable undefined" error and halt execution. The correct code would be:

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;

}

Upvotes: 0

Rimian
Rimian

Reputation: 38418

The href is the same page. Clicking the button might redirect before you run that script. Try returning false or something.

Upvotes: 0

Related Questions