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>
javascript jquery ajax bootstrap-4
New contributor
|
show 5 more comments
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>
javascript jquery ajax bootstrap-4
New contributor
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 classChange_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
|
show 5 more comments
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>
javascript jquery ajax bootstrap-4
New contributor
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
New contributor
New contributor
edited 2 days ago
Sunny Sharma
2,60642050
2,60642050
New contributor
asked 2 days ago
Jhansi Pasupuleti
64
64
New contributor
New contributor
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 classChange_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
|
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
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 classChange_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
|
show 5 more comments
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/)
add a comment |
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/)
add a comment |
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/)
add a comment |
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/)
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/)
edited 2 days ago
answered 2 days ago
Sunny Sharma
2,60642050
2,60642050
add a comment |
add a comment |
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.
Jhansi Pasupuleti is a new contributor. Be nice, and check out our Code of Conduct.
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
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