pass javascript variable to modal popup form











up vote
1
down vote

favorite












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>












share|improve this question









New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • 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
    2 days ago










  • cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **
    – Jhansi Pasupuleti
    2 days ago












  • where is the element with class Change_Nodes ?
    – Mihai T
    2 days ago










  • You're missing a closing bracket at the end of your JavaScript )
    – Matt
    2 days ago












  • <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
    2 days ago

















up vote
1
down vote

favorite












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>












share|improve this question









New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.




















  • 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
    2 days ago










  • cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **
    – Jhansi Pasupuleti
    2 days ago












  • where is the element with class Change_Nodes ?
    – Mihai T
    2 days ago










  • You're missing a closing bracket at the end of your JavaScript )
    – Matt
    2 days ago












  • <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
    2 days ago















up vote
1
down vote

favorite









up vote
1
down vote

favorite











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>












share|improve this question









New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











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






share|improve this question









New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.











share|improve this question









New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









share|improve this question




share|improve this question








edited 2 days ago









Sunny Sharma

2,60642050




2,60642050






New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.









asked 2 days ago









Jhansi Pasupuleti

64




64




New contributor




Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.





New contributor





Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.






Jhansi Pasupuleti is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.












  • 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
    2 days ago










  • cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **
    – Jhansi Pasupuleti
    2 days ago












  • where is the element with class Change_Nodes ?
    – Mihai T
    2 days ago










  • You're missing a closing bracket at the end of your JavaScript )
    – Matt
    2 days ago












  • <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
    2 days ago




















  • 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
    2 days ago










  • cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **
    – Jhansi Pasupuleti
    2 days ago












  • where is the element with class Change_Nodes ?
    – Mihai T
    2 days ago










  • You're missing a closing bracket at the end of your JavaScript )
    – Matt
    2 days ago












  • <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
    2 days ago


















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
2 days ago




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
2 days ago












cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **
– Jhansi Pasupuleti
2 days ago






cmd_name = $(this).attr("id"); alert(cmd_name); function cmd(cmd_name){ alert(cmd_name); } **cmd_name is undefined **
– Jhansi Pasupuleti
2 days ago














where is the element with class Change_Nodes ?
– Mihai T
2 days ago




where is the element with class Change_Nodes ?
– Mihai T
2 days ago












You're missing a closing bracket at the end of your JavaScript )
– Matt
2 days ago






You're missing a closing bracket at the end of your JavaScript )
– Matt
2 days ago














<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
2 days ago






<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
2 days ago














1 Answer
1






active

oldest

votes

















up vote
0
down vote













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



enter image description here



enter image description here



enter image description here






share|improve this answer























    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',
    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
    });


    }
    });






    Jhansi Pasupuleti is a new contributor. Be nice, and check out our Code of Conduct.










     

    draft saved


    draft discarded


















    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















    Required, but never shown

























    1 Answer
    1






    active

    oldest

    votes








    1 Answer
    1






    active

    oldest

    votes









    active

    oldest

    votes






    active

    oldest

    votes








    up vote
    0
    down vote













    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



    enter image description here



    enter image description here



    enter image description here






    share|improve this answer



























      up vote
      0
      down vote













      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



      enter image description here



      enter image description here



      enter image description here






      share|improve this answer

























        up vote
        0
        down vote










        up vote
        0
        down vote









        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



        enter image description here



        enter image description here



        enter image description here






        share|improve this answer














        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



        enter image description here



        enter image description here



        enter image description here







        share|improve this answer














        share|improve this answer



        share|improve this answer








        edited 2 days ago

























        answered 2 days ago









        Sunny Sharma

        2,60642050




        2,60642050






















            Jhansi Pasupuleti is a new contributor. Be nice, and check out our Code of Conduct.










             

            draft saved


            draft discarded


















            Jhansi Pasupuleti is a new contributor. Be nice, and check out our Code of Conduct.













            Jhansi Pasupuleti is a new contributor. Be nice, and check out our Code of Conduct.












            Jhansi Pasupuleti is a new contributor. Be nice, and check out our Code of Conduct.















             


            draft saved


            draft discarded














            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















            Required, but never shown





















































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown

































            Required, but never shown














            Required, but never shown












            Required, but never shown







            Required, but never shown







            Popular posts from this blog

            404 Error Contact Form 7 ajax form submitting

            How to know if a Active Directory user can login interactively

            Refactoring coordinates for Minecraft Pi buildings written in Python