javascript/jquery to change location.href

Question

This is my HTML

        <form id="procurar-novo">
          <input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
          <input id="procurar-submit" type="button" value="&rsaquo;">
        </form>

And this is my jQuery

<script type="text/javascript">
  $(document).ready(function(){
    $('#procurar').submit(function(e) {
      e.preventDefault();
      //edited
      window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
      return false;
    });
  });
</script>

The ideai is that by clicking on submit, the javascript/jquery will get the #procurar-submit value and add it on the URL and redirect the user.

The _blank still not works

Thanks in advance.

How about: <form action="http://psicotropicus.org" method="GET">? — zzzzBov
– zzzzBov, Commented Mar 6, 2013 at 20:02
I got redirected to psicotropicus.org/?procurar=aaa and in the same window. I should be redirected to psicotropicus.org/busca/aaa — Rafael
– Rafael, Commented Mar 6, 2013 at 20:12

score 2 · Accepted Answer · 2013-03-07 05:32:53Z

2

Use window.open with second parameter _blank

window.open('url', '_blank');

Try this also:

<script type="text/javascript">
  $(document).ready(function(){
    $('#procurar').submit(function(e) {
      e.preventDefault();
      //edited
      window.open = ('http://www.psicotropicus.org/'+'/busca'+encodeURIComponent($('#procurar-submit').val()), '_blank');
      return false;
    });
  });
</script>

Last edit:

<script>
  $(document).ready(function(){
    $('form#procurar-novo').submit(function(e) {
      //e.preventDefault();
      //edited
      var url = 'http://www.psicotropicus.org'+'/busca'+ encodeURIComponent('&' + $('input[name=procurar]').val());
       window.open(url, '_blank');
      return false;
    });
  });
</script>

<form id="procurar-novo">
          <input type="text" name="procurar" placeholder="Pesquisar no Site" value="">
          <input id="submitsss" type="submit" value="&rsaquo;">
</form>

Please consider names and ids of the form elements :)

edited Mar 7, 2013 at 5:32

answered Mar 6, 2013 at 19:45

user1646111

Sign up to request clarification or add additional context in comments.

6 Comments

Rafael Over a year ago

could you help me with this: The idea is that by clicking on submit, the javascript/jquery will get the #procurar-submit value and add it on the URL and redirect the user. Opening it on a new tab is just a secondary problem.

Rafael Over a year ago

it is still redirecting me to psicotropicus.org/busca?procurar=aa when I search "aa" instead of that link. and it's not opening in a new tab. but I guess we are almost there!

user1646111 Over a year ago

@Rafael: use different browser and check again, window.open is the only solution

Rafael Over a year ago

ok. but the URL is still not going right. does the input type make difference?

Rafael Over a year ago

I tried, didn't work. I've just edited my post for you to see the mark up and the last script I tried.

|

Kyle Weller · Accepted Answer · 2013-03-06 23:01:45Z

1

Looks like you don't have an action specified on your form tag. Why not just change the second input element from type=submit to type=button. Then you can bind a click event on that button and have full control of what happens next. You don't have to worry about preventing a default submit action. You could do the following:

$(document).ready(function(){
  $(document).on('click', '#procurar-submit', function() {
    window.location.href = 'http://www.psicotropicus.org/busca'+$('input[name="procurar"]').val();
  });
});

To open a new window like on a '_blank' you could change the code to be:

$(document).ready(function(){
  $(document).on('click', '#procurar-submit', function() {
    window.open('http://www.psicotropicus.org/busca'+$(input[name="procurar"]).val(), '_blank');
  });
});

But be careful with pop-up blockers

EDIT I changed the selector that gets the value of the text field. I would maybe add a class or id on that text field so it can be identified apart from others. See this fiddle

edited Mar 6, 2013 at 23:01

answered Mar 6, 2013 at 19:54

Kyle Weller

2,6239 gold badges37 silver badges45 bronze badges

10 Comments

Rafael Over a year ago

Thanks for the tip. I changed the type for "button" but the javascript doesn't seem to work still. I get redirect to rflbrz.zz.mu/psico/?procurar=lalala instead of what you wrote.

Kyle Weller Over a year ago

That domain isn't even close to the same as in the code? Is something else different?

Rafael Over a year ago

Actually, changing the type to button made it not work. When it was submit type, I had been at least redirectioned to the URL above.

Rafael Over a year ago

It's a domain I use to test stuff.

Kyle Weller Over a year ago

It just seems lazy to use an input type=submit when you are not submitting a form. If you really want to use a form, why not do something like @zzzzBov mentioned in the comments and actually use the action?

|

Collectives™ on Stack Overflow

javascript/jquery to change location.href

2 Answers 2

6 Comments

10 Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

10 Comments

Related