We Keep Coding

how can without refreshing pull data with ajax in django

I can post with ajax, but when I want to pull data without refreshing the page, I can only do it 2 times, then the button loses its function.
<div>
<input type="hidden" name="producecode" class="pcode" value="{{per.produceCode}}" />
<input type="hidden" name="useremail" class="uponequantity" value="{{user.username}}" />
<button class="btn btn-sm btn-primary upoq"><i class="fa fa-plus"></i></button></div>
and jquery
$.ajax({
type: "POST",
url: "/uponequantity/",
headers: { "X-CSRFToken": '{{csrf_token}}' },
data: {
"producecode":$(this).parent().find(".pcode").val(),
"useremail":$(".uponequantity").val(),
},
success: function() {
window.location.assign('/basket/'+"?b="+$(".uponequantity").val());
}
});
/*$.ajax({
url:'/baskett/'+"?b="+$(".uponequantity").val(),
headers: { "X-CSRFToken": '{{csrf_token}}' },
type:'POST',
success:function(result){
$('.basket').html(result);
}
});
*/
})

Just add another line to reference your second input same as the first.
$(".up").click(function(){
$(".prdtd").find("input:first- child").attr("value");
$(".pcode").val()
$(".uponequantity").val()//<-- new line for the second hidden value
}
-----------------------------------------
Update:
-----------------------------------------
OP has multiple buttons with the same class each in it's own div and wants to access the values within each div.
So, first off you need to change "pcode" from an id to class in order to get all instances. (id is for unique instances)
After that you need to be able to get the "pcode" & "uponequantity" that are associated with that button and one way of doing that is:
$(".up").click(function(){
$(this).parent().find(".pcode").val()
$(this).parent().find(".uponequantity").val()
}
Simply put, the this keyword references the clicked button.
You then get the direct parent element which would have the button and the hidden values as children.
Finally you get each specific child through the find command and do whatever you want with them.

If I understand your question correctly, you would like to get the value of both inputs in your callback.
It seems like you misspelt pdcode in your JavaScript.
Does the below code snippet help?
$(".up").click(function() {
const value1 = $(".pdcode").val();
const value2 = $(".uponequantity").val();
}

How do I pass Button Value as a variable in Ajax?

I have a problem. I want to exchange certain data using PHP, MySQL and Ajax.
To do this I always have to pass the ID of a field to my backend, so I can continue working with this ID.
How do I pass the value from my button to my URL in Ajax?
What do I have to consider?
row['id'] is my variable (PHP)
HTML Code:
<a class='commentSikayet'>
<button id='commentSikayet' name='commentSikayet' value='{$row['id']}'>
Şikayet et
</button>
</a>
Ajax:
$(document).ready(function () {
$("#commentSikayet").click(function () {
$.ajax({
url: 'report_comment.php',
type: 'POST',
data: {bar: $("#bar").val()},
success: function (result) {
alert('Erfolgreich gemeldet.');
}
});
});
});

Assuming there might be more than one data sets in your page I modified your example to the following snippet. Each buttons has a data-id attribute that identifies the current dataset (the id would be supplied through your PHP script as $row["id"]):
$("body").on("click","button", function(ev){
ev.preventDefault(); // prevent submitting a form ...
let data={cmt_id: $(this).data("id"),
value: $(this).prev().val()}
$.post("https://jsonplaceholder.typicode.com/comments",data)
.done(function (result) {
console.log("Erfolgreich gemeldet:",result);
});
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<div><input type="text" value="some text">
<button name="commentSikayet" data-id="123">Şikayet et</button></div>
<div><input type="text" value="some other text">
<button name="commentSikayet" data-id="124">Şikayet et</button></div>
<div><input type="text" value="more text">
<button name="commentSikayet" data-id="125">Şikayet et</button></div>
In your backend PHP script (taking the place of the above typicode-URL) you can pick up the values from the $_POST superglobal as
$_POST["cmt_id"]; // id value
$_POST["value"];. // actual text content

Since you're listening for the click event on the button, you can access it via this in your handler function.
Add the name / value pair to your AJAX data option
$("#commentSikayet").on("click", function (e) {
e.preventDefault();
$.post("report_comment.php", {
bar: $("#bar").val(),
[ this.name ]: this.value // add name / value in here
}).done(function (result) {
alert('Erfolgreich gemeldet.');
});
});
This will include commentSikayet=rowIdValue in the POST request body which you access on the PHP side via...
$rowId = $_POST["commentSikayet"];

html/javascript: Is there a way to force data inputted into a text input to go into its value attribute?

What i have is a div with text inputs. What i want to do is send the div's HTML code to the server to be used on another page like so:
$.ajax({
url: 'process.php',
type: 'POST',
data: {
html: $("#form").html()
},
success: function (data) {
}
});
The thing is, if a user types in some data into the text inputs, that data is lost since its not part of the HTML. Is there a way i can force this data into the HTML? eg by using javascript to edit each input's value attribute?
Thanks in advance

Try the input event:
$(document).on('input', 'input.your_input', function() {
var that = $(this);
that.attr('value', that.val());
});
Inspect the input element and try type something:
$(document).on('input', '#textInp', function() {
var that = $(this);
that.attr('value', that.val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<input type="text" id="textInp" />

You can try sending the input values via parameters in the ajax function.

Try to run this snippet before making the call,
$("#form :text").attr("value",funcion(){
return $(this).val();
});
Instead of binding change event to all the input elements initially you can add the attribute before sending them to server.

You can try like this:
$("input").on('change', function() {
$(this).attr('value', $(this).val());
});

jQuery get form which button is clicked?

<form method="POST" action="" id ="formaclient" >
<input name="fullname">
<input name="fullname1">
<input name="fullname2">
<input name="fullname3">
<input class="btn-update">
</form>
$(".btn-update").click(function (ev) {
ev.preventDefault();
var data = $(this).find("#formaclient").serialize();
console.log(data);
$.ajax({
type: 'POST',
url: 'demo/client_view_search_content.php',
data: $("#formaclient").serialize(),
success: function () {
alert('Success!')
},
error: function () {
alert('Failure!')
}
});
return false;
});
Something is wrong with
var data = $(this).find("#formaclient").serialize();
I'm not getting data, how to change var data = $(this).find("#formaclient").serialize(); that I will get data from form ?

Use closest() instead of find(). find() will check for the children only. While closest() will check for the parents
var data = $(this).closest("#formaclient").serialize();
Since the id is unique, you can directly get the form like this,
var data = $("#formaclient").serialize();
If you have multiple forms, use like this
var data = $(this).closest("form").serialize();

I think you are using .find() wrong, because .find() searches for element descendants(children).
I think you should use $("form#formaclient").serialize() in order to serialize data.

You are using this which is pointed to the .btn-update object. using .find() will check for the children of object only. use below to serialize the data :
var data = $("#formaclient").serialize();

.find() descends from the current element. Obviously, since there are no elements within the button, you won't be able to find the form.
Since you have the id of the form, why don't you just use it to locate the form?
$('#formaclient').serialize(); will do the trick.
Also, remember that all IDs must be unique, so you should not worry about mixing up the forms.

You don't need to find elements with specific id values - a simple $('#formaclient') will do fine. It will also avoid the need to serialize the form data twice as your code attempts to do at present.
Your end result should look like this:
$(".btn-update").click(function(ev) {
ev.preventDefault();
var myData = $('#formaclient').serialize();
console.log(myData);
$.ajax({
type: 'POST',
url: 'demo/client_view_search_content.php',
data: myData,
success: function () {
alert('Success!')
},
error: function () {
alert('Failure!')
}
});
return false;
});
As others have pointed out, trying to find an element will only search descendant elements from the one you start from (the button in your case).

How to get input text value using Jquery

I have the following code, in mydata.jsp value of q is empty. What is the correct way to pass value of inputId to mydata.jsp?
<input type="text" size="25" name="inputId" id="inputId" />
and Jquery script as
<script type="text/javascript">
$(function() {
$("#inputId").autocomplete({
source: "mydata.jsp?q="+$( "#inputId" ).val(),
select:function(event,ui) {
$("#hid").val(ui.item.email)
}
});
});
</script>

When you pass $( "#inputId" ).val() as an argument to .autocomplete(), you're getting the initial value from that field before anything has been typed. That would explain why it is empty.
If you use the string version of autocomplete, it can automatically add the typed value to the URL. See the doc for the string version of source here.
If you want the URL for the source to be a dynamically generated URL, then you can also pass a function as the source and the code in that function can generate the URL/alternatives. See the doc for the source option here.

$('#inputId').keyup(function()
{
var str=$(this).val();
if(str!='')
{
$.ajax({
type:"GET",
url:"mydata.jsp",
data:"str="+str,
success: function(data){
alert(data);
}
});
}
});
Try like this. hope it will give you some solution.