CODEWITHSUNDEEP
javascripthtml
Gerald Hughes
Gerald Hughes

Reputation: 6159

Html button doesn't redirect to link

I'm trying to create a button on html that when I press it to get redirected to http://example.com/mysite/?rand=1

What I tried so far is:

<form action="http://example.com/mysite/?rand=1">
    <div class="checkboxes" align="center">
        <input placeholder="TextArea" style="width: 296px; height: 30px;" type="text" autocomplete="off">
        <label for="x"><input type="checkbox" id="x" checked/><span> Just a checkbox 1 </span></label>
        <label for="y"><input type="checkbox" id="y" disabled/><span> Just a checkbox 2 </span></label>
        <button id="Button" type="submit">Press me</button>
</form>

I'm only redirected to http://example.com/mysite/?

I also tried with javascript like so:

<script "text/javascript">
    document.getElementById("Button").onclick = function () {
        location.href = "http://example.com/mysite/?rand=1";
        };
</script>

<form>
    <div class="checkboxes" align="center">
        <input placeholder="TextArea" style="width: 296px; height: 30px;" type="text" autocomplete="off">
        <label for="x"><input type="checkbox" id="x" checked/><span> Just a checkbox 1 </span></label>
        <label for="y"><input type="checkbox" id="y" disabled/><span> Just a checkbox 2 </span></label>
        <button id="Button">Press me</button>
</form>

The result is the same, I'm redirected to http://example.com/mysite/?

If I use other links to redirect, like google.com, etc, the redirect works just fine, but not with my actual site's link. The links works just fine if I open it in another tab

I'm not sure how to debug this, does anyone know any idea what the problem might be?

Upvotes: 1

Views: 1133

Answers (2)

Vinay Pratap Singh Bhadauria
Vinay Pratap Singh Bhadauria

Reputation: 9947

Your html is not correct

here it is the corrected one

<form action="http://example.com/mysite/?rand=1">
    <div class="checkboxes" align="center">
        <input placeholder="TextArea" style="width: 296px; height: 30px;" type="text" autocomplete="off" />
        <label for="x">
            <input type="checkbox" id="x" checked="checked" /><span> Just a checkbox 1 </span>

        </label>
        <label for="y">
            <input type="checkbox" id="y" disabled="disabled" /><span> Just a checkbox 2 </span>

        </label>
        <button id="Button" type="submit">Press me</button>
    </div>
</form>

Demo Fiddle

Upvotes: 2

Nisse Engstr&#246;m
Nisse Engstr&#246;m

Reputation: 4752

Your <input> elements need name attributes. The name is the parameter that ends up in the query string, while id is used for DOM manipulation and CSS. Use a hidden <input> to add the rand parameter:

<input type="hidden" name=rand" value="1">
<input placeholder="TextArea" name="text" style="width: 296px; height: 30px;" type="text" autocomplete="off">
<label for="x"><input type="checkbox" name="x" id="x" checked/><span> Just a checkbox 1 </span></label>
<label for="y"><input type="checkbox" name="y" id="y" disabled/><span> Just a checkbox 2 </span></label>

Upvotes: 1

Related Questions