Java script button vs link to submit?

Question

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?

You're missing a proper description of "does not work". What happens? Are there errors in console? What is the button's code? — Amadan
– Amadan, Commented Dec 17, 2012 at 4:20
Of course it would not work, id is supposed to be unique within the document. — nhahtdh
– nhahtdh, Commented Dec 17, 2012 at 4:20

Kashif Naseem · Accepted Answer · 2012-12-17 06:17:19Z

1

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

answered Dec 17, 2012 at 6:17

Kashif Naseem

1664 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kashif Naseem Over a year ago

return false will stop the form from being submit while return true will submit the form. Based on your requirement you can do your custom work and then return false

Rimian · Accepted Answer · 2012-12-17 04:20:53Z

0

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

answered Dec 17, 2012 at 4:20

Rimian

38.7k17 gold badges127 silver badges119 bronze badges

1 Comment

zerkms Over a year ago

# href won't redirect to anywhere

Mickle Foretic · Accepted Answer · 2012-12-17 04:28:19Z

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;

}

Andy Ecca · Accepted Answer · 2012-12-17 04:43:47Z

0

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/

answered Dec 17, 2012 at 4:43

Andy Ecca

1,98914 silver badges14 bronze badges

1 Comment

Cripto Over a year ago

Sorry, I wanted a button to do the same function as the link. I already have a link that does exactly this.

kmoney12 · Accepted Answer · 2012-12-17 04:45:54Z

0

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

answered Dec 17, 2012 at 4:45

kmoney12

4,5005 gold badges41 silver badges61 bronze badges

Collectives™ on Stack Overflow

Java script button vs link to submit?

5 Answers 5

HTML

Javascript

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

HTML

Javascript

1 Comment

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related