আমার কাছে নিম্নলিখিত কোড রয়েছে:
<script type="text/javascript">
function SubmitForm()
{
form1.submit();
}
function ShowResponse()
{
}
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>
আমি এইচটিএমএল এর প্রতিক্রিয়া ক্যাপচার করতে চান form1.submit? আমি এটা কিভাবে করবো? আমি কি form1.submit পদ্ধতিতে কোনও কলব্যাক ফাংশন নিবন্ধন করতে পারি?
উত্তর:
আপনি সরল জাভাস্ক্রিপ্টের সাহায্যে সহজেই এটি করতে পারবেন না। আপনি যখন কোনও ফর্ম পোস্ট করেন, ফর্ম ইনপুটগুলি সার্ভারে প্রেরণ করা হয় এবং আপনার পৃষ্ঠাটি রিফ্রেশ হয় - সার্ভারের সাইডে ডেটা পরিচালনা করা হয়। এটি হ'ল, submit()ফাংশনটি আসলে কিছুই ফেরায় না, এটি কেবল সার্ভারে ফর্ম ডেটা প্রেরণ করে।
আপনি কি সত্যিই (ছাড়া পৃষ্ঠা রিফ্রেশ) জাভাস্ক্রিপ্ট প্রতিক্রিয়া পেতে চেয়েছিলেন, তাহলে আপনি AJAX এর ব্যবহার করতে হবে, এবং যখন আপনি AJAX ব্যবহার সম্পর্কে কথা বলা শুরু করবেন, আপনি করব প্রয়োজন একটি লাইব্রেরি ব্যবহার করতে। jQuery এখন পর্যন্ত সর্বাধিক জনপ্রিয় এবং আমার ব্যক্তিগত প্রিয়। ফর্ম নামক jQuery এর জন্য একটি দুর্দান্ত প্লাগইন রয়েছে যা এটি আপনার পছন্দ মতো শোনাচ্ছে ঠিক তা করবে।
আপনি কীভাবে jQuery এবং সেই প্লাগইন ব্যবহার করবেন তা এখানে রয়েছে:
$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
alert("The server says: " + response);
}
})
;var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
একটি অ্যাজাক্স বিকল্প হ'ল <iframe>আপনার ফর্মের লক্ষ্য হিসাবে একটি অদৃশ্য সেট করা <iframe>এবং এর onloadহ্যান্ডলারে থাকা সামগ্রীগুলি পড়া read তবে আজাক্স থাকাকালীন কেন বিরক্ত করবেন?
দ্রষ্টব্য: আমি কেবলমাত্র এই বিকল্পটি উল্লেখ করতে চেয়েছিলাম কারণ উত্তরগুলির কয়েকটি দাবি করেছে যে আজাক্স ছাড়াই এটি অর্জন করা অসম্ভব ।
<iframe>পোষ্টদের জন্য বৈধ ব্যবহারের কেস (কলব্যাক সহ parent)। ডাউনলোড এবং আপলোডের জন্য একইভাবে ...
অ- jQuery ভ্যানিলা জাভাস্ক্রিপ্ট উপায়, 12me21 এর মন্তব্য থেকে নেওয়া:
var xhr = new XMLHttpRequest();
xhr.open("POST", "/your/url/name.php");
xhr.onload = function(event){
alert("Success, server responded with: " + event.target.response); // raw response
};
// or onerror, onabort
var formData = new FormData(document.getElementById("myForm"));
xhr.send(formData);জন্য POST'ডিফল্ট বিষয়বস্তুর প্রকার যা মিলছে কিনা তা আমরা কি উপরে স্নিপেট মধ্যে পাঠাচ্ছি "অ্যাপ্লিকেশন / এক্স-WWW-ফর্ম-urlencoded" হয়। আপনি যদি "অন্যান্য জিনিস" প্রেরণ করতে চান বা কোনওভাবে এটি টুইট করতে চান তবে কিছু কৌতুকপূর্ণ কৌতুকপূর্ণ বিবরণের জন্য এখানে দেখুন।
<input type='button' onclick="submitForm(); return false;">অথবা আপনি মার্কাস 'উত্তর পছন্দ' submit 'ইভেন্টের জন্য একটি ইভেন্ট শ্রোতা যোগ করতে পারিনি: stackoverflow.com/a/51730069/32453
আমি এটি এইভাবে করছি এবং এর কাজ করছি।
$('#form').submit(function(){
$.ajax({
url: $('#form').attr('action'),
type: 'POST',
data : $('#form').serialize(),
success: function(){
console.log('form submitted.');
}
});
return false;
});event.preventDefault();( event= ফাংশন জমা দেওয়ার প্রথম যুক্তি) করতে চাইতে পারেন return false। মিথ্যা প্রত্যাবর্তন ব্রাউজারকে কেবল ফর্মটি জমা দেওয়া থেকে বিরত রাখে না তবে এটি গুরুত্বপূর্ণ হতে পারে এমন অন্যান্য পার্শ্ব-প্রতিক্রিয়াগুলি বন্ধ হতে পারে। সেখানে হয় প্রচুর এর প্রশ্ন এর সাথে সম্পর্কিত করার করেছেন।
FormData($("myform")[0])যদি কোনও ইনপুট টাইপ = ফাইল আপলোড করার চেষ্টা করছেন তবে আপনাকে ব্যবহারের প্রয়োজন হতে পারে ।
event.target.actionএবং $(event.target).serialize()পরিবর্তে $('#form').attr('action')এবং $('#form').serialize()।
ভবিষ্যতের ইন্টারনেট অনুসন্ধানকারী:
নতুন ব্রাউজারগুলির জন্য (2018 হিসাবে: ক্রোম, ফায়ারফক্স, সাফারি, অপেরা, এজ এবং সর্বাধিক মোবাইল ব্রাউজারগুলি, তবে আইআই নয়), fetchএকটি স্ট্যান্ডার্ড এপিআই যা অ্যাসিঙ্ক্রোনাস নেটওয়ার্ক কলকে সহজতর করে (যার জন্য আমরা প্রয়োজন XMLHttpRequestবা জিকুয়েরি ব্যবহার করি $.ajax)।
এখানে একটি traditionalতিহ্যবাহী ফর্ম:
<form id="myFormId" action="/api/process/form" method="post">
<!-- form fields here -->
<button type="submit">SubmitAction</button>
</form>যদি উপরের মতো কোনও ফর্ম আপনার হাতে দেওয়া হয় (বা আপনি এটি তৈরি করেছেন কারণ এটি শব্দার্থক এইচটিএমএল), তবে আপনি fetchকোনও ইভেন্ট শ্রোতার মধ্যে কোডটি নীচের মত মোড়ানো করতে পারেন :
document.forms['myFormId'].addEventListener('submit', (event) => {
event.preventDefault();
// TODO do something here to show user that form is being submitted
fetch(event.target.action, {
method: 'POST',
body: new URLSearchParams(new FormData(event.target)) // event.target is the form
}).then((resp) => {
return resp.json(); // or resp.text() or whatever the server sends
}).then((body) => {
// TODO handle body
}).catch((error) => {
// TODO handle error
});
});(অথবা, যদি আপনি কোনও মূল জমা দেওয়ার ইভেন্ট ছাড়াই ম্যানুয়ালি কল করতে চান তবে মূল পোস্টারটির মতো, কেবল fetchকোডটি সেখানে রেখে দিন এবং formব্যবহারের পরিবর্তে উপাদানটির একটি রেফারেন্স দিন event.target))
দস্তাবেজ:
আনুন: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
অন্যান্য: https://developer.mozilla.org/en-US/docs/Learn/HTML/ Forms/Send_forms_through_ জাভা স্ক্রিপ্ট 2018 এর সেই পৃষ্ঠাটিতে আনার (এখনও) উল্লেখ করা হয়নি। তবে এতে উল্লেখ করা হয়েছে যে লক্ষ্য = "মাইআইফ্রেম" কৌতুক হ্রাস করা হয়েছে। এবং এটিতে 'জমা দিন' ইভেন্টের জন্য form.addEventListener এর একটি উদাহরণও রয়েছে।
আমি নিশ্চিত নই যে আপনি যা বুঝতে পেরেছেন তা জমা () কী করে ...
আপনি যখন form1.submit();ফর্ম তথ্যটি ওয়েব সার্ভারে প্রেরণ করা হয়।
ওয়েব সার্ভার তার যা করা উচিত তা করবে এবং ক্লায়েন্টকে একেবারে নতুন ওয়েবপৃষ্ঠা ফিরিয়ে দেবে (সাধারণত কোনও কিছু পরিবর্তিত হয়ে একই পৃষ্ঠা)।
সুতরাং, কোনও রূপ নেই যে আপনি কোনও ফর্ম.সমনিট () ক্রিয়াকলাপটি "ধরতে" পারবেন।
কোনও কলব্যাক নেই। এটি একটি লিঙ্ক অনুসরণ মত।
আপনি যদি সার্ভারের প্রতিক্রিয়া ক্যাপচার করতে চান তবে এজ্যাক্সটি ব্যবহার করুন বা একটি ইফ্রামে পোস্ট করুন এবং যদি আইফ্রেমের onload()ইভেন্টের পরে সেখানে উপস্থিত হবে তবে তা গ্রহণ করুন ।
event.preventDefault()এইচটিএমএল ফর্মের ডিফল্ট submitইভেন্টটি আগুন না দেয় (যা পৃষ্ঠাকে সতেজকরণের দিকে নিয়ে যায়) তা নিশ্চিত করতে আপনি আপনার জমা দেওয়ার বোতামটির জন্য ক্লিক হ্যান্ডলারে ক্লিক করতে পারেন ।
অন্য বিকল্প হ্যাকিয়ার ফর্ম মার্কআপ ব্যবহার করা হবে: এটি এর ব্যবহার <form>এবং type="submit"এটি এখানে পছন্দসই আচরণের পথে চলেছে; এগুলি শেষ পর্যন্ত পৃষ্ঠা সতেজকারী ইভেন্টগুলিতে ক্লিক করে।
আপনি এখনও ব্যবহার করতে চান তাহলে <form>, এবং আপনি কাস্টম হ্যান্ডেলার ক্লিক লিখতে চাই না, আপনি jQuery এর ব্যবহার করতে পারেন ajaxজন্য প্রতিশ্রুতি পদ্ধতি প্রকাশক দ্বারা আপনার জন্য দূরে পদ্ধতি, যা সমগ্র সমস্যা বিমূর্ত success, errorইত্যাদি
পুনরুদ্ধার করতে, আপনি নিজের সমস্যার সমাধান করতে পারেন যে কোনও মাধ্যমে:
Using হ্যান্ডলিং ফাংশনটি ব্যবহার করে ডিফল্ট আচরণ রোধ করা event.preventDefault()
ডিফল্ট আচরণ নেই এমন উপাদান ব্যবহার করে (উদা <form> )
J jQuery ব্যবহার করে ajax
(আমি কেবল লক্ষ্য করেছি যে এই প্রশ্নটি ২০০৮ সালের, এটি আমার ফিডে কেন প্রকাশিত হয়েছিল তা নিশ্চিত নয়; যে কোনও হারে, আশা করি এটি একটি সুস্পষ্ট উত্তর)
এই সমস্যার জন্য এটি আমার কোড:
<form id="formoid" action="./demoText.php" title="" method="post">
<div>
<label class="title">First Name</label>
<input type="text" id="name" name="name" >
</div>
<div>
<input type="submit" id="submitButton" name="submitButton" value="Submit">
</div>
</form>
<script type='text/javascript'>
/* attach a submit handler to the form */
$("#formoid").submit(function(event) {
/* stop form from submitting normally */
event.preventDefault();
/* get the action attribute from the <form action=""> element */
var $form = $( this ), url = $form.attr( 'action' );
/* Send the data using post with element id name and name2*/
var posting = $.post( url, { name: $('#name').val()} );
/* Alerts the results */
posting.done(function( data ) {
alert('success');
});
});
</script>আপনি যদি ক্রোম ব্যবহার করে একটি এজেএক্স অনুরোধের আউটপুট ক্যাপচার করতে চান তবে আপনি এই সাধারণ পদক্ষেপগুলি অনুসরণ করতে পারেন:
@Rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ) দ্বারা উত্তর তৈরি করা , আমি ফর্ম পোস্ট ত্রুটি এবং সাফল্য পরিচালনা করি:
$('#formName').on('submit', function(event) {
event.preventDefault(); // or return false, your choice
$.ajax({
url: $(this).attr('action'),
type: 'post',
data: $(this).serialize(),
success: function(data, textStatus, jqXHR) {
// if success, HTML response is expected, so replace current
if(textStatus === 'success') {
// https://stackoverflow.com/a/1236378/4946681
var newDoc = document.open('text/html', 'replace');
newDoc.write(data);
newDoc.close();
}
}
}).fail(function(jqXHR, textStatus, errorThrown) {
if(jqXHR.status == 0 || jqXHR == 302) {
alert('Your session has ended due to inactivity after 10 minutes.\nPlease refresh this page, or close this window and log back in to system.');
} else {
alert('Unknown error returned while saving' + (typeof errorThrown == 'string' && errorThrown.trim().length > 0 ? ':\n' + errorThrown : ''));
}
});
});আমি ব্যবহার করি this এইভাবে যাতে আমার যুক্তি পুনরায় ব্যবহারযোগ্য হয়, আমি আশা করি যে এইচটিএমএল একটি সাফল্যের সাথে ফিরে আসবে তাই আমি এটি রেন্ডার করব এবং বর্তমান পৃষ্ঠাটি প্রতিস্থাপন করব এবং আমার ক্ষেত্রে আমি সেশনটির সময়সীমা শেষ হলে লগইন পৃষ্ঠায় পুনর্নির্দেশের প্রত্যাশা করি, তাই পৃষ্ঠার রাজ্যটি সংরক্ষণের জন্য আমি সেই পুনঃনির্দেশকে বাধা দিই।
এখন ব্যবহারকারীরা অন্য ট্যাব দিয়ে লগ ইন করতে পারেন এবং তাদের জমা দেওয়ার চেষ্টা করতে পারেন।
আপনি জাভাস্ক্রিপ্ট এবং এজেএক্স প্রযুক্তি ব্যবহার করে এটি করতে পারেন। Jquery এবং এই ফর্ম প্লাগ ইন এ দেখুন । ফর্ম.সামিতের জন্য একটি কলব্যাক নিবন্ধন করতে আপনাকে কেবল দুটি জেএস ফাইল অন্তর্ভুক্ত করতে হবে।
আপনি jQuery এবং ajax()পদ্ধতিটি ব্যবহার করে এটি সম্পাদন করতে পারেন :
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
function submitform() {
$.ajax({
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
type: "POST",
url : "/hello.hello",
dataType : "json",
data : JSON.stringify({"hello_name": "hello"}),
error: function () {
alert('loading Ajax failure');
},
onFailure: function () {
alert('Ajax Failure');
},
statusCode: {
404: function() {
alert("missing info");
}
},
success : function (response) {
alert("The server says: " + JSON.stringify(response));
}
})
.done(function( data ) {
$("#result").text(data['hello']);
});
};</script> $(document).ready(function() {
$('form').submit(function(event) {
event.preventDefault();
$.ajax({
url : "<wiki:action path='/your struts action'/>",//path of url where u want to submit form
type : "POST",
data : $(this).serialize(),
success : function(data) {
var treeMenuFrame = parent.frames['wikiMenu'];
if (treeMenuFrame) {
treeMenuFrame.location.href = treeMenuFrame.location.href;
}
var contentFrame = parent.frames['wikiContent'];
contentFrame.document.open();
contentFrame.document.write(data);
contentFrame.document.close();
}
});
});
});ব্লককোট
সবথেকে বেশি ব্যবহার করুন $ (ডকুমেন্ট) ready ,}); এটি আপনার প্রয়োজনীয়তা অনুযায়ী প্যারামিটারটি গ্রহণ করতে পারে তারপরে অফলঞ্চল সাফল্যকে কল করতে পারে: ফাংশন (ডেটা) {// আপনি আমার উদাহরণটি যা চান তা করুন যা এইচটিএমএলকে ডিভের উপর ফেলে}
সবার আগে আমাদের সিরিয়ালাইজ অবজেক্ট () প্রয়োজন হবে;
$.fn.serializeObject = function () {
var o = {};
var a = this.serializeArray();
$.each(a, function () {
if (o[this.name]) {
if (!o[this.name].push) {
o[this.name] = [o[this.name]];
}
o[this.name].push(this.value || '');
} else {
o[this.name] = this.value || '';
}
});
return o;
};তারপরে আপনি একটি বেসিক পোস্ট করুন এবং প্রতিক্রিয়া পাবেন
$.post("/Education/StudentSave", $("#frmNewStudent").serializeObject(), function (data) {
if(data){
//do true
}
else
{
//do false
}
});আমি মাল্টি-পার্ট ফর্ম ডেটা সহ এজ্যাক্স ব্যবহার করে নিচের কোডটি নিখুঁতভাবে চালাচ্ছি
function getUserDetail()
{
var firstName = document.getElementById("firstName").value;
var lastName = document.getElementById("lastName").value;
var username = document.getElementById("username").value;
var email = document.getElementById("email").value;
var phoneNumber = document.getElementById("phoneNumber").value;
var gender =$("#userForm input[type='radio']:checked").val();
//var gender2 = document.getElementById("gender2").value;
//alert("fn"+firstName+lastName+username+email);
var roleIndex = document.getElementById("role");
var role = roleIndex.options[roleIndex.selectedIndex].value;
var jobTitleIndex = document.getElementById("jobTitle");
var jobTitle = jobTitleIndex.options[jobTitleIndex.selectedIndex].value;
var shiftIdIndex = document.getElementById("shiftId");
var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;
var addressLine1 = document.getElementById("addressLine1").value;
var addressLine2 = document.getElementById("addressLine2").value;
var streetRoad = document.getElementById("streetRoad").value;
var countryIndex = document.getElementById("country");
var country = countryIndex.options[countryIndex.selectedIndex].value;
var stateIndex = document.getElementById("state");
var state = stateIndex.options[stateIndex.selectedIndex].value;
var cityIndex = document.getElementById("city");
var city = cityIndex.options[cityIndex.selectedIndex].value;
var pincode = document.getElementById("pincode").value;
var branchIndex = document.getElementById("branch");
var branch = branchIndex.options[branchIndex.selectedIndex].value;
var language = document.getElementById("language").value;
var profilePicture = document.getElementById("profilePicture").value;
//alert(profilePicture);
var addDocument = document.getElementById("addDocument").value;
var shiftIdIndex = document.getElementById("shiftId");
var shiftId = shiftIdIndex.options[shiftIdIndex.selectedIndex].value;
var data = new FormData();
data.append('firstName', firstName);
data.append('lastName', lastName);
data.append('username', username);
data.append('email', email);
data.append('phoneNumber', phoneNumber);
data.append('role', role);
data.append('jobTitle', jobTitle);
data.append('gender', gender);
data.append('shiftId', shiftId);
data.append('lastName', lastName);
data.append('addressLine1', addressLine1);
data.append('addressLine2', addressLine2);
data.append('streetRoad', streetRoad);
data.append('country', country);
data.append('state', state);
data.append('city', city);
data.append('pincode', pincode);
data.append('branch', branch);
data.append('language', language);
data.append('profilePicture', $('#profilePicture')[0].files[0]);
for (var i = 0; i < $('#document')[0].files.length; i++) {
data.append('document[]', $('#document')[0].files[i]);
}
$.ajax({
//url : '${pageContext.request.contextPath}/user/save-user',
type: "POST",
Accept: "application/json",
async: true,
contentType:false,
processData: false,
data: data,
cache: false,
success : function(data) {
reset();
$(".alert alert-success alert-div").text("New User Created Successfully!");
},
error :function(data, textStatus, xhr){
$(".alert alert-danger alert-div").text("new User Not Create!");
}
});
//
}আপনি jQuery.post () ব্যবহার করতে পারেন এবং সার্ভার থেকে সুন্দর কাঠামোগত JSON উত্তরগুলি ফিরে আসতে পারেন। এটি আপনাকে সরাসরি সার্ভারে আপনার ডেটা বৈধ / স্যানিটাইজ করার অনুমতি দেয় যা একটি ভাল অনুশীলন কারণ এটি ক্লায়েন্টের উপর এটি করার চেয়ে এটি আরও সুরক্ষিত (এবং আরও সহজ)।
উদাহরণস্বরূপ, যদি আপনাকে সাধারণ রেজিস্ট্রেশনের জন্য ব্যবহারকারী ডেটা সহ সার্ভারে (saveprofilechanges.php করতে) html ফর্ম পোস্ট করতে হয়:
I. ক্লায়েন্ট অংশ:
আইএইচটিএমএল অংশ:
<form id="user_profile_form">
<label for="first_name"><input type="text" name="first_name" id="first_name" required />First name</label>
<label for="family_name"><input type="text" name="family_name" id="family_name" required />Family name</label>
<label for="email"><input type="email" name="email" id="email" required />Email</label>
<input type="submit" value="Save changes" id="submit" />
</form>ইব স্ক্রিপ্ট অংশ:
$(function () {
$("#user_profile_form").submit(function(event) {
event.preventDefault();
var postData = {
first_name: $('#first_name').val(),
family_name: $('#family_name').val(),
email: $('#email').val()
};
$.post("/saveprofilechanges.php", postData,
function(data) {
var json = jQuery.parseJSON(data);
if (json.ExceptionMessage != undefined) {
alert(json.ExceptionMessage); // the exception from the server
$('#' + json.Field).focus(); // focus the specific field to fill in
}
if (json.SuccessMessage != undefined) {
alert(json.SuccessMessage); // the success message from server
}
});
});
});২। সার্ভার অংশ (saveprofilechanges.php):
$data = $_POST;
if (!empty($data) && is_array($data)) {
// Some data validation:
if (empty($data['first_name']) || !preg_match("/^[a-zA-Z]*$/", $data['first_name'])) {
echo json_encode(array(
'ExceptionMessage' => "First name missing or incorrect (only letters and spaces allowed).",
'Field' => 'first_name' // Form field to focus in client form
));
return FALSE;
}
if (empty($data['family_name']) || !preg_match("/^[a-zA-Z ]*$/", $data['family_name'])) {
echo json_encode(array(
'ExceptionMessage' => "Family name missing or incorrect (only letters and spaces allowed).",
'Field' => 'family_name' // Form field to focus in client form
));
return FALSE;
}
if (empty($data['email']) || !filter_var($data['email'], FILTER_VALIDATE_EMAIL)) {
echo json_encode(array(
'ExceptionMessage' => "Email missing or incorrectly formatted. Please enter it again.",
'Field' => 'email' // Form field to focus in client form
));
return FALSE;
}
// more actions..
// more actions..
try {
// Some save to database or other action..:
$this->User->update($data, array('username=?' => $username));
echo json_encode(array(
'SuccessMessage' => "Data saved!"
));
return TRUE;
} catch (Exception $e) {
echo json_encode(array(
'ExceptionMessage' => $e->getMessage()
));
return FALSE;
}
}