CODEWITHSUNDEEP
jqueryajaxlaravellaravel-5
Matthew
Matthew

Reputation: 1655

Dynamically changing input field in AJAX

I'm stuck on something I haven't run across before. I have the following code in my Laravel project:

<div class="claimDocuments">
                @foreach($claim->attachments as $ca)
                    @if(Storage::mimeType($ca->attachmentPath) == "application/pdf")
                        <div class="document">
                            <a href="{{Storage::disk('local')->url($ca->attachmentPath)}}">
                            <img src="/images/Circle-icons-document.svg.png" class="img-circle" alt="Shipment" height="80px" width="80px"><br>
                            </a>
                            <div class="documentTitle">


     <span class="fa fa-check"></span>
                                    <input value="{{$ca->title}}" class="form-control" name="title" type="text">
<input value="{{$ca->id}}" class="form-control" name="attachmentID" type="text">
                                </div>

                            </div>

                    @endif
                @endforeach
                </div>

So basically there can be multiple ".document"'s in my page. There's an input field with a checkmark in it and I would like to change the value in my database solely by typing in a new value and clicking the checkmark.

The problem is, I would like to do this with AJAX, but I'm not all too familiar with this's and such.

So what would be the appropriate way to click the checkmark and have something similar to the below code be triggered?

$.ajax({
            type:'POST',
            url: '/carrier/claims/files/updateFile',
            data: {
                'attachmentID': $('input[name=attachmentID]').val(),
                'title': $('input[name=title]').val(),
               '_token': $('input[name=_token]').val(),
            },
                success: function(data) {......

Upvotes: 0

Views: 78

Answers (1)

acdcjunior
acdcjunior

Reputation: 135762

You should really add a more specific class to the "checkmark" you are mentioning.

A solution is to listen for clicks on the checkmarks. When one of them is clicked, you "go up" to its div.document (via .closest()) parent and then find all the inputs from there (below that parent, via .find()).

Using the span's classes how they are now, it'd be something like:

$("span.fa.fa-check").click(function () {
  var checkMarkSpan = $(this);
  var parentDocumentDiv = checkMarkSpan.closest("div.document");

  // now do the Ajax. Notice how the inputs are searched below the div, not everywhere ($)
  $.ajax({
            type:'POST',
            url: '/carrier/claims/files/updateFile',
            data: {
                'attachmentID': parentDocumentDiv.find('input[name=attachmentID]').val(),
                'title': parentDocumentDiv.find('input[name=title]').val(),
               '_token': parentDocumentDiv.find('input[name=_token]').val(),
            },
            ...

});

Of course, if the "checkmark" is not the <span class="fa fa-check"></span> but something else, change the "span.fa.fa-check" to it.

Upvotes: 1

Related Questions