HTML input string with onclick function taking two parameters - not working

Question

Sorry if the question wording is bad, I'm not really sure how to describe it.

I have a button which, when clicked, does this:

function Save(id, projectID) {
        var url = "@Url.Content("~/Config/Detail?id=")" + id + "&projectID=" + projectID;
    var _options = {
        area: ['590px', '385px'],
        content: url
    }
    tools.openTopPage(_options);
};

If I manually enter values for id and project ID in the second line, it works, so I know there's no problem in this function.

However, when the function is called from an input string it doesn't work.

The string is here (being put into a htmlArray):

    htmlArray.push(
    "<td class='text-center'>
       <input type='button' class='form-btn' value='修改' 
           onclick=Save(" + item.id + ", " + item.projectID + ") />
       <input type='button' id='btn-delete' class='form-btn'
           value='删除' onclick=Delete(" + item.id + ") />
    </td>");

I thought the problem was due to the way the input string breaks and has variables item.id and item.projectID put into the Save() function, however it doesn't even work if I keep it simple. For example, the following doesn't work either:

htmlArray.push(
    "<td class='text-center'>
       <input type='button' class='form-btn' value='修改' 
           onclick=Save(6, 3) />
       <input type='button' id='btn-delete' class='form-btn'
           value='删除' onclick=Delete(" + item.id + ") />
    </td>");

The values 6 and 3 which I have used are the values I would expect to be given if using item.id and item.projectID.

Most interesting is that the HTML renders the same in the browser in both cases. The result looks like this:

So surely the issue is somewhere around the Save() function, but I don't know where.

If I simplify the Save() function to take only one parameter it works (e.g. "Save(" + item.id + ")" will work fine), so this is what leads me to believe it's messing up when dealing with two parameters.

Any input much appreciated, thanks.

onclick ="save(6, '', 3)" = "" is the problem, fix it

Deepak Dholiyan
– Deepak Dholiyan

2017-09-19 14:08:36 +00:00
Commented Sep 19, 2017 at 14:08 — Deepak Dholiyan
– Deepak Dholiyan, Commented Sep 19, 2017 at 14:08
Check your console for more

Deepak Dholiyan
– Deepak Dholiyan

2017-09-19 14:08:50 +00:00
Commented Sep 19, 2017 at 14:08 — Deepak Dholiyan
– Deepak Dholiyan, Commented Sep 19, 2017 at 14:08

Satish · Accepted Answer · 2017-09-19 14:36:57Z

5

Try

onclick="save('6','3')"

" after 6, make issue

Try

onclick="save('6','3')"

" after 6, make issue

" and ' make issue in JavaScript

last option is:

var parameters=String("'" + item.id + "','"+item.projectID+"'");

use this as

htmlArray.push(
    "<td class='text-center'>
       <input type='button' class='form-btn' value='修改' 

           onclick=Save("+parameters+") />

       <input type='button' id='btn-delete' class='form-btn'
           value='删除' onclick=Delete(" + item.id + ") />
    </td>");

looks stupid but I used it many times.

If any other option,welcome !!!

edited Sep 19, 2017 at 14:36

answered Sep 19, 2017 at 14:07

Satish

7261 gold badge12 silver badges23 bronze badges

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

2 Comments

Stuart Aitken Over a year ago

I've tried loads of variations and none of it works. As I said, Save(6, 3) doesn't work, whereas Save(3) is fine, so it seems to only have a problem when I put more than one parameter in. In this case, the only additional punctuation I'm using is a comma, so I don't see how the quotation mark is the issue.

Stuart Aitken Over a year ago

I'm an idiot. I managed to solve it last night using your advice, just after I posted the previous comment, but I couldn't comment again until now because stackoverflow suddenly became unavailable (probably because I'm in China... ha). Thanks for your advice, it worked, cheers!

TKoL · Accepted Answer · 2017-09-19 14:12:36Z

1

https://jsfiddle.net/6h73pxcv/

<input type='button' class='form-btn' value='修改' onclick="Save(6, 3)" />

onclick needs to have quotes around it. Also make sure "Save()" is globally available

answered Sep 19, 2017 at 14:12

TKoL

13.9k4 gold badges49 silver badges86 bronze badges

Comments

marquesm91 · Accepted Answer · 2017-09-19 14:45:17Z

1

If your problem is with multiple parameter why not use only one and threat item as a object? So instead of breaking items you could pass it all.

function Save(item) {
        var url = "@Url.Content("~/Config/Detail?id=")" + item.id + "&projectID=" + item.projectID;
    var _options = {
        area: ['590px', '385px'],
        content: url
    }
    tools.openTopPage(_options);
};

and in htmlArray:

htmlArray.push(
    "<td class='text-center'>
       <input type='button' class='form-btn' value='修改' 
           onclick=Save(" + item + ") />
       <input type='button' id='btn-delete' class='form-btn'
           value='删除' onclick=Delete(" + item.id + ") />
    </td>");

I know it is not what you want but is another way of thinking and can help you further.

UPDATE

Maybe if you switch some single and double quotes inside your htmlArray you may achieve your goal.

htmlArray.push(
        '<td class="text-center">
           <input type="button" class="form-btn" value="修改" 
               onclick="Save(' + item + ')" />
           <input type="button" id="btn-delete" class="form-btn"
               value="删除" onclick="Delete(' + item.id + ')" />
        </td>');

edited Sep 19, 2017 at 14:45

answered Sep 19, 2017 at 14:13

marquesm91

5557 silver badges24 bronze badges

4 Comments

Stuart Aitken Over a year ago

I've tried this already. I tried making a variable {/// saveString = item.id + ", " + item.projectID ///} then used that single variable in the input string. However, this has exactly the same problematic result when rendering in the browser. It once again comes up as {/// onclick ="save(6, '', 3)" = "" ///} Most interesting is that when I call {/// alert(saveString) ///} it prints 6, 3 , so that part is correct.

marquesm91 Over a year ago

@StuartAitken I made an update. Maybe if you change some quotes, you could achieve your goal.

Stuart Aitken Over a year ago

All solved now, and yeah it was a problem with the quotes. Cheers!

marquesm91 Over a year ago

@StuartAitken Glad could help ya! Good luck in your further projects! :)

Shiladitya · Accepted Answer · 2017-09-19 14:33:15Z

0

Here you go with a solution using ES6 standard

htmlArray.push(
  `<td class='text-center'>
     <input type='button' class='form-btn' value='修改' 
       onclick="Save('${item.id}, '${item.projectID}');" />
     <input type='button' id='btn-delete' class='form-btn'
       value='删除' onclick="Delete('${item.id}');" />
  </td>`);

Hope this will help you.

answered Sep 19, 2017 at 14:33

Shiladitya

12.2k17 gold badges29 silver badges43 bronze badges

Collectives™ on Stack Overflow

HTML input string with onclick function taking two parameters - not working

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related