جلو گیری از رفررش شدن صفحه وب
من یک فرم دارم که یک رشته ای رو از کار بر میگیره و پس از استفاده از دکمه داخل فورم قراره اونو برام پردازش کنه بدون اینکه صفحه رفرش بشه . من از این روش استفاده کردم ولی کار نمی کنه
html
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web App</title>
<link rel="stylesheet" href="./stayle.css">
</head>
<body>
<div class="main">
<h1>
فروشگاه آنلاین
</h1>
<form class="PR">
<input type="text" name="PTitle" id="inp"><br>
<button id="add">افزودن محصول</button>
</form>
</div>
</body>java
let Form = document.querySelector(".PR");
form.addEventListener("submit", e => {
e.preventDefault()
});گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
دوست خوبم شما فایل جاوا اسکریپتت رو لینک نکردی اصلا
شک نکن مشکل از ارتباط صفحه با فایل جاوا اسکریپته
توی html که قرار دادی که من نمیبینم اگر اخر فایل هم هست مطمینن ادرسی چیزی اشتباه کردی که فایل لود نمیشه و کار نمیکنه
کد زیر رو کپی کن توی یک صفحه خالی و ببین به راحتی کار میکنه
همون کد خودته تست کردم و هیج مشکلی در دریافت اطلاعات به این شکل نداری
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="main">
<h1>فروشگاه آنلاین</h1>
<form class="PR" action="/test" method="get">
<input type="text" name="PTitle" id="inp" /><br />
<button id="add">افزودن محصول</button>
</form>
</div>
</body>
<script>
let form = document.querySelector(".PR");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const formProps = Object.fromEntries(formData);
console.log(formProps.PTitle);
console.log("my submit code works fine");
});
</script>
</html>
سلام دوست من 🖐
امیدوارم حالت خوب و عالی باشی✨
مشکل اصلی در کدت توی اسم متغیر JavaScript هست. شما از Form بجای form استفاده کردی. همچنین، تا زمانی که شما از طریق دکمه "افزودن محصول" فرم را ارسال نکنی، تغییری در صفحه اتفاق نمی‌افته. برای این کار، باید کدی بنویسی که وقتی دکمه افزودن محصول فشرده میشه ، مقدار ورودی رو پردازش کنه.
در زیر یک نمونه از کد JavaScript ویرایش کردم برات
let form = document.querySelector(".PR");
let input = document.getElementById("inp");
form.addEventListener("submit", e => {
e.preventDefault();
// در اینجا میتونی کد پردازش مقدار ورودی رو انجام بدی
let inputValue = input.value;
// مثال: نمایش مقدار ورودی در کنسول
console.log("مقدار ورودی: " + inputValue);
// اینجا می‌توانید کدی بنویسید تا مقدار ورودی را پردازش کند و صفحه را به روز کند بدون رفرش کردن
});در اینجا inputValue متغیری هست که مقدار ورودی را دریافت میکنه و شما میتونی کد پردازش مورد نظر خود را در قسمت مشخص شده قرار بدی . بعد از پردازش، میتونی اطلاعات را به صفحه اضافه کنی یا نمایش بدی بدون اینکه صفحه رفرش بشه.
امیدوارم پاسخم بهت کمک کرده باشه ❤️
موفق و پیروز باشی 🤘🌹
سلام
بله در استفاده از متغییر ها اشتباهی رخداده بود ولی همچنان مشکل وجود دارد و هیچ چیزی رو لاگ نمیکنه
من حتی از این کد هم استفاده کردم
JS
document.querySelector('#PR').addEventListener('click', function(e){
console.log(e.target.elements.PTitle.value)
e.target.elements.PTitle.value=''
})شما کلاس PR دارید که با دات یا همون نقطه باید پشتش مشخص کنی در کوئری سلکتور ولی اومدی شارپ گزاشتی
بخش زیر
document.querySelector(".PR")من به این شکل دیتای فرم رو نگرفتم واقعا ولی چیزی که سرج کردم میگه روش زیر رو تست کنی
function handleSubmit(e) {
e.preventDefault();
const formData = new FormData(e.target);
const formProps = Object.fromEntries(formData);
}شما وقتی داری فرم رو prevdefault میکنی عملا نیاز نداری فرم داشته باشی حتی و یک دکمه میزاری و onclick تعریف میکنی تمام
(توی این لیک اگر ببینی بعد از سابمیت شدن فرم اومده و از ایدی استفاده کرده و داده هاشو گرفته که چیز اشتباهی هم نیست)
حالا ب هر دلیل شما باز هم بعد از سابمیت میتونی با id بیایی و value مربوط به input رو دریافت کنی
و یا به روش بالا فرم رو داده های توش رو یکجا بگیری که به نظرم کار کنه و مشکلی توش نباشه
شما e.target رو console.log بگیر به جای اون چیزی که لاگ گرفتی ببین مشکلی نداشته باشی اصلا سابمیت بشه فرمت
ممکنه نیاز باشه دکمت type='submit' بگیره که سابمیت شه شاید مشکل از لاگ نیست و اصلا سابمیت نمیکنی
یه لاگ ساده بگیر مثلا console.log('hi') ببین اصلا وارد سابمیت میشی یا نه
نه console log یک رسته هم گرفتم کار نمر درجا صفحه رفرش شد ادرس بار تغییر کرد و چیزی در کونسول نمایش داده نشد
دوست خوبم شما فایل جاوا اسکریپتت رو لینک نکردی اصلا
شک نکن مشکل از ارتباط صفحه با فایل جاوا اسکریپته
توی html که قرار دادی که من نمیبینم اگر اخر فایل هم هست مطمینن ادرسی چیزی اشتباه کردی که فایل لود نمیشه و کار نمیکنه
کد زیر رو کپی کن توی یک صفحه خالی و ببین به راحتی کار میکنه
همون کد خودته تست کردم و هیج مشکلی در دریافت اطلاعات به این شکل نداری
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="main">
<h1>فروشگاه آنلاین</h1>
<form class="PR" action="/test" method="get">
<input type="text" name="PTitle" id="inp" /><br />
<button id="add">افزودن محصول</button>
</form>
</div>
</body>
<script>
let form = document.querySelector(".PR");
form.addEventListener("submit", (e) => {
e.preventDefault();
const formData = new FormData(e.target);
const formProps = Object.fromEntries(formData);
console.log(formProps.PTitle);
console.log("my submit code works fine");
});
</script>
</html>