Question 42697 in Html Question posted in
Some basic documentation can be found here.

JavaScript onclick redirecting not working – Html

Here you can see my website and error

when I click on button my website is not redirecting to that link only website start reloading

function send() {
  var name = document.getElementById('name').value;
  var email = document.getElementById('mail').value;
  var message = document.getElementById('descriptions').value;

  if (name && email && message === '') {
    window.navigator.vibrate('200');

    alert('Enter something🔍');
  } else {
    window.location.href = 'https://wa.me/919811192234/?text=' + 'Hy' +
      ' ' + 'I' + ' ' + 'Am' + ' ' + name + '                                                  ' + email.value + '                                              ' + message + '                   '
  }

  console.log(name && email && message)
}
<div class="contactus" id="contact">
  <p align="center">CONTACT US</p>
  <hr width="50%" size="5px" color="aqua">

  <form action="" id="demo-form">
    <input type="text" placeholder="Enter Name*" id="name">
    <input type="email" placeholder="Enter Email*" id="mail">

    <textarea placeholder="Message For Us*" id="descriptions" cols="30" rows="10"></textarea>

    <button type="submit" class="submit1" onclick="send()">Submit</button>
  </form>
</div>

I want that when user click on that button he will redirect to whatsapp

Tags:

4

Answers


  1. 0

    It seems like your button is submitting the form, what you can do is add a onSubmit handler on your form, which looks something like:

    <form onSubmit="send(event)">
</form>

    and then in your javascript:

    function send(event) {
    event.preventDefault();
  
    .... do something here ....
}
    Login or Signup to reply.
  2. 0

    You can use window.open(URL, "_blank") so that it will open that in a new tab and this will work.

    window.open("https://wa.me/919811192234/?text="+"Hy"+
    " "+"I"+" "+"Am"+" "+name+" ", "_blank");

    Login or Signup to reply.
  3. 0

    The button is (by default) type="submit". Clicking the button will submit its form owner by default.

    You are adding a click listener but don’t prevent the click’s default action of submitting its form owner.

    This means your redirection is being overriden by the submission’s action.

    To prevent this you should prevent the event’s default action by calling event.preventDefault():

    • Preventing the click event’s default action prevents the following submit event from dispatching.
    • Preventing the submit event’s default action prevents the form’s default action (i.e. ‘redirection’).

    Since you handle submission logic, you should use a submit listener. Using a submit listener on the form over a click listener on the button comes with some benefits:

    • Submission only happens once the form is valid (i.e. all required inputs are valid).
    • It conveys intention better: We listen for a submission of the form, not simply a click on the button. Clicking the button is only a means of submitting the form.
    Login or Signup to reply.
  4. 0

    Changing <button>‘s type attribute from submit to button will give you desired behavior, because it won’t fire submit event, this way default behavior(page reload) won’t happen.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search