We Keep Coding

Trigger click on one button after user clicks on another jquery and flask

I am trying to trigger clicking on a submit button in a modal (which i will eventually hide) after a user clicks next as per the below figure:
I have tried to implement a jquery solution which I believe should work, but it doesn't, and I can't work out why. The code does not trigger the clicking on the submit button. I know that jquery is working and installed since I was able to use other scripts in my HTML. Any help or pointers on how to achieve the clicking of the submit button after the user clicks on next ("Weiter") would be really helpful. Here is my HTML (using bootstrap 5 for the modal):
<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data">
{{ form_1.csrf_token }}
<p>
{{ form_1.optimise_option.label(class="form-label") }}
{{ form_1.optimise_option(class="form-select form-select-sm") }}
</p>
{{ form_1.submit(class="btn btn-primary", id="form_1_submit") }}
<p id="test">This is some random text</p>
</form>
</div>
<div class="modal-footer">
<button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal" id="modal_1_confirm">Weiter</button>
<script src="{{ url_for('static', filename='js/scripts.js') }}"></script>
</div>
</div>
</div>
</div>
And here is my javascript found in my js/scripts.js folder:
$('#modal_1_confirm').click(function(){
$("#form_1_submit").click();
})
EDIT
As per an answer I am able to trigger the submit button by modifying the primary button HTML like this:
<button class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal" data-bs-dismiss="modal" id="modal_1_confirm" form="form_1">Weiter</button>
However, now the issue is that while I can collect the form data on the server side, the modal no longer moves to the next after "weiter" is clicked. This was being done using data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal".

JavaScript is not needed in order to make a button which is outside of a form act as a Submit button for that form.
Use the form attribute on your button element. <button type="button" form="#yourFormID"

You can try the following code:
<div class="modal fade" id="Modal_1_Toggle" aria-hidden="true" aria-labelledby="Modal_1_ToggleLabel" tabindex="-1">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<form method="POST" enctype="multipart/form-data">
<div class="modal-header">
<h5 class="modal-title" id="Modal_1_ToggleLabel">Stufe 1</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
{{ form_1.csrf_token }}
<p>
{{ form_1.optimise_option.label(class="form-label") }}
{{ form_1.optimise_option(class="form-select form-select-sm") }}
</p>
<p id="test">This is some random text</p>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-primary" data-bs-target="#Modal_2_Toggle" data-bs-toggle="modal"
data-bs-dismiss="modal" id="modal_1_confirm">Weiter</button>
</div>
</form>
</div>
</div>
</div>

Modal Not Showing Up on laravel

I've been making a crud application in laravel. The application was working fine until I decided to change some code. The modal was showing up when I was running the code earlier and when I tested a few hours ago it was just working fine. But now when I try to click on the add button, the url just changes and nothing shows up anymore. If anyone can help me I'll appreciate it. I've just been learning laravel for a few months now. Here's my code.
#extends('layouts.master')
#section('content')
<div class="container">
<div class="row p-3">
<div class="col-md-11 card p-3">
<h5 class="text-center text-primary">Products</h5>
<div class="form-group">
<a href="#" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
<i class="fa fa-plus"></i>
</a>
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endsection
I just want the modal to pop up when I click on the button. Even though nothing shows up on the modal as for now. The js and cdn links are included in my file.

Remove bs from data-bs-toggle & data-bs-target
<a href="#" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
<i class="fa fa-plus"></i>
</a>

I am trying to make seperate edit and delete on my CRM model but could not figure out how to bind those buttons with my field

I am trying to make separate edit and delete on my CRM model but could not figure out how to bind those buttons with my field although I have created the API for this in angular I need a bit help.
Thanks in advance
below is a bootstrap code of the edit and delete buttons
<div id="delete_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Delete Department</h4>
</div>
<div class="modal-body card-box">
<p>Are you sure want to delete this?</p>
<div class="m-t-20 text-left">
Close
<button type="submit" class="btn btn-danger" >Delete</button>
</div>
</div>
</div>
</div>
</div>
<div id="edit_department" class="modal custom-modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal" (click)="edit(list)">×</button>
<div class="modal-content modal-md">
<div class="modal-header">
<h4 class="modal-title">Edit Department</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label>Department Name <span class="text-danger">*</span></label>
<input class="form-control" value="IT Management" type="text">
</div>
<div class="m-t-20 text-center">
<button class="btn btn-primary btn-lg" (click)="edit(list)">Save Changes</button>
</div>
</form>
</div>
</div>
</div>
</div>

1: declare a property in your component eg: department,which store the current operate department object on edit button clicked
2: bind the property of department to edit dialog template
3: remove role="dialog" from your dialog template(beacuse you need to do something before dialog open,you must open dialog by yourself)
4: in your edit dialog button click function, you set property 'department' value to store current operate department,and append this code $('#edit_department').modal('show')

How to pass data to two bootstrap modal?

Hi i am performing crud operations on a table. So i have to perform two operations like reset password and to delete the entry. I have added a bootstrap modal to confirm the action. I am able to pass the value and use the first modal but when i click on second modal it does not fire up.
My code is as follow:-
<td>
<a href='#' data-href='modules/reset.php?id={$row['id']}' data-toggle='modal' data-target='#resetpassword' data-popup='tooltip' title='Reset Password'><i class='icon-lock2'></i></a>
<a href='#' data-href='modules/delete.php?id={$row['id']}' data-toggle='modal' data-target='#modal_delete' data-popup='tooltip' title='Delete'><i class='icon-trash'></i></a></li>
</td>
Modals:-
Delete password modal:
<div id="modal_delete" class="modal fade" style="font-weight: normal;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<i class="fa fa-warning fa-5x"></i>
</div>
<div>
<div class="row">
<div class="col-md-12 text-center">
<br/><h5>Are you sure you want to delete?</h5><br/>
</div>
<div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-lg btn-ok">Yes, delete it!</a>
</div>
</div>
</div>
</div>
Reset password modal:
<div id="resetpassword" class="modal fade" style="font-weight: normal;">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body">
<div class="row">
<div class="col-md-12 text-center">
<i class="fa fa-warning fa-5x"></i>
</div>
<div>
<div class="row">
<div class="col-md-12 text-center">
<br/><h5>Are you sure you want to reset password?</h5><br/>
</div>
<div>
<div class="modal-footer text-center">
<button type="button" class="btn btn-default btn-lg" data-dismiss="modal">Cancel</button>
<a class="btn btn-danger btn-lg btn-oks">Yes, reset it!</a>
</div>
</div>
</div>
</div>
Javascript:-
<script>
$('#modal_delete').on('show.bs.modal', function(e) {
$(this).find('.btn-ok').attr('href', $(e.relatedTarget).data('href'));
});
</script>
<script>
$('#resetpassword').on('show.bs.modal', function(e) {
$(this).find('.btn-oks').attr('href', $(e.relatedTarget).data('href'));
});
</script>
By this method only the delete modal works but the reset modal does not fire up. The modal whose javascript function is before only works. How to make both of them work. Any help would be highly appreciated.

Maybe you should enclose your script inside jquery on ready
$( document ).ready(function() {
//your javascript code
});

Some of your <div>s should be </div>. If you look carefully you will see that the reset password modal is actually within the delete password modal code.
EDIT: Slightly off topic, and I understand if you would prefer to roll your own, but have you tried SweetAlert? They have some nice looking alert boxes and it's pretty easy to use.

What would be the best way to pass a value to a modal?

I'm using Mobile Angular UI and cannot figure out how to pass a value to a modal.
// Button
This button is inside of an ng-repeat="item in vm.items" and needs item to be somehow passed to the modal.
<button class="btn btn-danger pull-right" ui-turn-on="modal">Remove</button>
// Modal
<div class="modal scrollable-content section" ui-if='modal' ui-state='modal'>
<div class="modal-backdrop in"></div>
<div class="modal-dialog">
<div class="modal-content">
<form role="form" name="note" autocomplete="off">
<div class="modal-header">
<button class="close"
ui-turn-off="modal">×</button>
<h4 class="modal-title">Are you sure?</h4>
</div>
<div class="modal-body">
<p>Are you sure you'd like to remove this item?</p>
</div>
<div class="modal-footer">
<button ui-turn-off="modal" class="btn btn-default">Cancel</button>
<button type="submit" ng-click="vm.remove(item); Ui.turnOff('modal')" class="btn btn-primary">Remove</button>
</div>
</form>
</div>
</div>
</div>
</div>

You can write an html tag (item) attribute with a value and read the value
var id = item.attributes['data-id'].value;

on button click, you also call a function like
<button class="btn btn-danger pull-right" ui-turn-on="modal"
ng-click="setItemID(item.itemID)">Remove</button>
And then create the setItemID(itemID) function into the angularjs controller
and put the itemID into a scope variable.
When user will click on the remove button, the setItemID function will be
called and the itemId will be assigned into the scope. Now at the time when
user click "Yes i want to remove this item", then use that defined itemID.
Hope you get your solution. If still have any problem then lets comment.