CODEWITHSUNDEEP
javascriptjqueryhtml
Ch Hamza Javed
Ch Hamza Javed

Reputation: 330

Press enter from text box to open link

I have a script which uses two text boxes to generate link onkeyup, if the user is in textbox 1 (All Others) and after typing some text he press enter key then "All cat link - sometext 1" generated link should be clicked, if he is in the "Category main" textbox and enters some text then he presses enter key 'Main Cat link - sometext 2' link should be clicked

function allcat(e) {
  var myVar = jQuery('#allcat').val();
  jQuery("#anchor").html("<a target='_blank' href='http://www.example.com/page.php?search=" + myVar + "&order=DESC'>All cat Link - " + myVar + "</a>");
  return false;
}

function catMain(e) {
  var myVar = jQuery('#catMain').val();
  jQuery("#anchorMain").html("<a target='_blank' href='http://www.example.com/page.php?category=main&search=" + myVar + "&order=DESC'>Main Cat Link - " + myVar + "</a>");
  return false;
}

jQuery(document).keyup(function(event) {
  if (event.keyCode == 13) {
    jQuery("#anchorMain").trigger('click');     
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<h1>Generate Link</h1>
<table border="0">
  <tr>
    <td>All Others</td>
    <td>
      <input type="text" size="50" name="allcat" id="allcat" onkeyup="allcat()">
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Category main</td>
    <td>
      <input type="text" size="50" name="catMain" id="catMain" onkeyup="catMain()">
    </td>
  </tr>
</table>

<hr><br>

<span id="anchor">All Category</span><br><br><br>
<span id="anchorMain">Cat main</span>

Upvotes: 1

Views: 690

Answers (3)

pbuck
pbuck

Reputation: 4551

on final keyup, don't click on #anchorMain (which as Rory says, is a span), click on #anchorMain>a

jQuery(document).keyup(function(event) {
      if (event.keyCode == 13) {
          if (event.target.id === 'catMain') {
              jQuery("#anchorMain a")[0].click();     
          } else if (event.target.id === 'allcat') {
              jQuery("#anchor a")[0].click();     
          }
      }
});

Note the addition of [0] to the jquery.click(). The problem is jQuery().click() will call event handlers registered on the element. Alas, navigation isn't jquery-type registered handler. By doing jQuery("#anchorMain a")[0] you're getting the DOM element, upon which you're calling the DOM .click()... which will do what you want.

Finally, you need to figure out "which" link to click on, when the user presses enter. You can do that from the document level, by looking at event.target.

Upvotes: 1

Shiladitya
Shiladitya

Reputation: 12181

Here you go with a solution https://jsfiddle.net/L2n6esnc/

allcat = function(e) {
  var myVar = jQuery('#allcat').val();
  $("#anchor").html(`<a target='_blank' href='http://www.example.com/page.php?search=${myVar}&order=DESC'>All cat Link - ${myVar}</a>`);
  return false;
}

catMain = function(e) {
  var myVar = jQuery('#catMain').val();
  $("#anchorMain").html(`<a target='_blank' href='http://www.example.com/page.php?category=main&search=${myVar}&order=DESC'>Main Cat Link - ${myVar}</a>`);
  return false;
}

$('input[type="text"]').keyup(function(event) {
  if (event.keyCode == 13) {
    window.open($('#' + $(this).attr('appendTo') + ' a').attr('href'), '_blank')
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1>Generate Link</h1>
<table border="0">
  <tr>
    <td>All Others</td>
    <td>
      <input type="text" size="50" name="allcat" id="allcat" onkeyup="allcat()" appendTo="anchor">
    </td>
  </tr>
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>Category main</td>
    <td>
      <input type="text" size="50" name="catMain" id="catMain" onkeyup="catMain()" appendTo="anchorMain">
    </td>
  </tr>
</table>

<hr><br>

<span id="anchor">All Category</span><br><br><br>
<span id="anchorMain">Cat main</span>

I've used ES6 backtick and ${} for using variable instead of double/single quotes.

Instead of triggering a click event, I've used window.open.

Hope this will help you.

Upvotes: 2

manish kumar
manish kumar

Reputation: 4700

you can use <form> tag and and get work done inside submit function like

<form action="someFunction()">
  First name:<br>
  <input type="text" name="firstname" value="Mickey">
  <br>
  Last name:<br>
  <input type="text" name="lastname" value="Mouse">
  <br><br>
  <input type="submit" value="Submit">
</form>

now you can retrieve the values inside the function and manipulate or do your work accordingly. Cleanest way to do i guess.

Upvotes: 0

Related Questions