Question

I have 2 input textfields and 4 radiobuttons.
With a click on the submit button, I want these values to appear in the sidebar.
Because the visitor can only select one radio button, three value’s should be appearing in the sidebar: brand, price and one selected direction.

Unfortunately right now I’m getting an error:

“error”: “Please use POST request”

This is my code and jsFiddle:

HTML:

<h1>Adding an item</h1>
<form>
    <div>
        <input type="text" name="price" id="price" value="price" />
        <input type="text" name="brand" id="brand" value="brand"/> 
        <br/>
        <input type="radio" name="direction" value="up" />  UP
        <input type="radio" name="direction" value="down" /> DOWN
        <input type="radio" name="direction" value="left" />  LEFT
        <input type="radio" name="direction" value="right" /> RIGHT
        <button id="addbutton">add it</button>
      </div>
</form>

<div id="sidebar"><h1>sidebar</h1></div>

JS:

$('#addbutton').click(function() {
    var $addDiv = $('#sidebar');
    $addDiv.append($('#brand' + '#price').val());
});

http://jsfiddle.net/kHuYp/

My question to you is:
How can I also append the value of the selected radio button? And what do I have to change in my code to make the error go away? Thanks in advance!

Answer 1

You need to treat each value independently in this line:

$addDiv.append($('#brand' + '#price').val());

Should be something like( depending on separator):

 $addDiv.append($('#brand').val() +' '+$('#price').val());

To avoid form submitting, return false in your click handler

DEMO: http://jsfiddle.net/kHuYp/3/