Get custom attr value & add to hidden input

Not possible with(out) jquery or javascript as its client side processing. Listen to on-change event for your drop down and then propagate it to your hidden field? On a separate note, still waiting :P

Edit: I meant without

@premsaurav This week I promise. Ok so can't do via jQuery or standard JS?

As custom attributes are not passed on to server with form submission, If you want to implement it using pure javascript, this should get you started http://www.w3schools.com/jsref/event_onchange.asp

Ah right got ya! Cheers dude

any way to do this in Vue ?

What exactly are you trying to do? Can you provide some of your code?

Just wanting to get the custom attribute value from data-optionId

Then append an hidden input with this value.

The rendered HTML is as follows:

<option v-model="option_id" value="609-Black" id="optionId" data-optionId="1345">Black  - In Stock </option>
<option v-model="option_id" value="609-Raspberry" id="optionId" data-optionId="1347">Raspberry  - In Stock </option>

For vue: have a look http://vuejs.org/guide/events.html

Currently reviewing the events in Vue put not sure how to get the custom attribute value.

@lstables Edit my previous answer , misspelled without as with (my bad) which might have made you think otherwise. If you are using plain javascript (or even jquery) , its quite simple.

Ok with jQuery which is what I thought how would I achieve this, (don't do JS) has you've probably gathered but should be quite simple for someone like you buddy!!

Tried the following:

$('.colors').on('change', function(e) {
            var option_id = $("#optionId").data('optionId');
            var test = $("#pid").append($('<input type="hidden" name="pid" />').val(option_id));

            alert(test);
        });

But the alert shows empty [object]{Object]

Dropdown has the following:

<select name="colour" class="browser-default colors">

vue should have bindings for that sort of thing..

Taking vue out of the picture completely though, something like this should work:

Markup:

<form id="foobar">
  <select name="foo" id="foo">
    <option value="1" data-optionId="foo">One</option>
    <option value="2" data-optionId="bar">Two</option>
    <option value="3" data-optionId="baz">Three</option>
  </select>
</form>

JS:

(function($) {
  $(document).ready(function() {
    $('select#foo').bind('change', function() {
      // Fetch selected item's data element value
      var optionId = $(this).children(':selected').attr('data-optionId');
      
      // Remove any existing hidden input
      $('input[name="hidden-option-id"').remove();
      
      // Append new hidden input element
      $('<input>').attr({
          type: 'hidden',
          id: 'hidden-option-id',
          name: 'hidden-option-id',
          value: optionId
      }).appendTo('form#foobar');
    });
  });
})(jQuery);

See it working in this plnkr.

@ willvincent That's just what I needed wasn't quite sure on how to write it, but I guess I was on the right tracks in a way... lol

Thanks again :)

@lstables FYI...

But the alert shows empty [object]{Object]

alert's don't show object details, so that's not necessarily an empty object, it's just telling you that the var is an object .. you should use console.log() instead of alert() for dev stuff like this. ;)