How to increment url ID parameter with onclick event

Question

Is it possible to increment the URL ID and open incremented page when a button is clicked in JavaScript?

For example, if the ID is http://www.someurl.com/index.php?id=17

When a button is clicked to load this iframe link:

http://www.someurl.com/index.php?id=18

<button onclick="increment()">Increment</button>
<div id="iframe">
    <script>
        var id = 17;
        
        var link='<iframe src="http://www.myurl.com/index.php?id=' + id + '  " height="600px" width="100%" />';

        
        function increment(){
        id++;
        document.getElementById('iframe').innerHTML = id + link;
}
    </script>
</div>

OnClick Id is incremneting but the content is still same...

Is it safe to assume that the url will be of the same format as given i.e. the only param will be id? Please include what you have tried so far. Take a look at stackoverflow.com/help/how-to-ask to improve the quality of your question. — dshgna, Mar 01 '16 at 05:00

dutiyesh · Answer 1 · 2016-03-01T04:48:05.780

HTML

<a href="http://www.someurl.com/index.php?id=10" id="nextPage">Next page</a>
<button onClick='increment()'>Increment</button>

Now divide the url into 2 variables, one will store still 'id' and another id's value

Javascript

var url = document.getElementById('nextPage').href;
var urlPart1 = url.split('=')[0]; //get the url till id
var urlParameter = url.split('=')[1]; //get the id paramerter
var parameter = parseInt(urlParameter); // convert the id parameter into string

function increment() {
   parameter += 1;
   var newURL = urlPart1 + "=" + parameter;
   document.getElementById('nextPage').href = newURL;
}

Working link : http://jsbin.com/pejasucuqu/edit?html,js,output

score 0 · Answer 2 · answered Mar 01 '16 at 04:55

You can fetch the id of the page using $_REQUEST or other. And then you can use it to open new window with incremented id value in url.

to learn how to open new window go through this link http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_win_open

dshgna · Answer 3 · 2016-03-01T07:51:49.827

0

Assuming that your url will always be of the given format( i.e. http://www.someurl.com/index.php?id=18), the following should work fine.

var start = 17;

$(".increment-btn").click(function() {
  start++;
  var next_url = "http://www.someurl.com/index.php?id=" + start;
  $('#iframe').attr('src', next_url)
});

<button class="increment-btn" type="button">Increment Page</button>
<iframe name="iframe" id="iframe" src=""></iframe>

edited Mar 01 '16 at 07:51

answered Mar 01 '16 at 05:10

dshgna

812
1
15
34

Thanks for your answer.. I made something like this..

On click ID is incrementing but the content of iframe is still same – user3836412 Mar 01 '16 at 06:07
Code in comments is unreadable. Please update your question to reflect the additional information. Is the id=17 the starting point? – dshgna Mar 01 '16 at 07:34
Check with the updated answer. Generally, it's a standard practice to separate your HTML and JS instead of lumping them together using – dshgna Mar 01 '16 at 07:53

How to increment url ID parameter with onclick event

3 Answers3