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

Question

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..?

Use quotes properly "<input type='button' value='productandservices' onClick='window.location=product.html'>", However your code works jsfiddle.net/4F8RY — Satpal
– Satpal, Commented Apr 23, 2014 at 9:04
i tried everyone suggestion but still its not working..its not going to product.html.. — user3415421
– user3415421, Commented Apr 23, 2014 at 9:20

Tharaka Nuwan · Accepted Answer · 2014-04-23 09:15:52Z

4

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'"

answered Apr 23, 2014 at 9:15

Tharaka Nuwan

7822 gold badges7 silver badges22 bronze badges

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

Comments

Chetan Gawai · Accepted Answer · 2014-04-23 09:17:00Z

4

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>

edited Apr 23, 2014 at 9:17

answered Apr 23, 2014 at 9:11

Chetan Gawai

2,4011 gold badge27 silver badges36 bronze badges

Comments

Hamed Ali Khan · Accepted Answer · 2014-04-23 09:43:54Z

3

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);

edited Apr 23, 2014 at 9:43

answered Apr 23, 2014 at 9:33

Hamed Ali Khan

1,1283 gold badges26 silver badges32 bronze badges

4 Comments

user3415421 Over a year ago

thanks its working ...but one thing tell me i want to pass one parameter to product .html..how can i..?

Hamed Ali Khan Over a year ago

updated code added parameter to the url ?someParam=hi

user3415421 Over a year ago

hi..actually in my first page..i m searching some list.after clicking on the list item ..i m going to the respective list items profile page.this list item name is stored in text varable.now in the profile page i m going to this product.html means it should give information of product of that merchant only .so what i have to pass it to the url..window.location=product.html?...

Hamed Ali Khan Over a year ago

if you have var someVariable = "hi";, you can code as

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

hopefully you need to think and try on your own

sshet · Accepted Answer · 2014-04-23 09:07:26Z

3

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

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

answered Apr 23, 2014 at 9:07

sshet

1,1561 gold badge6 silver badges18 bronze badges

1 Comment

Dropout Over a year ago

Please provide an explanation.

paulalexandru · Accepted Answer · 2014-04-23 09:05:39Z

2

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

answered Apr 23, 2014 at 9:05

paulalexandru

9,5587 gold badges68 silver badges100 bronze badges

1 Comment

Dropout Over a year ago

Please provide explanation.

user3563732 · Accepted Answer · 2014-04-23 09:18:23Z

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>

R3tep · Accepted Answer · 2014-04-23 09:20:25Z

2

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

edited Apr 23, 2014 at 9:20

answered Apr 23, 2014 at 9:06

R3tep

12.9k10 gold badges52 silver badges77 bronze badges

Collectives™ on Stack Overflow

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

7 Answers 7

Comments

Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

Comments

Comments

4 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related