0

I have this code:

Search: <input type="text" id="fname" onkeyup="myfunction()">
<a id="sear" href="" target="_blank">Search</a>
<script>
function myFunction() {
var  x = document.getElementById("fname").value;
var url = "https://www.google.co.in/search?q=all+"+x+"&biw=1366&bih=643&source=lnms&tbm=isch";
document.getElementById("sear").href=url;
}
</script>

This code is changing into the following code when I add it to wordpress page editor and is not working.

Search: <input id="fname" type="text" />
<a id="sear" target="_blank"></a>Search
<script>// <![CDATA[
function myFunction() {
var x = document.getElementById("fname").value;
var url = "https://www.google.co.in/search?q=all+"+x+"&biw=1366&bih=643&source=lnms&tbm=isch";
document.getElementById("sear").href=url;
}
// ]]></script>

Is there a solution to make it work?

0

Put this markup where you would like to before footer. you can put this markup in page editor text mode too. But doing so will remain in that page alone. so place it in template files.

    Search: <input type="text" id="fname" >
    <a id="sear" href="" target="_blank">Search</a>

write a function and hook it to wp_footer, place the code in funcitons.php.

        function output_custom_script(){
          ?>
          <script>
           document.getElementById('fname').addEventListener('keyup', function() {
    var  x = document.getElementById("fname").value;
    var url = "https://www.google.co.in/search?q=all+"+x+"&biw=1366&bih=643&source=lnms&tbm=isch";
    document.getElementById("sear").href=url;
}, false);
          </script>
         <?php
        }
        add_action('wp_footer','output_custom_script');

Check this Js Fiddle

  • So you want me to add the script code that you have written in function.php and the code in page editor (I need it only on a single page) right? – Renz Joe David Nov 18 '15 at 12:22
  • yes, put the markup in your page editor and the functions in your current active theme functions.php – WPTC-Troop Nov 18 '15 at 12:27
  • once you see this works. you can even output the script on particular page with page id using is_page() function condition. – WPTC-Troop Nov 18 '15 at 12:29
  • Did that but on clicking the link, it is loading the same page. The google search window is not opening. – Renz Joe David Nov 18 '15 at 12:32
  • Its looks like you have an JS error too. Please use the updated code in my answer – WPTC-Troop Nov 18 '15 at 14:39
0

Don't use script in post editor.

Go to ->Appearance > Editor -> From right side bar select header.php and paste this code :

<script>
function myFunction() {
var  x = document.getElementById("fname").value;
var url = "https://www.google.co.in/search?q=all+"+x+"&biw=1366&bih=643&source=lnms&tbm=isch";
document.getElementById("sear").href=url;
}
</script>

in header.php before closing tag of head </head>

  • Yes, I copied the script to header. The code still is not working and changes to: " Search: <input id="fname" type="text" /> <a id="sear" target="_blank"></a>Search " – Renz Joe David Nov 18 '15 at 11:30
  • What you are copying header.php ? – daniyalahmad Nov 18 '15 at 11:32
  • I copied the script part that you have shown to the header and the code to the wordpress page editor. I need that to be in the body. – Renz Joe David Nov 18 '15 at 11:34
  • Copy script in header use html in post editor by clicking on "Text" from right side and after that don't click on visual. – daniyalahmad Nov 18 '15 at 11:36
  • Tried that and now the link become clickable, but on click, it is loading the same page and not the google search – Renz Joe David Nov 18 '15 at 11:56

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.