Develop Reference

Change element when submit modal using Jquery

I'm trying change text and value of element when I submit modal which opened by clicked a tag event, but I still dont know how to do it. Picture below describe my idea.
I tried delete and replace html but it doesn't work, I am still stuck.
Thank you so much.
This is my code:
<div class="report-filter-selector">
<span class="badge rounded-pill bg-info">
<a
class="openEditModalBtn"
data-toggle="modal"
data-field="form_name"
data-value="request_all"
href="#editFilterSelectorModal"
>form name: request_all</a>
<button
class="selector-control-btn" id="selector-control-btn"
><i class="fas fa-times"></i>
</button>
</span>
<input type="hidden" name="form_name" value="request_all">
</div>
<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static"
tabindex="-1" aria-labelledby="editFilterSelectorModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
<button type="button" class="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="add_body">
<div class="message-content" name="error" id="add_err"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Condition:</label>
<select name="edit_field_selector" id="edit_field_selector"
onchange="loadValueByCondition();" disabled>
<option value="form_name">form_name</option>
<option value="prefecture">prefecture</option>
<option value="time">Time</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Value:</label>
<div id="edit_value_by_selector" class="edit_value_by_selector"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"
id="edit-filter-selector-submit"
name="edit-filter-selector-submit">保存
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal"
id="close-new-form">閉じる
</button>
</div>
</div>
</div>
</div>
As my fault, I forgot upload Javascript code, that is my code to create element and try to change after modal edit submit.
//this code create <a> element like number 1 in picture
$('#add-filter-selector-submit').click(function(e){
let condition = $('#add_field_selector').val();
let val = "example1";
let html = '<td><div class="report-filter-selector">';
html += '<span class="badge rounded-pill bg-info"><a class="openEditModalBtn" data-toggle="modal" data-field="'+condition+'" data-value="'+val+'" href="#editFilterSelectorModal">'+condition+':'+val+'</a> <button class="delete-selector-control-btn" id="delete-selector-control-btn"><i class="fas fa-times"></i></button></span>';
html += '<input type="hidden" name="'+condition+'" value="'+val+'">';
html += '</div></td>';
$("#filter_conditions_table tr:first").append(html);
});
//this code try to change element when submit edit modal:
$('#edit-filter-selector-submit').click(function(e){
// I dont know how to do next
});

I've had to assume that your second select is created using similar naming conventions to your first one in your example HTML. You can use the code below to
Select a button (replace #edit-filter-selector-submit") and run a function when it is clicked
Change the value of a select using .val() - you need to pass the value you want to switch to
// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {
// Change the value of the select item $("#edit_value_selector").val("2");
});
// Add event listener to the button
$("#edit-filter-selector-submit").click(function() {
// Change the value of the select item
$("#edit_value_selector").val("2");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="report-filter-selector">
<span class="badge rounded-pill bg-info">
<a
class="openEditModalBtn"
data-toggle="modal"
data-field="form_name"
data-value="request_all"
href="#editFilterSelectorModal"
>form name: request_all</a>
<button
class="selector-control-btn" id="selector-control-btn"
><i class="fas fa-times"></i>
</button>
</span>
<input type="hidden" name="form_name" value="request_all">
</div>
<!-- edit filter selector modal -->
<div class="modal fade" id="editFilterSelectorModal" data-backdrop="static" tabindex="-1" aria-labelledby="editFilterSelectorModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Edit condition </h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" id="add_body">
<div class="message-content" name="error" id="add_err"></div>
<div class="form-group">
<label for="recipient-name" class="col-form-label">Condition:</label>
<select name="edit_field_selector" id="edit_field_selector" onchange="loadValueByCondition();" disabled>
<option value="form_name">form_name</option>
<option value="prefecture">prefecture</option>
<option value="time">Time</option>
</select>
</div>
<div class="form-group">
<label for="message-text" class="col-form-label">Value:</label>
<div id="edit_value_by_selector" class="edit_value_by_selector">
<select name="edit_value_selector" id="edit_value_selector" onchange="loadValueByCondition();" disabled>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="edit-filter-selector-submit" name="edit-filter-selector-submit">Change
</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal" id="close-new-form">Close
</button>
</div>
</div>
</div>
</div>

Hi you can use this code with javascript.
Add function to button change:
function change() {
$("#edit_field_selector2").val('1').change()
$("#edit_field_selector").val('prefecture').change()
}

bootstrap modal form not submitted the user In rails 5

I have form inside modal and want to create a user. when I click on submit nothing happens.
How can I submit the modal form and save the content of the modal in other page in rails application with Ajax?
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="#getbootstrap">Open modal for #getbootstrap</button>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="text" class="col-form-label">firstname:</label>
<input class="form-control" id="text2"></input>
</div>
<label for="text" class="col-form-label">lastname:</label>
<input class="form-control" id="text2"></input>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">submit</button>
</div>
</div>

By clicking submit button the text field value will be passed to the controller via Ajax method
$(document).ready(function(){
$("#submit").click(function(){
alert($("#name").val());
});
$.ajax({
type: 'POST',
url: 'path/to/controller',
data: {'value' : $("#name").val() }
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input type="text" name="name" id="name"></input>
<input type="submit" id="submit"></input>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

click event does not fire in vue.js

in a modal i want to run a method when click on a button
here is the code of modal :
<div class="modal fade" id="new" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle"
aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">#lang('admin.new')</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="col-xs-12 create text-center font-rtl">
<div class="form-group form-md-line-input col-xs-12 text-center">
<label for="form_control_1">#lang('admin.type')</label>
<input type="text" class="form-control" name="type" id="form_control_1"
required v-model="da.type">
</div>
<div class="form-group form-md-line-input col-xs-12 ">
<label for="form_control_1">#lang('admin.status')</label>
<select class="form-control" name="active" required v-model="da.active">
<option value=""></option>
<option value="true">#lang('admin.active')</option>
<option value="false">#lang('admin.inactive')</option>
</select>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-primary bb" #click="post_type()">#lang('admin.save')</button>
</div>
</div>
</div>
</div>
and my method is define in external .ts file :
post_type() {
post_data(this.da).subscribe(function (x: any) {
if (x.status == "failure") {
// toastr[]("Gnome & Growl type non-blocking notifications", "Toastr Notifications")
toastr.error(x.message);
} else {
// console.log(result.status);
// location = "/admin/category?type_id="+this.type_id;
this.get_type_data();
$('#new').modal('toggle');
this.da.type = '';
this.da.active = '';
toastr.success(x.message);
}
});
},
i do this for other page and it work correctly but for this one does not work and even not firing .
what should i do?

Bootstrap modal change text in jQuery

Okay, I've searched and tried a couple of methods but none work.
I have a modal with forms and a select-options form. I also have normal plain text which I want to change in my jQuery.
Here is my code:
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="exampleModalLabel"> <center> Kupovina online </center></h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Ime i Prezime:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Adresa:</label>
<textarea class="form-control" id="message-text"></textarea>
</div>
<div class="form-group">
<label for="message-text" class="control-label">Telefon:</label>
<div id="thisIsanID"> <p> THIS TEXT NEEDS TO CHANGE </p> </div>
</div>
<label for="paketizaberi" class="control-label">Paket:</label>
<select class="form-control" id="paketizaberi">
<option value="PaketZvezda">Zvezda</option>
<option value="PaketSunce">Sunce</option>
<option value="PaketGalaksija">Galaksija</option>
</select>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Otkaži</button>
<button type="button" class="btn btn-primary" action="Update.php">Naruči</button>
</div>
</div>
</div>
</div>
And in my jQuery I tried:
$('#thisIsanID').find('p').html('Changed Text !!!!!');
(This is called when a button is clicked and an option is selected)
What am I missing ?

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

Get the value of Bootstrap.modal

I have this Bootstrap modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Max #pics per cluster:</label>
<input type="text" class="form-control" id="message-text">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="paramsOkay" type="button" class="btn btn-primary">
Okay
</button>
</div>
</div>
</div>
</div>
and I am doing this:
$('#exampleModal').on('click','#paramsOkay', function (e) {
console.log($('#recipient-name').text());
console.log(e);
});
which will fire when the "Okay" button is clicked, but the first console.log() is empty, and there I would expect to get user's input! The second console will log the event, but I don't really now how to extract the user's input from that...
How to get the value the user inputed, after the "Okay" value is clicked?

You must use of val() no text().
Change:
console.log($('#recipient-name').text());
To:
console.log($('#recipient-name').val());
Final code :
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title" id="exampleModalLabel">Input parameters</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Base URL to fill id with your data (optional):</label>
<input type="text" class="form-control" id="recipient-name" value="Test">
</div>
<div class="form-group">
<label for="message-text" class="form-control-label">Max #pics per cluster:</label>
<input type="text" class="form-control" id="message-text">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">
Close
</button>
<button id="paramsOkay" type="button" class="btn btn-primary">
Okay
</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#exampleModal').on('click','#paramsOkay', function (e) {
console.log($('#recipient-name').val());
//console.log(e);
});
})
</script>
</body>
</html>