CODEWITHSUNDEEP
javascriptjqueryajaxforms
Geoff_S
Geoff_S

Reputation: 5107

Taking JavaScript variables of text and using them as hidden inputs also

I have some JavaScript that populates a modal from different areas of a site. Basically, if you click the button that expands the modal, it will capture all data related to the button pressed.

This works perfectly, but I need to take the text elements that I'm currently using to populate my classes and also capture them as hidden inputs to pass to an AJAX call.

The JavaScript below takes all text associated with the clicked button and passes it as the h3 class. My console.logs are dumping the values that I need to also have as hidden inputs.

How can I ( at the time of modal expansion) capture these same elements as hidden inputs AND pass them into an AJAX call?

$('.expand-modalForDelete').click(function() {
  var row = $(this).parent()[0],
    allElementsInRow = $(row).find('div'),
    gName = allElementsInRow[0].outerText,
    gColor = allElementsInRow[1].outerText,
    gCategory = allElementsInRow[2].outerText;
    
  gComment = allElementsInRow[3].outerText;

  $('#gName').text(gName);
  $('#gColor').text(gColor);
  $('#gCategory').text(gCategory);
  $('#gComment').text(gComment);
  console.log(gName);
  console.log(gColor);
  console.log(gCategory);
  console.log(gComment);
  UIkit.modal("#modalForDelete").show();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modalForDelete" class="uk-modal modalForDelete">
  <div class="uk-modal-dialog">
    <form id="editModal">
      <div class="uk-width-1-1">
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Name</h4>
            <h3 id="gName" class="uk-width-4-10"></h3>
          </div>
        </div>
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Color</h4>
            <h3 id="gColor" class="uk-width-4-10"></h3>
          </div>
        </div>
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Category:</h4>
            <h3 id="gCategory" class="uk-width-4-10"></h3>
          </div>
        </div>
        <div class="uk-width-1-1" style="margin-bottom:10px;">
          <div class="uk-grid">
            <h4 class="uk-width-4-10 uk-text-muted">Comment:</h4>
            <h3 id="gComment" class="uk-width-4-10"></h3>
            <span class="edit-comment-icon uk-icon-pencil uk-width-2-10 uk-text-center" data-uk-tooltip="{cls:'edit-tooltip'}" title="Edit"></span>
            <button class="save-comment-button uk-button uk-button-success uk-width-2-10 uk-hidden">Save</button>
          </div>
        </div>
      </div>

      <div class="uk-modal-footer uk-text-center">
        <a id="delete-product-list-item" href="" class="uk-icon-button uk-icon-trash-o"></a>
      </div>
    </form>
  </div>
</div>

AJAX:

data: /* same as $('#gName').text(gName);
  $('#gColor').text(gColor);
  $('#gCategory').text(gCategory);
  $('#gComment').text(gComment);*/

Upvotes: 0

Views: 42

Answers (1)

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

If I understand your question correctly then you just need to create an object containing the data, like this...

var ajaxData =  {
    color: gColor,
    category: gCategory,
    comment: gComment
};

Then pass that as your data object in the Ajax call...

$.ajax({
    url: "your-url",
    data: ajaxData
});

As for your question about the colour name & number being in the same string, you can split them like this...

var value = "112 - Brown";

// Split the string...  (use split("/") if it's a forward-slash)
val1 = val1.split(" - ");

var colorNum = val1[0];
var colorName = val1[1];

Upvotes: 1

Related Questions