CODEWITHSUNDEEP
javascriptgetattribute
Peter
Peter

Reputation: 71

Reading a data fielding that is set by javascript

I am creating a list of button bars that look like this via a php script:

<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49228)" > Button Name </button>

<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49568)" > Button Name </button>

<button type="button" class="btn btn-light btn-lg btn-block" onclick="set_buttons(49538)" > Button Name </button>

This button list when a button is clicked would set the data attribute for some other buttons I have set up on the page.

This is the javascript I use to set the attributes for the secondary buttons I have defined on the page (see below):

function set_buttons(customer_id) {

    var set_id = customer_id;
    var edit = document.getElementById("edit");
    var delete_customer = document.getElementById("delete");
    var orders = document.getElementById("orders");
    var password = document.getElementById("password");
    var email = document.getElementById("email");
    var details = document.getElementById("details");
    edit.setAttribute("data-customerID", set_id);
    delete_customer.setAttribute("data-customerID", set_id);
    orders.setAttribute("data-customerID", set_id);
    password.setAttribute("data-customerID", set_id);
    email.setAttribute("data-customerID", set_id);
    details.setAttribute("data-customerID", set_id);
};

This is the set of buttons on the page that I set the data-customerID="" with the previous button click from the list I generated:

<form name="main_buttons">
          <div class="row sticky-top" style="padding:3em 0 2em 0; z-index: 900;background-color: white;">
            <div class="col-sm-1 text-left">&nbsp;</div>
            <div class="col-sm-1 text-left"><button class="btn btn-primary" id="edit" onclick="page_redirect('customer_edit')";return false; data-customerID="">Edit</button></div>
            <div class="col-sm-1 text-left"><button class="btn btn-danger" id="delete" onclick="show_modal('delete_customer')" data-customerID="">Delete</button></div>
            <div class="col-sm-1 text-left"><button class="btn btn-info" id="orders" onclick="page_redirect('customer_orders');return false;" data-customerID="">Orders</button></div>
            <div class="col-sm-2 text-left"><button class="btn btn-secondary" id="password"  onclick="show_modal('customer_password')"data-customerID="">Change Password</button></div>
            <div class="col-sm-1 text-left"><button class="btn btn-success" id="email" onclick="page_redirect('email_customer');return false;" data-customerID="">Email</button></div>
            <div class="col-sm-2 text-left"><button class="btn btn-info" id="details" onclick="show_modal('customer_details')" data-customerID="">View Details</button></div>
            <div class="col-sm-1 text-left">&nbsp;</div>
          </div>
          </form>

What I would like to do is use that data value I previously set from the first button click and be able to grab it in a second javascript function:

function page_redirect(link){
  var page_link = link;

  if (page_link == 'customer_edit') {
    var customerID = document.querySelector("#edit");
    var data = customerID.dataset.data-customerID;
    alert(data);    
  }
};

The alert always displays NaN though and I am unsure how I can get the value. If I can get this value, then I can finish off the rest of the script functionality. I have only set up the first button for edit at present until I can get this data attribute value issue resolved.

Upvotes: 0

Views: 22

Answers (0)

Related Questions