pass javascript variable to modal popup form
1
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>javascript jquery ajax bootstrap-4
edited Nov 19 '18 at 10:17
Sunny Sharma
2,67042050
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
|
show 5 more comments
1
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>javascript jquery ajax bootstrap-4
edited Nov 19 '18 at 10:17
Sunny Sharma
2,67042050
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
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 classChange_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
1
1
1
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>javascript jquery ajax bootstrap-4
edited Nov 19 '18 at 10:17
Sunny Sharma
2,67042050
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
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
javascript jquery ajax bootstrap-4
edited Nov 19 '18 at 10:17
Sunny Sharma
2,67042050
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
edited Nov 19 '18 at 10:17
Sunny Sharma
2,67042050
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
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
2,67042050
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
asked Nov 19 '18 at 9:30
Jhansi PasupuletiJhansi Pasupuleti
95
95
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 classChange_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 classChange_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
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
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
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
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
0
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/)
answered Nov 19 '18 at 10:47
Sunny SharmaSunny 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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
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/)
answered Nov 19 '18 at 10:47
Sunny SharmaSunny Sharma
2,67042050
add a comment |
0
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/)
answered Nov 19 '18 at 10:47
Sunny SharmaSunny Sharma
2,67042050
add a comment |
0
0
0
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/)
answered Nov 19 '18 at 10:47
Sunny SharmaSunny 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/)
answered Nov 19 '18 at 10:47
Sunny SharmaSunny Sharma
2,67042050
edited Nov 19 '18 at 11:10
answered Nov 19 '18 at 10:47
Sunny SharmaSunny Sharma
2,67042050
answered Nov 19 '18 at 10:47
Sunny SharmaSunny Sharma
2,67042050
answered Nov 19 '18 at 10:47
Sunny SharmaSunny Sharma
2,67042050
2,67042050
add a comment |
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');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
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
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
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
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