1

I am new to JavaScript, HTML and jQuery. The backend object was sent to the frontend and a loop is displaying the objects in a table. I am using thymeleaf and Java to achieve this.

Once that is done I am having an update form for each object as a modal/popup which has its input fields populated with jQuery based on the fields that where populated by the loop on the list. You can see that in the code. I don't have access to the backend object in the modal so I need to access the data on the frontend.

I have successfully retrieved the id value of the object and successfully set the hidden input "thepostid" to that value. My dilemma is how do I append the value of this element after the update/ in the action field?

EDIT: I have to mention that I am aware that I can simply use the hidden input field and retrieve it in the backend, but I want to learn a new way of doing this.

<form class="forms-sample" id="formm" method="POST"
        enctype="multipart/form-data" action="/dashboard/showposts/update/"+ <-//HOW TO APPEND VALUE HERE?
          <input type="hidden" id="thepostid" name="thepostid">
     ////

function update(id) {

let _id=id.split("-").pop()
let rowid=`row-${_id}`;
let postid=`post-${_id}`;
let imageid=`image-${_id}`;

console.log(rowid);

let row=$("#"+rowid);
let postvalue=$("#"+postid).val();
let image=$("#"+imageid).val();

const title=row.find("td:eq(1)").text();
const tags=row.find("td:eq(4)").text();
const thepostid=row.find("td:eq(0)").text();

$("#title").val(title);
$("#tags").val(tags);
$("#content").val(postvalue);
$("#filename").val(image);
$("#thepostid").val(thepostid);

$("#mysimpleModal").css("display","block")
}
Jason Aller
  • 3,541
  • 28
  • 38
  • 38
helloApp
  • 449
  • 1
  • 4
  • 21

1 Answers1

1

As Carlos1232 suggested in the comments, you use jQuery's attribute-getting/setting method: .attr(). This works because the form's action is an attribute.

For instance, to add the string 'foo' to a form's action, you could do:

// <form action="example.com/">
const newPartToAdd = 'foo';
const originalUrl = $('form').attr('action');
$('form').attr('action', originalUrl + newPartToAdd);
// <form action="example.com/foo">

Now, when your form is submitted, it will pass the new data in that string as part of the URL. Presumably you'd want to use a real string, with data that you extracted from the page, but the principle is the same regardless.

However, what you really might be looking for here is the fetch built-in browser method (https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API). Alternatively, to stick with jQuery, check out the ajax, get, post, etc. methods.

These will let you make a request with any data, and you won't need to involve a form to do so.

machineghost
  • 33,529
  • 30
  • 159
  • 234
  • very nice answer, thanks alot, i did not know that Carlos1232 answer indicated this, as previously mentioned i am new to the frontend.Now everything works as expected after i appended the id.Can i please also get an upvote for my question? – helloApp Sep 04 '20 at 19:14
  • Heh, I'm glad I could help, but I'm not sure it's good etiquette to ask for upvotes here :) It was a fair question, so I gave you one ... but just maybe, in the future, let it happen organically. – machineghost Sep 04 '20 at 19:34