CODEWITHSUNDEEP
jqueryajaxbootstrap-modal
hotstreak
hotstreak

Reputation: 1

Bootstrap modal form changes not being detected

I have a form in a bootstrap modal that I'm trying to use to edit record values. However, the changes are not being detected. When I edit any of the fields and save the modal, jquery's .serialize() function is still picking up the old values originally displayed in the modal. I confirmed that the new values are not being detected by changing values in the modal, then using jquery commands in the console to display the field's current values. So it's not the .serialize() function that's the problem. The browser (or jquery) just doesn't pick up the changes.

I have used modals on other parts of the program and they are working fine. So I've done comparisons but don't see anything that would make it work on one part of the program but not here.

Here's the original input from the modal:

<input type="text" class="form-control" id="immundesc" name="immundesc" value="original value">

I changed the value on the modal to "my changes" but the console still shows the original value:

$("#immundesc").val(); "original value"

Just some additional information. The modal is being launched from a link from a table that's ajax generated. I've had success with this in some other area in my program but by using a button from the table instead. Not sure if that would have anything to do with it.

Has anybody experienced anything similar to this?

Upvotes: 0

Views: 527

Answers (2)

hotstreak
hotstreak

Reputation: 1

I actually had 2 modals setup. One I use for adding records and the one that wasn't detecting changes I was using for edits. I did this because I am using the add modal for a lot of different inserts in different areas of my page. I thought it would be easier to separate adds and edits so my code would be better organized. I tried using the same modal for both adds and edits and it worked! It now detects the changes right away.

It seems that bootstrap or jquery doesn't like having 2 modals set up on a page. Does anybody know the reason for this or is aware of this limitation? If so, please share your knowledge so that other developers can avoid this issue.

Thanks!

Upvotes: 0

Alexander
Alexander

Reputation: 4527

I don't understand your trouble. If there is only one input with immundesc identificator in the DOM then it works finely. Try to use snippet below.

$("button").click(function() {
 console.log($("#immundesc").val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" class="form-control" id="immundesc" name="immundesc" value="original value">
<button>Change value and click Me!</button>

Check your page for duplicate of immundesc identifier.

Upvotes: 1

Related Questions