Help with changing button/link

Hi, you can catch click on "Out of stock" option in $.colors.change. In this function you can add condition, if selected value == Out of stock. And if yes, $(a button-element).text('send email ...').attr('href', 'change url').

e.g:

<script type="text/javascript">
    $(function(){

        $('.colors').on('change', function(e){
            var cat_id = e.target.value;
            var current = $(this).data("index");
            var select = $("select[data-index='"+current+"'][class='sizes']");

        if(select == xxx) {
            $('.butt').text('Send email').attr('href', '/');
        } else {
             // default button
            }

            $.get('/related-sizes?info=' + cat_id, function(data){
                select.empty();
                $.each(data, function(index, subcatObj){
                    select.append('<option value="'+subcatObj.size+'">'+subcatObj.size+'</option>');
                });
            });
        });
        var a = new Array();
        $(".colors").children("option").each(function(x){
            test = false;
            b = a[x] = $(this).val();
            for (i=0;i<a.length-1;i++){
                if (b ==a[i] && b != '') test =true;
            }
            if (test) $(this).remove();
        });
    });
</script>

@Mbezdek any chance you show me what you mean, I understand what you mean but a little unsure how to write it, JS not my string point

I added example :)

If you send me HTML code for SELECT BOX and for BUTTON, I write correct code for you :)

Sweet, thank you now I get it, then I can just add a class to the "add to bag" button to hide it also when out of stock?

This is the html for the button

<p><a href="/product/details/{!!  $item->id  !!}" class="btn btn-primary oos">View Details</a> or
                <button class="btn btn-success">Add to Bag</button></p>

Just want the add to bag changing if out of stock, otherwise show add to bag

So, in conditions you will have:

if($(this).find('option:selected').text() == 'Out of Stock') {
    $('button.atb').text('Send an email');
} else {
    $('button.atb').text('Add to Bag');
}

and in HTML:

 <button class="btn btn-success">Add to Bag</button></p>

change to:

 <button class="btn btn-success atb">Add to Bag</button></p>

So how would i change url to send to cart if add to bag and do a mailto link if out of stock?

You can change JS to:

if($(this).find('option:selected').text() == 'Out of Stock') {
    $('a.atb').text('Send an email').attr('href', '/link-to-send-email');
} else {
    $('a.atb').text('Add to Bag').attr('href', '/link-to-add-to-bad');
}

and HTML to:

<a href="/link-to-add-to-bag" class="btn btn-success atb">Add to Bag</a></p>

Sorry also should have stated that this button is within a from so want the add to bag to do the form submit, otherwise if out ot stock show button but with a link to mailto.

So:

if($(this).find('option:selected').text() == 'Out of Stock') {
    $('button.atb').text('Send an email').onClick(function(e) {
    e.preventDefaut();
    windows.location.replace('/url-to-send-email');
    });
} else {
    $('button.atb').text('Add to Bag').onClick(function(e) {
    $(form).submit(); // You can submit only specific form (e.g. by class)
    });
}

and HTML:

 <button class="btn btn-success atb">Add to Bag</button></p>

Ok done it like so:

if($(this).find('option:selected').text() == 'Out of Stock') {
                $('button.oos').text('Send an email').onClick(function(e) {
                    e.preventDefaut();
                    windows.location.replace('/url-to-send-email');
                });
            } else {
                $('button.oos').text('Add to Bag').onClick(function(e) {
                    $('.addToCart').submit(); // Added class to form
                });
            }

Button <button class="btn btn-success oos">Add to Bag</button>

This should work now correct?

Yes, test it!

No the button stays as Add to bag even though selected is Out of Stock

In function called on change select box, add

console.log('change')

And check result in console browser, is there something?

Returns

change
1:802 Uncaught TypeError: $(...).text(...).onClick is not a function

Or test this:

JS:

if($(this).find('option:selected').text() == 'Out of Stock') {
                $('button.oos').hide();
                $('a.se').show();
            } else {
                $('a.se').hide(); 
                $('button.oos').show();
            }
}

And to HTML add:

<a href="" class="btn btn-default se">Send an email</a>

Mmmm,

I have

$(".se").hide();

            if($(this).find('option:selected').text() == 'Out of Stock') {
                $('button.oos').hide();
                $('a.se').show();
            } else {
                $('a.se').hide();
                $('button.oos').show();
            }

then the extra email us button as <a href="mailto: sales@domain.co.uk?subject={!! $item->name !!} Enquiry" class="btn btn-primary se">Email us</a>

But just shows the email us button regardless.

Add default style for extra email button.

as:

<a href="mailto: sales@theclosetqueen.co.uk?subject={!! $item->name !!} Enquiry" class="btn btn-primary se" style="display: none;">Email us</a>

or add class for hide (e.g. .hide)

Can you edit reply last reply to get rid of the email address forgot i included that.

I also added $(".se").hide(); outside of the change function and that works but still not changing on out of stock.

Is now some error in console?

No error but after playing around I put this console.log($(this).find('option:selected').text()); which does show in console as Out of Stock, so not sure whats going on here.

And if you add console.log('change'); inside of the change function? Is in console something, after you change option?

Seems to be something with this check if($(this).find('option:selected').text() == 'Out of Stock') {

As I put some logs in there to test

if($(this).find('option:selected').text() == 'Out of Stock') {
                console.log('Yeah! its out of stock');
                $(".oos").hide();
                $(".se").show();
            } else {
                console.log('Not out of stock...continue');
                $(".se").hide();
                $(".oos").show();
            }

and when selecting out of stock the console shows the following:

Out of Stock 
1:795 Not out of stock...continue

And console.log($(this).find('option:selected').text()); really show Out of Stock?

Yes that shows out of stock when that is selected or the color thats thats selected.

Seems like its just skipping straight to: else { console.log('Not out of stock...continue'); $(".se").hide(); $(".oos").show(); }

Has option Out of Stock some value attribute? If yes, can you change condition from $(...).text() to $(...).val() == '... value?)

And please, send actual code: JS and HTML (selectbox with buttons)

Changing to val() shows the color, in this case black which is out of stock.

Generate HTML:

<select name="colour" class="colors" data-index="612">
                    <option value="" selected="selected">Please Select</option>
                                            <option value="612-Black"> Out of Stock </option>
                                            <option value="612-Mustard"> Mustard </option>
                                            <option value="612-Dark grey"> Dark grey </option>
                                    </select>

Buttons

<p><a href="/product/details/{!!  $item->id  !!}" class="btn btn-primary">View Details</a> or
                <button class="btn btn-success oos">Add to Bag</button></p>
            <a href="mailto: sales@domain.co.uk?subject={!!  $item->name  !!} Enquiry" class="btn btn-primary se">Email us</a>

JS

$(function(){
        $(".se").hide();

        $('.colors').on('change', function(e){
            var cat_id = e.target.value;
            var current = $(this).data("index");
            var select = $("select[data-index='"+current+"'][class='sizes']");

            $.get('/related-sizes?info=' + cat_id, function(data){
                select.empty();
                $.each(data, function(index, subcatObj){
                    select.append('<option value="'+subcatObj.size+'">'+subcatObj.size+'</option>');
                });
            });

            //console.log($(this).find('option:selected').val());

            if($(this).find('option:selected').text() == 'Out of Stock') {
                console.log('Yeah! its out of stock');
                $(".oos").hide();
                $(".se").show();
            } else {
                console.log('Not out of stock...continue');
                $(".se").hide();
                $(".oos").show();
            }

        });
        var a = new Array();
        $(".colors").children("option").each(function(x){
            test = false;
            b = a[x] = $(this).val();
            for (i=0;i<a.length-1;i++){
                if (b ==a[i] && b != '') test =true;
            }
            if (test) $(this).remove();
        });
    });

Sorted it....

if($(this).find('option:selected').val() == ' Out of Stock ') {

Then added some php to change value if its out of stock and now works

You have whitespace in your option text :D

So, change:

if($(this).find('option:selected').val() == '612-Black') {
                console.log('Yeah! its out of stock');
                $(".oos").hide();
                $(".se").show();
            } else {
                console.log('Not out of stock...continue');
                $(".se").hide();
                $(".oos").show();
            }
}