Opening new tab based on Javascript output (broken code)

Question

I’m making a hosting site, and I am trying to have a form where you can search a domain from a form. Check out the pseudocode to understand what I’m trying to do.

User types domain/search in box -> Presses DONE -> Opens new tab with the below format (with the user’s query)

https://example.com/cart.php?a=add&domain=register&query=QUERY_HERE

Here’s my code, but when the form submission, it searches domain=example.com (if I put example.com in the search box). What did I do wrong?

JavaScript (with JQuery):

$('.done').on('click', function() {

    var dataArray = $('#message').serializeArray();
  
    window.open('https://billing.zapprhosting.com/cart.php?a=add&domain=register&query=' + $.param( dataArray ));
  
  });

HTML Form:

<form id="message" target="_blank">
    <input id="domain-text" type="text" name="domain" placeholder="Write your domain name here.." />
</form>
<div class="button-center done">
     <a href="#"><p>SUBMIT</p></a>
</div>

SOLUTION: This took some more reworking of how I tackled the problem, but this is the final code which works.

JavaScript:

$("#btn").click( function() {
    var url = "https://billing.zapprhosting.com/cart.php?a=add&domain=register&query=" + $("#text").val();
    window.open(url);
});

HTML:

<input type="text" id="text" />
<input type="button" id="btn" value="Submit" />

Pretty simple page, but useful for scaling up to larger projects. Thanks for the help everyone :)

Answer 1

This took some more reworking of how I tackled the problem, but this is the final code which works.

JavaScript:

$("#btn").click( function() {
    var url = "https://billing.zapprhosting.com/cart.php?a=add&domain=register&query=" + $("#text").val();
    window.open(url);
});

HTML:

<input type="text" id="text" />
<input type="button" id="btn" value="Submit" />

Pretty simple page, but useful for scaling up to larger projects. Thanks for the help everyone :)