Disable anchor link until action is performed

Question

I have an <i> tag with:

<a class="welcome-page-left hidden-xs" href="#page-slider" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="welcome-page-right hidden-xs" href="#page-slider" data-slide="next"><i class="fa fa-chevron-right"></i></a>

This are just to "arrows" in each side of the screen. The layout of my page is "all in one" meaning that there is no reload for a new page, "Home"- "About" -"etc" pages are all in the same MAIN page and you just move around them with the arrows in the right and left side of the screen.

I have a file input tag in the homepage and i would like to disable this arrows Until the user submit's the file. This is my input tag:

<form  action="{% url "do_some_work" %}" method="POST"  enctype="multipart/form-data" class="custom-form-thing">
 {% csrf_token %}
     <div class="inputWrapper">
             <input id="some_file_input" type="file"  name="some_file" class="custom-input-thing" data-buttonName="btn-primary" data-icon="true">
     </div>
     <button type="submit" class="btn btn-default">Submit</button>
 </form>

I know nothing about javascript but with hel i managed to disable the submit button until the user chooses his/her file. I guess there is no much difference in this case with the arrows but i suck at javascript as i said.

Thanks in advance for any help.

Question: How could i disable this arrows until the user submits the file?

EDIT

This is how i disabled the submit button in the form, is to different to disable the tags?:

<script>

$('form').submit(function(event){
    validated = true;

    if ($('#some_file_input').get(0).files.length === 0) {
        validated = false;
        console.log("No files selected.");
        // Or some div with image showing
        var div = document.createElement('div');
        div.innerHTML = "<img src='{% static "wappApp/images/Icono_de_Alto.png"%}' classs= 'imgclass'>";

        // better to use CSS though - just set class
        div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
        document.body.appendChild(div);
        $('.myclass').finish().fadeIn("fast").delay(2000).fadeOut("slow");

    }

    if (validated != true) {
        event.preventDefault();
    }
});
</script>

It would be helpful if you provided a live code snippet or jsFiddle to illustrate the problem you're running into. — Maximillian Laumeister, Sep 23 '15 at 18:41
just added the code i used to disable a button, just want to know if it would be to different to disable the arrows — NachoMiguel, Sep 23 '15 at 18:42
Anchors cannot be disabled in the strict sense; you can apply `return false` and some styling to do so, however. — isherwood, Sep 23 '15 at 18:43

score 1 · Answer 1 · answered Sep 23 '15 at 18:44

1

This is a simple sample. You should narrow your selector for the specific anchor tags, or it will apply to all anchor, but so you can have an idea.

$('a').on('click', function(e){ 
    if (conditionNotMet) {
        e.preventDefault();
    }
});

answered Sep 23 '15 at 18:44

Bart Calixto

19,210
11
78
114

I added an id to my arrows (id="left") and i tried the code you suggested: ` – NachoMiguel Sep 23 '15 at 19:00
in your sample you have `function(e)` and then `event.preventDefault()`. Make sure if you use `e` then do `e.preventDefault()` otherwise, use `function(event)` then use `event.preventDefault()` – Bart Calixto Sep 24 '15 at 07:20
Either way, I think hiding the `` tags as @cylua2 suggested is a better approach. – Bart Calixto Sep 24 '15 at 07:22

score 1 · Accepted Answer · answered Sep 23 '15 at 18:50

This solution can't really determine whether the file has really uploaded to the server but it can determine whether an attempt has been made.

we need to hide the button in advance

<a class="welcome-page-left hidden-xs hidden " href="#page-slider" data-slide="prev"><i class="fa fa-chevron-left"></i></a>
<a class="welcome-page-right hidden-xs hidden " href="#page-slider" data-slide="next"><i class="fa fa-chevron-right"></i></a>

once the user submit the file, the arrows will appear

$(document).ready(function(){
    $(".custom-form-thing").submit(function() {
        $('a.hidden').removeClass('hidden');
    });
});

but the full solution might be more than just jQuery+CSS+HTML

Question: if i click submit button on the form with NO documents uploaded the arrows appear. I think the checking if the user uploads a file is neccessary — NachoMiguel, Sep 23 '15 at 19:17
pretty simple, just addd `if($('#some_file_input').val())` above `$('a.hidden').removeClass('hidden');` — cylua2, Sep 23 '15 at 19:23

Disable anchor link until action is performed

2 Answers2