CODEWITHSUNDEEP
javascriptjqueryhtmlajax
user3415421
user3415421

Reputation: 215

how to create button dynamically and add the onclick event for html page

i have created one button in my javascript code, after clicking on this button it should go to the product.html 

var outputb2 = "<p align=right>"+ "<input type=button value=productandservices onClick=window.location=product.html>" + "</input>" +"</p>";
    $('#product').append(outputb2);

where product is the div id in the product.html.but when i click on this button product and services..its not going to this product.html.how can i do..?

Upvotes: 2

Views: 2005

Answers (7)

Hamed Ali Khan
Hamed Ali Khan

Reputation: 1118

Probably you need some escape characters in your code, it will work

var outputb2 = "<p 'align=right'>"+ "<input type='button' value='productandservices' onClick='window.location=\"product.html?someParam=hi\"'>" + "</input>" +"</p>";
$('#product').append(outputb2);

Upvotes: 3

R3tep
R3tep

Reputation: 12864

Try this :

var outputb2 = "<p align='right'>"+ 
                 "<input type='button' value='productandservices 'onClick='window.location=\"product.html\"' />" + 
               "</p>";
$('#product').append(outputb2);

Add ' like this : onClick='window.location=\"product.html\"'

Live demo

Upvotes: 2

user3563732
user3563732

Reputation: 31

right syntax to use: 

<input TYPE="button" value=productandservices onclick="window.location.href='http://www.wherever.com'">

Another option is to create a link in the button:

<button type="button"><a href="yourlink.com">Link link</a></button>

Then use CSS to style the link and button, so that the link takes up the entire space within the button (so there's no miss-clicking by the user):

button, button a{position:relative;}
button a{top:0;left:0;bottom:0;right:0;}

but the point of a link is to go to another page. So trying to make a button act like a link is the wrong solution. My suggestion is that you should use a link and style it to look like a button.

<a href="/page2>Continue</a>

Upvotes: 2

Chetan Gawai
Chetan Gawai

Reputation: 2401

Check this out

<script>
var outputb2 = "<p align=right>"+ "<input type=button id='productandservices' value=productandservices >" + "</input>" +"</p>";//added id
    $('#product').append(outputb2);

    $(document).ready(function()
    {

        $(document).on("click","#productandservices",function()
        {
            alert('clcik');
            window.location='product.html';
        });

    });

</script>

or

Enclose filename in quotes '

<script>
var outputb2 = "<p align=right>"+ "<input type=button id='productandservices' value=productandservices onClick=window.location='product.html' >" + "</input>" +"</p>";
    $('#product').append(outputb2);


</script>

Upvotes: 4

Tharaka Nuwan
Tharaka Nuwan

Reputation: 782

I don't know why you are using javascript for this, unless you are sending some data with the click event. there is a simple html code to do what you want.

<a href="product.html#product">product and services</a>

If you must use java-script try this

onclick="javascript:location.href='product.html#product'"

Upvotes: 4

sshet
sshet

Reputation: 1160

var outputb2 = "<p align=right>";
outputb2 +=  "<input type='button' value='productandservices' onClick='window.location=product.html'>"
outputb2 += "</p>";

$('#product').append(outputb2);

Upvotes: 3

paulalexandru
paulalexandru

Reputation: 9530

var outputb2 = "<p align='right'><input type='button' value='productandservices' onClick='window.location=product.html'></input></p>";
$('#product').append(outputb2);

Upvotes: 2

Related Questions