How to process which button is selected in an HTML form? - html

Question

I'm creating a nice-ish HTML form on my website for a school project (though this question is not homework)
The form takes product specifications from input and lists them for sale or looks if they are available. The action the website takes depends on whether the user is a buyer or seller.
At the top of the form there are two nice buttons - "Buyer" and "Seller". The user selects one and proceeds with his details. However, when the form is processed, I can't think of a simple way to check which button was selected. With radio buttons it was easy, but I want to use full buttons like these because they will look much nicer on the site.
I've made a sample on JSFiddle- http://jsfiddle.net/6u6jN/1/
For a user who clicks "Buyer" and types the name "Sarah", the result I want is "You are a Buyer named Sarah".
Essentially, my question can be summed up as: How do you use ordinary buttons as though they were radio buttons?
Code from JSFiddle, as required by StackOverflow:
HTML:
<form>
<button type="button" class="mybutton" id="buyer">Buyer</button>
<button type="button" class="mybutton" id="seller">Seller</button>
<input type="text" id="inputBox" name="name" />
</br>
<button type="button" id="submit" onClick="inputProcess(this.form)">Enter</button>
</form>
<div id="results"></div>
CSS:
.mybutton {
padding: 20px;
font-family: inherit;
font: inherit;
color: inherit;
text-shadow: inherit;
text-align: center;
border-radius: 6px;
position: relative;
background: #0ff551;
border: 2px solid #c2e1f5;
display: inline-block;
}
#inputBox {
height: 40px;
width: 200px;
font-size: 30pt;
}
JavaScript:
function inputProcess(form){
var name = form.name.value;
var resultsDisplay = document.getElementById("results");
resultsDisplay.innerHTML = "<p> You are a ????? whose name is " + name + "</p>";
}

Answer 1

You need to add event listeners on the buttons, and then when the button is clicked you save the result in a variable, something like this:
var result;
document.getElementById('seller').addEventListener('click', function() {
result = this.textContent;
}, false);
document.getElementById('buyer').addEventListener('click', function() {
result = this.textContent;
}, false);
document.getElementById('submit').addEventListener('click', function() {
var name = document.getElementById('inputBox').value;
var resultsDisplay = document.getElementById("results");
resultsDisplay.innerHTML = "<p> You are a " + result + " whose name is " + name + " </p>";
}, false);
Also I would avoid attaching event directly to HTML like <button onclick="?"></button>, it's much cleaner to just attach the listener onload with document.addEventListener
JSFiddle