pass javascript variable to modal popup form

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.

$(document).on("click",".Change_Nodes",function(){



  cmd_name = $(this).attr("id");



  if(confirm("Sure to Update ""+cmd_name+"" Command Executable Nodes?"))

  {

    $('#custom_script_modal').modal('show');

  }

  else

  { return false; }

}

); //update: removed extra curly brace

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>

            </div>

            <div class="modal-body">

                <form method="POST" id="custom_script_modal">

                    <label class="control-label col-sm-4" for="cmd">List of Nodes</label>

                    <div class="col-sm-8 tab-pan fade in active">

                        <select size="3" name="popup_hostlist" id="popup_hostlist" class="dis_tab" multiple>

                            <?php    

                                //-----------Database                                                                           echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";           

                            ?>

                        </select>

                    </div>



                    <div class="form-group">

                        <button type="submit" class="btn btn-info form-control">Update</button>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

Maybe create a new function which would show the model and also take the argument. Then you can do whatever you like with the argument, inside the function.

– ByWaleed
Nov 19 '18 at 9:33

cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **

– Jhansi Pasupuleti
Nov 19 '18 at 9:40

where is the element with class Change_Nodes ?

– Mihai T
Nov 19 '18 at 9:43

You're missing a closing bracket at the end of your JavaScript )

– matt
Nov 19 '18 at 9:44

<td><a href="#" title="Add Script Executable Node(s)" class="Change_Nodes" name="Change_Nodes" id="'.$row["Command_Name"].'"><img id="edit" src="images/edit.png" align="EDIT"/></a></td> dats the class i'm calling through AJAX @MihaiT

– Jhansi Pasupuleti
Nov 19 '18 at 9:47

|
show 5 more comments

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.

$(document).on("click",".Change_Nodes",function(){



  cmd_name = $(this).attr("id");



  if(confirm("Sure to Update ""+cmd_name+"" Command Executable Nodes?"))

  {

    $('#custom_script_modal').modal('show');

  }

  else

  { return false; }

}

); //update: removed extra curly brace

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>

            </div>

            <div class="modal-body">

                <form method="POST" id="custom_script_modal">

                    <label class="control-label col-sm-4" for="cmd">List of Nodes</label>

                    <div class="col-sm-8 tab-pan fade in active">

                        <select size="3" name="popup_hostlist" id="popup_hostlist" class="dis_tab" multiple>

                            <?php    

                                //-----------Database                                                                           echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";           

                            ?>

                        </select>

                    </div>



                    <div class="form-group">

                        <button type="submit" class="btn btn-info form-control">Update</button>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

Maybe create a new function which would show the model and also take the argument. Then you can do whatever you like with the argument, inside the function.

– ByWaleed
Nov 19 '18 at 9:33

cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **

– Jhansi Pasupuleti
Nov 19 '18 at 9:40

where is the element with class Change_Nodes ?

– Mihai T
Nov 19 '18 at 9:43

You're missing a closing bracket at the end of your JavaScript )

– matt
Nov 19 '18 at 9:44

<td><a href="#" title="Add Script Executable Node(s)" class="Change_Nodes" name="Change_Nodes" id="'.$row["Command_Name"].'"><img id="edit" src="images/edit.png" align="EDIT"/></a></td> dats the class i'm calling through AJAX @MihaiT

– Jhansi Pasupuleti
Nov 19 '18 at 9:47

|
show 5 more comments

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.

$(document).on("click",".Change_Nodes",function(){



  cmd_name = $(this).attr("id");



  if(confirm("Sure to Update ""+cmd_name+"" Command Executable Nodes?"))

  {

    $('#custom_script_modal').modal('show');

  }

  else

  { return false; }

}

); //update: removed extra curly brace

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>

            </div>

            <div class="modal-body">

                <form method="POST" id="custom_script_modal">

                    <label class="control-label col-sm-4" for="cmd">List of Nodes</label>

                    <div class="col-sm-8 tab-pan fade in active">

                        <select size="3" name="popup_hostlist" id="popup_hostlist" class="dis_tab" multiple>

                            <?php    

                                //-----------Database                                                                           echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";           

                            ?>

                        </select>

                    </div>



                    <div class="form-group">

                        <button type="submit" class="btn btn-info form-control">Update</button>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

On click of .change_Nodes class I'm getting value of "id", On confirm box(Yes) I need to pass JavaScript value to modal popup named as #custom_script_modal.

$(document).on("click",".Change_Nodes",function(){



  cmd_name = $(this).attr("id");



  if(confirm("Sure to Update ""+cmd_name+"" Command Executable Nodes?"))

  {

    $('#custom_script_modal').modal('show');

  }

  else

  { return false; }

}

); //update: removed extra curly brace

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>

            </div>

            <div class="modal-body">

                <form method="POST" id="custom_script_modal">

                    <label class="control-label col-sm-4" for="cmd">List of Nodes</label>

                    <div class="col-sm-8 tab-pan fade in active">

                        <select size="3" name="popup_hostlist" id="popup_hostlist" class="dis_tab" multiple>

                            <?php    

                                //-----------Database                                                                           echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";           

                            ?>

                        </select>

                    </div>



                    <div class="form-group">

                        <button type="submit" class="btn btn-info form-control">Update</button>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

$(document).on("click",".Change_Nodes",function(){



  cmd_name = $(this).attr("id");



  if(confirm("Sure to Update ""+cmd_name+"" Command Executable Nodes?"))

  {

    $('#custom_script_modal').modal('show');

  }

  else

  { return false; }

}

); //update: removed extra curly brace

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>

            </div>

            <div class="modal-body">

                <form method="POST" id="custom_script_modal">

                    <label class="control-label col-sm-4" for="cmd">List of Nodes</label>

                    <div class="col-sm-8 tab-pan fade in active">

                        <select size="3" name="popup_hostlist" id="popup_hostlist" class="dis_tab" multiple>

                            <?php    

                                //-----------Database                                                                           echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";           

                            ?>

                        </select>

                    </div>



                    <div class="form-group">

                        <button type="submit" class="btn btn-info form-control">Update</button>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

$(document).on("click",".Change_Nodes",function(){



  cmd_name = $(this).attr("id");



  if(confirm("Sure to Update ""+cmd_name+"" Command Executable Nodes?"))

  {

    $('#custom_script_modal').modal('show');

  }

  else

  { return false; }

}

); //update: removed extra curly brace

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="modal fade" id="custom_script_modal" tabindex="-1" role="dialog" aria-hidden="true">

    <div class="modal-dialog modal-dialog-centered">

        <div class="modal-content">

            <div class="modal-header">

                <h4 class="modal-title text-center" id="custom_script_data_modal">Update Custom Script Executable Nodes</h4>

            </div>

            <div class="modal-body">

                <form method="POST" id="custom_script_modal">

                    <label class="control-label col-sm-4" for="cmd">List of Nodes</label>

                    <div class="col-sm-8 tab-pan fade in active">

                        <select size="3" name="popup_hostlist" id="popup_hostlist" class="dis_tab" multiple>

                            <?php    

                                //-----------Database                                                                           echo "<option value='". $row['NodeName'] . "'>". $row['NodeName'] ."</option>";           

                            ?>

                        </select>

                    </div>



                    <div class="form-group">

                        <button type="submit" class="btn btn-info form-control">Update</button>

                    </div>

                </form>

            </div>

            <div class="modal-footer">

                <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

            </div>

        </div>

    </div>

</div>

javascript jquery ajax bootstrap-4

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

edited Nov 19 '18 at 10:17

Sunny Sharma

2,67042050

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

asked Nov 19 '18 at 9:30

Jhansi Pasupuleti

Maybe create a new function which would show the model and also take the argument. Then you can do whatever you like with the argument, inside the function.

– ByWaleed
Nov 19 '18 at 9:33

cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **

– Jhansi Pasupuleti
Nov 19 '18 at 9:40

where is the element with class Change_Nodes ?

– Mihai T
Nov 19 '18 at 9:43

You're missing a closing bracket at the end of your JavaScript )

– matt
Nov 19 '18 at 9:44

<td><a href="#" title="Add Script Executable Node(s)" class="Change_Nodes" name="Change_Nodes" id="'.$row["Command_Name"].'"><img id="edit" src="images/edit.png" align="EDIT"/></a></td> dats the class i'm calling through AJAX @MihaiT

– Jhansi Pasupuleti
Nov 19 '18 at 9:47

|
show 5 more comments

Maybe create a new function which would show the model and also take the argument. Then you can do whatever you like with the argument, inside the function.

– ByWaleed
Nov 19 '18 at 9:33

cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **

– Jhansi Pasupuleti
Nov 19 '18 at 9:40

where is the element with class Change_Nodes ?

– Mihai T
Nov 19 '18 at 9:43

You're missing a closing bracket at the end of your JavaScript )

– matt
Nov 19 '18 at 9:44

<td><a href="#" title="Add Script Executable Node(s)" class="Change_Nodes" name="Change_Nodes" id="'.$row["Command_Name"].'"><img id="edit" src="images/edit.png" align="EDIT"/></a></td> dats the class i'm calling through AJAX @MihaiT

– Jhansi Pasupuleti
Nov 19 '18 at 9:47

Maybe create a new function which would show the model and also take the argument. Then you can do whatever you like with the argument, inside the function.

– ByWaleed
Nov 19 '18 at 9:33

cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **

– Jhansi Pasupuleti
Nov 19 '18 at 9:40

where is the element with class Change_Nodes ?

– Mihai T
Nov 19 '18 at 9:43

You're missing a closing bracket at the end of your JavaScript )

– matt
Nov 19 '18 at 9:44

<td><a href="#" title="Add Script Executable Node(s)" class="Change_Nodes" name="Change_Nodes" id="'.$row["Command_Name"].'"><img id="edit" src="images/edit.png" align="EDIT"/></a></td>

dats the class i'm calling through AJAX @MihaiT

– Jhansi Pasupuleti
Nov 19 '18 at 9:47

<td><a href="#" title="Add Script Executable Node(s)" class="Change_Nodes" name="Change_Nodes" id="'.$row["Command_Name"].'"><img id="edit" src="images/edit.png" align="EDIT"/></a></td>

dats the class i'm calling through AJAX @MihaiT

– Jhansi Pasupuleti
Nov 19 '18 at 9:47

|
show 5 more comments

1 Answer
1

active

oldest

votes

As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.

Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.

Check out the following JSFiddle and let me know if helps with your case:

(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

enter image description here

edited Nov 19 '18 at 11:10

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371687%2fpass-javascript-variable-to-modal-popup-form%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.

Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.

Check out the following JSFiddle and let me know if helps with your case:

(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

enter image description here

edited Nov 19 '18 at 11:10

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

add a comment |

As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.

Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.

Check out the following JSFiddle and let me know if helps with your case:

(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

enter image description here

edited Nov 19 '18 at 11:10

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

add a comment |

As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.

Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.

Check out the following JSFiddle and let me know if helps with your case:

(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

enter image description here

edited Nov 19 '18 at 11:10

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

As far I understand - you want to change dynamic values for "cmd_name" variable and change it while making any particular selection on the UI and re-use the same modal snippet for those actions.

Set a data attribute on actionable elements for "cmd_name" and access the same variable when prompting the user.

Check out the following JSFiddle and let me know if helps with your case:

(https://jsfiddle.net/sunnysharma/xpvt214o/950935/)

enter image description here

edited Nov 19 '18 at 11:10

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

edited Nov 19 '18 at 11:10

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

answered Nov 19 '18 at 10:47

Sunny Sharma

2,67042050

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Agfdhyk