আমার যদি এর মতো একটি ফর্ম থাকে,
<form action="/Car/Edit/17" id="myForm" method="post" name="myForm"> ... </form>
জাভাস্ক্রিপ্ট / jQuery দ্বারা অন্য ভিউতে পুনর্নির্দেশ না করে আমি কীভাবে এটি জমা দিতে পারি?
আমি স্ট্যাক ওভারফ্লো থেকে প্রচুর উত্তর পড়েছি, কিন্তু সেগুলি সমস্তই আমাকে পোস্ট ফাংশন দিয়ে ফিরে আসা দর্শনে পুনর্নির্দেশ করে।
উত্তর:
আপনি যা চান তা অর্জন করতে আপনার নীচের মতো jQuery অ্যাজাক্স ব্যবহার করতে হবে :
$('#myForm').submit(function(e){
e.preventDefault();
$.ajax({
url: '/Car/Edit/17/',
type: 'post',
data:$('#myForm').serialize(),
success:function(){
// Whatever you want to do after the form is successfully submitted
}
});
});
এটি ব্যবহার করে দেখুন:
function SubForm(e){
e.preventDefault();
var url = $(this).closest('form').attr('action'),
data = $(this).closest('form').serialize();
$.ajax({
url: url,
type: 'post',
data: data,
success: function(){
// Whatever you want to do after the form is successfully submitted
}
});
}
এটি নির্বিঘ্নে কাজ করেছে। আমি এই ফাংশন থেকে কলHtml.ActionLink(...)
function SubForm (){
$.ajax({
url: '/Person/Edit/@Model.Id/',
type: 'post',
data: $('#myForm').serialize(),
success: function(){
alert("worked");
}
});
}
@Html.ActionLink("Add a Report", "Create", "Reports", new { carId = Model.Id }, new { onclick = "FUNCTION_WHICH_SUBMITES_FORM()" })
function SubForm (){ alert("1"); //e.preventDefault(); $.ajax({ url:'/Car/Edit/@Model.Id/', type:'post', data:$('#myForm').serialize(), success:function(){ alert("fasf"); } }); }
আপনি actionঅদৃশ্য ফর্মটি পুনর্নির্দেশ করে তা অর্জন করতে পারেন <iframe>। এটির জন্য কোনও জাভাস্ক্রিপ্ট বা অন্য কোনও ধরণের স্ক্রিপ্টের প্রয়োজন নেই।
<iframe name="dummyframe" id="dummyframe" style="display: none;"></iframe>
<form action="submitscript.php" target="dummyframe">
<!-- Form body here -->
</form>
<input type='submit'...করতে <input type='reset'যোগonclick='document.forms["myForm"].submit();'>
iFrameআপনার পৃষ্ঠার নীচে একটি লুকানো রাখুন এবং targetএটি আপনার আকারে:
<iframe name="hiddenFrame" width="0" height="0" border="0" style="display: none;"></iframe>
<form action="/Car/Edit/17" id="myForm" method="post" name="myForm" target="hiddenFrame"> ... </form>
দ্রুত এবং সহজ। মনে রাখবেন যে targetবৈশিষ্ট্যটি এখনও ব্যাপকভাবে সমর্থিত (এবং এইচটিএমএল 5 তে সমর্থিত) রয়েছে, এটি এইচটিএমএল 4.01 এ অবমূল্যায়ন করা হয়েছিল।
সুতরাং আপনার ভবিষ্যত প্রমাণ হিসাবে সত্যই এজাক্স ব্যবহার করা উচিত।
targetসম্পূর্ণ বৈধ, সুতরাং এজেএক্স এখনও alচ্ছিক।
যেহেতু সমস্ত বর্তমান উত্তরগুলি jQuery বা ট্রিকসটি iframe সহ ব্যবহার করে, তাই অনুমান করা হয়েছে যে কেবল সরল জাভাস্ক্রিপ্ট সহ পদ্ধতি যুক্ত করার কোনও ক্ষতি নেই:
function formSubmit(event) {
var url = "/post/url/here";
var request = new XMLHttpRequest();
request.open('POST', url, true);
request.onload = function() { // request successful
// we can use server response to our request now
console.log(request.responseText);
};
request.onerror = function() {
// request failed
};
request.send(new FormData(event.target)); // create FormData from form that triggered event
event.preventDefault();
}
// and you can attach form submit event like this for example
function attachFormSubmitEvent(formId){
document.getElementById(formId).addEventListener("submit", formSubmit);
}
ঠিক আছে, আমি আপনাকে এটি করার একটি যাদুবিদ্যার উপায় বলব না কারণ এটি নেই। আপনার যদি কোনও ফর্ম উপাদানটির জন্য অ্যাকশন অ্যাট্রিবিউট সেট থাকে তবে এটি পুনর্নির্দেশ করবে।
আপনি যদি এটি পুনঃনির্দেশ করতে না চান তবে কোনও ক্রিয়া সেট করে নিবেন না onsubmit="someFunction();"
আপনার someFunction()আপনি (AJAX সঙ্গে বা না হোক) যা চাও না, এবং শেষ, আপনি যোগ return false;ফর্মটি জমা দিতে না ব্রাউজার বলতে ...
এটি করতে আপনার অ্যাজাক্স দরকার। এটার মতো কিছু:
$(document).ready(function(){
$("#myform").on('submit', function(){
var name = $("#name").val();
var email = $("#email").val();
var password = $("#password").val();
var contact = $("#contact").val();
var dataString = 'name1=' + name + '&email1=' + email + '&password1=' + password + '&contact1=' + contact;
if(name=='' || email=='' || password=='' || contact=='')
{
alert("Please fill in all fields");
}
else
{
// Ajax code to submit form.
$.ajax({
type: "POST",
url: "ajaxsubmit.php",
data: dataString,
cache: false,
success: function(result){
alert(result);
}
});
}
return false;
});
});
২০২০ সালের হিসাবে ওয়ান-লাইনারের সমাধান, যদি আপনার ডেটাটি এই হিসাবে প্রেরণ করা multipart/form-dataনা হয় application/x-www-form-urlencoded:
<form onsubmit='return false'>
<!-- ... -->
</form>
action="...", এটি কার্যকরভাবে পৃষ্ঠা স্যুইচটিকে বাধা দেয়, তবে পুরো নেটওয়ার্ক জুড়ে ডেটা জমা দেওয়াও প্রতিরোধ করে।
JQuery এর postফাংশন দেখুন।
আমি একটি বোতাম তৈরি করব এবং একটি onClickListener( $('#button').on('click', function(){});) সেট করে ফাংশনে ডেটা প্রেরণ করব।
এছাড়াও, preventDefaultjQuery এর ফাংশনটি দেখুন !
এখানে বর্ণিত হিসাবে ফর্মের বাইরে জমা বোতামটি সরিয়েও কাঙ্ক্ষিত প্রভাব অর্জন করা যেতে পারে:
পৃষ্ঠা পুনরায় লোড প্রতিরোধ এবং ফর্ম পুনঃনির্দেশ আজাজ / jquery জমা
এটার মত:
<form id="getPatientsForm">
Enter URL for patient server
<br/><br/>
<input name="forwardToUrl" type="hidden" value="/WEB-INF/jsp/patient/patientList.jsp" />
<input name="patientRootUrl" size="100"></input>
<br/><br/>
</form>
<button onclick="javascript:postGetPatientsForm();">Connect to Server</button>
এই স্নিপেট ব্যবহার করে, আপনি ফর্মটি জমা দিতে এবং পুনঃনির্দেশ এড়াতে পারেন। পরিবর্তে আপনি আর্গুমেন্ট হিসাবে সাফল্য ফাংশনটি পাস করতে পারেন এবং যা চান তা করতে পারেন।
function submitForm(form, successFn){
if (form.getAttribute("id") != '' || form.getAttribute("id") != null){
var id = form.getAttribute("id");
} else {
console.log("Form id attribute was not set; the form cannot be serialized");
}
$.ajax({
type: form.method,
url: form.action,
data: $(id).serializeArray(),
dataType: "json",
success: successFn,
//error: errorFn(data)
});
}
এবং তারপরে ঠিক করুন:
var formElement = document.getElementById("yourForm");
submitForm(formElement, function() {
console.log("Form submitted");
});
আপনি যদি পিছনের প্রান্তটি নিয়ন্ত্রণ করেন তবে তার response.redirectপরিবর্তে এর মতো কিছু ব্যবহার করুন response.send।
আপনি এর জন্য কাস্টম এইচটিএমএল পৃষ্ঠাগুলি তৈরি করতে পারেন বা আপনার ইতিমধ্যে কিছুতে পুনর্নির্দেশ করতে পারেন।
এক্সপ্রেস.জেজেসে:
const handler = (req, res) => {
const { body } = req
handleResponse(body)
.then(data => {
console.log(data)
res.redirect('https://yoursite.com/ok.html')
})
.catch(err => {
console.log(err)
res.redirect('https://yoursite.com/err.html')
})
}
...
app.post('/endpoint', handler)