Javascript, parsing multiple values in a variable

Question

I have a working html form (in laravel) that is using a javascript call to employe Ajax.

Right now I'm using console log to make sure my click event shows the variables which it does.

However, because of how my values are below, I get multiple values in one variable and I'm wondering if there's a way to parse them into their own.

For example, in my form I have multiple values sharing table cells:

<form id="saveLineup">
@foreach($lists as $list)

  <tr style="text-align:center;">
      <td id="groupNumber">{{$list['product']}} - {{$list['product_NAME']}}</td>
      <td id="detailColor">{{$list['detail']}}/{{$list['COLOR']}} - {{$list['description']}}</td>
      <td id="category">{{$list['CATEGORY']}}</td>
      <td><input id="addToLineup"> type="checkbox" <?php if ($list['LINE_UP'] == 1) echo "checked='checked'"; ?>></td>
  </tr>  

@endforeach
</form>

But when I log my variables I get

category: "categoryOne" //which is correct
detailColor: "123/Blue - Description"
productNumber: 123 - productOne

What I'd like to do is parse those and have it all as separate values like so:

category:"categoryOne"
detail: "123"
color: "Blue"
productNumber: "123"
productDescription: "productOne"

Is there a way to do that within my JS?

$("#addToLineup").click(function (e) {

  var productNumber = document.getElementById("productNumber").innerHTML = productNumber;
  var detailColor = document.getElementById("detailColor").innerHTML = detailColor;
  var category = document.getElementById("category").innerHTML = category;

  updatedata.productNumber = productNumber;
  updatedata.detailColor = detailColor;
  updatedata.category = category;

  $.ajax({
    url: "/test/addToLineup",
    data: updatedata,
    _token: phpVariables.csrfToken,
    type: "POST",
    beforeSend: function () {
      showLoading(element);
    },
    success: function (data) {
      location.reload();
    },
  });
});

Pluda · Accepted Answer · 2019-01-25 18:13:05Z

1

I believe the simplest way is splitting your variables like this:

var detailColor = "123/Blue - Description";
var productNumber = "123 - productOne";

var first = detailColor.split(' - ');
var just_color = first[0].split('\/');
var detail = just_color[0];
var color = just_color[1];

var second = productNumber.split(' - ');
var product_number = second[0];
var product_description = second[1];

console.log(detail , color, product_number, product_description);

answered Jan 25, 2019 at 18:13

Pluda

1,4776 gold badges21 silver badges46 bronze badges

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

4 Comments

MSFT138 Over a year ago

Thank you, and I also just realized: I'm building this within a php foreach loop so only my first checkbox works and logs only the first element. Is there a way to fix that?

Pluda Over a year ago

I'm not familiar with laravel... try to delete the @endforeach

MSFT138 Over a year ago

Not so much laravel, I just didn't know if I should account for that in JS since there can only be one ID

Pluda Over a year ago

as far as I'm understanding your needs, you want to make this dynamic and with more elements, so I think you should try another approach, like this you'll have to manipulate everything within javascript before you call the ajax with is no good

Collectives™ on Stack Overflow

Javascript, parsing multiple values in a variable

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related