CODEWITHSUNDEEP
javascriptjquery
Gerald Ferreira
Gerald Ferreira

Reputation: 1337

More Elegant Buttons to submit data to script

I am hoping someone can help

I have the following script part

function buttonOneClick(){
        sendData= "map_icon=car";
        initialize();
    }

function buttonTwoClick(){
        sendData= "map_icon=boat";
        initialize();
    }
function buttonThreeClick(){
        sendData= "map_icon=motorcycle";
        initialize();
    }
function buttonfourClick(){
        sendData= "map_icon=services";
        initialize();
    }

The above functions could easily go to about 50 buttons like these

<button type="btn btn-mini btn-primary" onclick="buttonOneClick()">Cars</button>
<button type="btn btn-mini btn-primary" onclick="buttonTwoClick()">Boats</button>
<button type="btn btn-mini btn-primary" onclick="buttonThreeClick()">Motorcycles</button>
<button type="btn btn-mini btn-primary" onclick="buttonfourClick()">Services</button>

again for each function I have a button

is there a more elegant way to create the function that handles the buttons?

example: How do I create one function to handle all the buttons?

The sendData is a variable which I could easily add to the button from the database

I am using JavaScript, jquery, Ajax, PHP and a MYSQL db and can create a loop for the buttons.

Upvotes: 1

Views: 138

Answers (6)

Cristian E.
Cristian E.

Reputation: 3583

<div id="some-container">
   <button class="large-button" mapIcon="foo1" >Click</button>
   <button class="large-button" mapIcon="foo2" >Cancel</button>
   <button class="large-button" mapIcon="foo3" >Help</button>
</div>

<script>
   jQuery("#some-container").on("click",".large-button",function(e){
   var theButton=jQuery(e.target);
   var icon=theButton.attr("mapIcon");
      initialize(icon);
   }
</script>

//Note the example is using on() function that binds the click event even for dynamic loads.

Upvotes: 1

DevlshOne
DevlshOne

Reputation: 8457

If you were using jQuery, it would look like this:

HTML

<button type="btn btn-mini btn-primary" data-icon="car">Cars</button>
<button type="btn btn-mini btn-primary" data-icon="boat">Boats</button>
<button type="btn btn-mini btn-primary" data-icon="motorcycle">Motorcycles</button>
<button type="btn btn-mini btn-primary" data-icon="services">Services</button>

jQuery

$(function() {
    $('button').click(function(e) {
        e.preventDefault(); // otherwise the button would submit to a new page
        sendData = 'map_icon=' + $(this).data('icon')
        initialize();
    });
});

Upvotes: 0

Terry
Terry

Reputation: 332

Just add a class to the buttons (all need the same class) and use an onclick handler with the following code

sendData= "map_icon="+this.innerHTML;
initialize();

Upvotes: 0

zigdawgydawg
zigdawgydawg

Reputation: 2046

Make a button like this:

<button type="btn btn-mini btn-primary" data-send-data="map_icon=car">Cars</button>

Add jQuery like so:

$(function() {
    $('button').click(function() {
        var sendData = $(this).data('send-data');
        initialize();
    });
});

Upvotes: 1

Mister Epic
Mister Epic

Reputation: 16743

I'd suggest adding a data attribute to each link:

<button type="btn btn-mini btn-primary" data-icon="map_icon=car">Cars</button>
<button type="btn btn-mini btn-primary"  data-icon="map_icon=boat">Boats</button>

Then you can create a single click handler for all buttons:

 $(function(){
     $('button').click(function(e){
         var sendData = $(this).attr('data-icon');
         initialize();
     });
 });

Note I removed the inline click handlers, which makes things a bit cleaner.

Upvotes: 1

CodingIntrigue
CodingIntrigue

Reputation: 78605

Give each button an attribute, telling the script what icon it should have. You can use data- attributes. Then bind onto a shared selector for each button (I chose to give each button an iconbtn class):

jQuery

$(function() {
  $(".iconbtn").click(function() {
    sendData= "map_icon=" + $(this).data("icon");
    initialize();
  });
});

HTML

<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="car">Cars</button>
<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="boat">Boats</button>
<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="motorcycle">Motorcycles</button>
<button type="btn btn-mini btn-primary" class="iconbtn" data-icon="services">Services</button>

Upvotes: 2

Related Questions