3

I'm trying to get data from inputs of modal and to submit into database. Form has also input fields that aren't inside modal.

I wrote the modal inside <form> but it keep going outside it (I'm watching in inspect element), so I can't get those data.

Is there any chance I make this working?

Pseudo code:

<form> <label>Name</label> <input type="text" name="Name" /> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Check students</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">&times;</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <input type="checkbox" name="students[]" value="student1"> <input type="checkbox" name="students[]" value="student2"> <input type="checkbox" name="students[]" value="student3"> <input type="checkbox" name="students[]" value="student4"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- END MODAL --> <button type="submit" class="btn btn-primary" id="main-btn">Create</button> </form>
Improve this question
6
  • It looks like you need to check how your jquery and bootstrap.js are configured. Commented Feb 26, 2019 at 15:36
  • I think Im just using regular jquery and bootstrap.js. What do you mean? Commented Feb 26, 2019 at 15:38
  • codepen.io/brooksrelyt/pen/oVgYwd - This is a working codepen using your code Commented Feb 26, 2019 at 15:39
  • Hmm, it could be! Commented Feb 26, 2019 at 15:42
  • Try that, also wrapping your entire snippet of code in a form element may be more difficult than putting the form into the modal. Maybe someone else can chime in but I think you may want to trigger the modal and then input the student information. I could be wrong though Commented Feb 26, 2019 at 15:44

2 Answers 2

Reset to default
4

You should keep the tag open and close before the modal. 

<form id="myForm1"> <label>Name</label> <input type="text" name="Name" /> </form>

Then, add the attibute form to every input inside your modal.

<input form="myForm1" type="checkbox" name="students[]" value="student1">

Don't forget the submit button

[...] <!-- END MODAL --> <button type="submit" form="myForm1" class="btn btn-primary" id="main-btn">Create</button>
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

Thanks a lot! I spent one day for this issue. Now i got cleared using your answer @Edoardo Lobbiani
0

Any button inside form will automatically be considered as "submit" button

If the button is a submit button (it's inside/associated with a and doesn't have type="button"), specifies how to encode the form data that is submitted.

So i just added to the button that opens the modal the type="button" and it stopped from submitting the form.

Regarding the above answer - in my case the modal was outside the <form> already ... so i knew this wasn't it for me.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.