CODEWITHSUNDEEP
jquery
Ben P. Dorsi-Todaro
Ben P. Dorsi-Todaro

Reputation: 321

Change text in text field according to link that has been clicked

I have the following. 

<div class="petsearch">
<input id="pet_search_input" class="" type="text" onkeypress="return isNumberKey(event)" name="query" autocomplete="off">
</div>

Now if the user types dog in the text field then the below link looks like the following.

<a id="pets" href="#dog" onclick="main()">
<img title="Dog" alt="Dog" src="./images/dog.png">
</a>

Now if the user types cat then the link appears but looks like the following. 

<a id="pets" href="#cat" onclick="main()">
<img title="Cat" alt="Cat" src="./images/cat.png">
</a>

So for that I have some jquery that looks like the following. 

$("#pets").click(function () {
$("#hidden_content").hide("fast");
$("#yourpet").hide("fast");
$("#pet_search_input").hide("fast");
});

Now I also have the following on the same page next to each image that a text field will appear as follows.

<input type="text" id="pet-type">

The above input will put have a word appear as the value when the user clicks on the link. So if the link is #cat then the input will get the value something like Feline when the link is clicked. If the link has #dog then the input will get the value of mut when the user clicks the link that has #dog.

My goal is to have the above input type text to display the name of the animal when the user click the link. So if the user clicks the link and it the link says dog then the input will update to say dog. I don't know how to achieve this. But it is worth noting that #dog can be ?dog or &dog. Can someone please help me with achieve this.

UPDATE Thanks to @Alvin for giving this code which means I'm getting closer to what I'm trying to achieve. 

$("#pets").click(function () {
    $("#hidden_content").hide("fast");
    $("#yourpet").hide("fast");
    $("#pet_search_input").hide("fast");
    var result = $("#pets").attr("href");
    result = result.replace("#","");
    $("#pet-type").attr("value",result);
});

But I think if should be something like the following. 

$("#pets").click(function () {
    $("#hidden_content").hide("fast");
    $("#yourpet").hide("fast");
    $("#pet_search_input").hide("fast");
    if $("#pets").attr("href","#cat") then 
    $("pet-type".attr("value","Feline"); Else If
    if $("#pets").attr("href","#dog") then 
    $("pet-type".attr("value","mut");
});

The above code doesn't work but I think people should see what I'm trying to accomplish.

UPDATE I've also tried the following.

if $("#pets".attr("href","#cat"),$("#pet-type").attr("value","Feline");
if $("#pets".attr("href","#dog"),$("#pet-type").attr("value","Mut");

SOLVED CLOSED

Upvotes: 1

Views: 231

Answers (2)

Alvin Nguyen
Alvin Nguyen

Reputation: 375

Change the javascript to

$("#pets").click(function () {
    $("#hidden_content").hide("fast");
    $("#yourpet").hide("fast");
    $("#pet_search_input").hide("fast");
    var result = $("#pets").attr("href");
    if (result == "#cat"){
        $("#pet-type").attr("value","Feline");
    }
    if (result == "#dog"){
        $("#pet-type").attr("value","Mut");
    }
});

Hope this helps.

Upvotes: 2

Thierry J
Thierry J

Reputation: 2189

If I have understood correctly what you want to do, this should respond your question:

// Called on link click
function main() {
    $("#pets-input").val($("#pets").attr("href").substr(1));
}

This will works assuming that the input is changed to <input type="text" id="pets-input"> to avoid id conflicts.

Upvotes: 0

Related Questions