Recording button ID's in Javascript

Question

I am trying to create an item selection menu, where the user is presented with multiple buttons to pick their choices. I am creating several divs with PHP.

     <div id="h1-1"><input type="button" value="h1-1" onclick="recordValue()"></div>
     <div id="h1-2"><input type="button" value="h1-2" onclick="recordValue()"></div>

I would like to record all the values of buttons pressed and show these values via Ajax. Then when user is done selecting and presses submit I will insert these into MSSQL database.

How do I record button values to an array with Javascript?
How do I then show what was pressed?
Where could I execute some filtering of the selections (e.g. if h1-1 was pressed i do not want them to be able to select h2-1) ?

you won't be using ajax to show the values, only to connect to your server side script that interfaces with mysql. You can use vanilla javascript for the display. — mraaroncruz
– mraaroncruz, Commented Aug 29, 2011 at 9:43

mraaroncruz · Accepted Answer · 2011-08-29 09:56:25Z

1

I would keep the value in an array.
change you onclick part to
onclick="recordValue(this)"
and create an array outside the scope of the recordValue function wherever you declare it

var values = [];
function recordValue(element) {
    values.push(element.value);
    // code here to display value somewhere on the page
}

and then somewhere listen for the form's submit event and then send the data in your array via ajax to your server.

answered Aug 29, 2011 at 9:56

mraaroncruz

3,8092 gold badges34 silver badges33 bronze badges

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

1 Comment

mraaroncruz Over a year ago

I would recommend even more, if it's possible, to keep the onclick event out of your markup and move create an event listener in the head, or right above the closing body tag, that listens for click events on those inputs. Something like jquery makes this super easy (because of annoying browser differences), but it is also pretty simple to implement with vanilla javascript. This keeps your markup cleaner and more flexible.

0xJoKe · Accepted Answer · 2011-08-29 09:49:11Z

1

Your PHP-File could return a JSON-String with the values. Example: [ "Value 1", "Value 2", "Value 3" ]. This would return an array with all field-values.

You can then parse the JSON-string from your AJAX-call: var values = JSON.parse(returnVal);

For more details on JSON see json.org

Hope this is what you were looking for.

answered Aug 29, 2011 at 9:49

0xJoKe

85310 silver badges18 bronze badges

2 Comments

GEMI Over a year ago

I need to add some javascript validation prior to submiting the values. Also, I need to display what was pressed before sending it to PHP. So basically I need all validation to occur client-side. Any ideas?

mraaroncruz Over a year ago

listen for the submit event on your form and attach your validators there.

Collectives™ on Stack Overflow

Recording button ID's in Javascript

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related