CODEWITHSUNDEEP
javascriptjqueryhtml
sam orten
sam orten

Reputation: 206

How to search result when select drop down using jquery?

<script>
    $(document).ready(function(){
        $("#find_jobs").click(function(){
            $("#job").css("display","block");
            $("#freelancer").css("display","none");
        });
        $("#find_freelancer").click(function(){
            $("#job").css("display","none");
            $("#freelancer").css("display","block");
        });
        $(".submitss").click(function(){
            job_id = $(".job_search").attr('id');
            job_val = $(".job_search").val();
            alert(job_id);
            alert(job_val);
        });
    });
</script>
<form class="form-horizontal" role="form" method="post" id="myform">        
    <div class="input-group" id="header-search">
        <div class="input-group-btn">
            <div class="btn-group" role="group">
                <a href="javascript:void();" class="submitss" id="submitss"><i class="fa fa-search"></i></a>
                <div class="dropdown dropdown-lg">
                    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-expanded="false" style="margin-top: 10px;"><span class="caret"></span></button>
                    <div class="dropdown-menu dropdown-menu-left" role="menu">
                        <div class="form-group">
                            <ul>
                                <li><a href="javascript:void(0)" id="find_job" class="find_jobs" value="job">Find Jobs</a></li>
                                <li><a href="javascript:void(0)" id="find_freelancer" class="find_freelancer" value="freelancer">Find Freelancers</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <input type="text" id="job" class="form-control job_search" placeholder="Search Job" name="job_search" style="display:block;"/>
        <input type="text" id="freelancer" class="form-control freelancer_search" placeholder="Search Freelancer" name="freelancer_search" style="display:none;"/>
    </div>
</form>

In this code, I have a search box form with list ul Now, What am I doing here when I select find_job then search job input field active and If I selected find_freelancer then freelancer input field active. Now, What I required When I click on class="submitss" or press enter key then it shows job_id and job_val but if I select then it shows freelancer_id and freelancer_val.

So, How can I do this? Please help me.

Thank You

Upvotes: 0

Views: 195

Answers (1)

kostic017
kostic017

Reputation: 366

If I understood you correctly, this should do the job. Basically if input#job is visible show job, else show freelancer. I don't really see the need to use two different input fields, but ok.

function submit() {
    if ($("#job").css("display") === "block") {
        job_id = $(".job_search").attr('id');
        job_val = $(".job_search").val();
    } else {
        job_id = $(".freelancer_search").attr('id');
        job_val = $(".freelancer_search").val();
    }
    alert(job_id);
    alert(job_val);
}

$(document).ready(function(){
    $(window).keydown(function(event) {
        if (event.keyCode == 13) { // enter key
            submit();
            event.preventDefault();
            return false;
        }
    });

    $("#find_job").click(function () { // find_job not find_jobs
        $("#job").css("display", "block");
        $("#freelancer").css("display", "none");
    });

    $("#find_freelancer").click(function() {
        $("#job").css("display", "none");
        $("#freelancer").css("display", "block");
    });

    $(".submitss").click(submit);
});

Also

<a href="javascript:void();" class="submitss" id="submitss">

should be

<a href="javascript:void(0);" class="submitss" id="submitss">

or you get

Uncaught SyntaxError: Unexpected token )

Upvotes: 1

Related Questions