मेरे पास निम्नलिखित कोड हैं:
<script type="text/javascript">
function SubmitForm()
{
form1.submit();
}
function ShowResponse()
{
}
</script>
.
.
.
<div>
<a href="#" onclick="SubmitForm();">Click</a>
</div>
मैं के html प्रतिक्रिया पर कब्जा करना चाहते हैं 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हैंडलर में सामग्री को पढ़ना है । लेकिन जब अजाक्स है तो परेशान क्यों?
नोट: मैं सिर्फ इस विकल्प का उल्लेख करना चाहता था क्योंकि कुछ उत्तर दावा करते हैं कि यह अजाक्स के बिना इसे प्राप्त करना असंभव है।
<iframe>POSTs (कॉलबैक के साथ 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'एस डिफ़ॉल्ट सामग्री प्रकार है जो मेल खाता है कि हम क्या ऊपर स्निपेट में भेज रहे हैं "अनुप्रयोग / x-www फार्म-urlencoded" है। यदि आप "अन्य सामान" भेजना चाहते हैं या इसे किसी तरह से देखना चाहते हैं, तो यहां कुछ किटी ग्रिट के विवरण देखें।
<input type='button' onclick="submitForm(); return false;">या आप मार्कस की तरह 'सबमिट' इवेंट के लिए एक इवेंट श्रोता जोड़ सकते हैं: जवाब: 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या jQuery की $.ajax)।
यहाँ एक पारंपरिक रूप है:
<form id="myFormId" action="/api/process/form" method="post">
<!-- form fields here -->
<button type="submit">SubmitAction</button>
</form>यदि ऊपर जैसा कोई फॉर्म आपको सौंपा गया है (या आपने इसे बनाया क्योंकि यह शब्दार्थ html है), तो आप 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।)
डॉक्स:
Fetch: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
अन्य: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript 2018 में उस पृष्ठ पर भ्रूण (अभी तक) का उल्लेख नहीं है। लेकिन यह उल्लेख करता है कि लक्ष्य = "myiframe" चाल को पदावनत किया गया है। और इसमें 'सबमिट' ईवेंट के लिए form.addEventListener का एक उदाहरण भी है।
मुझे यकीन नहीं है कि आप समझते हैं कि क्या सबमिट () है ...
जब आप form1.submit();प्रपत्र करते हैं तो वेबसर्वर को सूचना भेजी जाती है।
WebServer ग्राहक के लिए एक नया वेबपेज करने और उसे वापस करने के लिए जो कुछ भी करना चाहता है वह करेगा (आमतौर पर कुछ बदले हुए पृष्ठ)।
तो, वहाँ कोई रास्ता नहीं है कि आप एक form.submit () कार्रवाई की वापसी "पकड़" कर सकते हैं।
कोई कॉलबैक नहीं है। यह एक लिंक का अनुसरण करने जैसा है।
यदि आप सर्वर प्रतिक्रिया को कैप्चर करना चाहते हैं, तो AJAX का उपयोग करें या इसे एक iframe पर पोस्ट करें और iframe की onload()ईवेंट के बाद वहां दिखाई देने वाली चीज़ों को पकड़ो ।
आप event.preventDefault()अपने सबमिट बटन के लिए क्लिक हैंडलर में यह सुनिश्चित कर सकते हैं कि HTML फॉर्म की डिफ़ॉल्ट submitघटना आग नहीं है (जो पृष्ठ ताज़ा करने की ओर जाता है)।
एक अन्य विकल्प हैकर फॉर्म मार्कअप का उपयोग करना होगा: यह इसका उपयोग है <form>और type="submit"जो यहां वांछित व्यवहार के रास्ते में हो रहा है; क्योंकि ये अंततः पृष्ठ को ताज़ा करने वाली घटनाओं पर क्लिक करने के लिए नेतृत्व करते हैं।
आप अभी भी उपयोग करना चाहते हैं <form>, और आप कस्टम संचालकों क्लिक लिखने के लिए नहीं करना चाहते हैं, तो आप jQuery के उपयोग कर सकते हैं ajaxके लिए वादा तरीकों उजागर द्वारा आप के लिए दूर विधि है, जो पूरे समस्या सार success, errorआदि
पुनर्कथन करने के लिए, आप अपनी समस्या को हल कर सकते हैं:
• उपयोग करके हैंडलिंग फ़ंक्शन में डिफ़ॉल्ट व्यवहार को रोकना event.preventDefault()
• ऐसे तत्वों का उपयोग करना जिनमें डिफ़ॉल्ट व्यवहार नहीं है (जैसे <form>)
• jQuery का उपयोग करना ajax
(मैंने सिर्फ यह सवाल 2008 से देखा है, यह सुनिश्चित नहीं है कि यह मेरे फ़ीड में क्यों दिखा, किसी भी दर पर, उम्मीद है कि यह एक स्पष्ट जवाब है)
इस समस्या के लिए यह मेरा कोड है:
<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>यदि आप Chrome का उपयोग करके AJAX अनुरोध के आउटपुट को कैप्चर करना चाहते हैं, तो आप इन सरल चरणों का पालन कर सकते हैं:
@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करता हूं ताकि मेरा तर्क पुन: प्रयोज्य हो, मुझे उम्मीद है कि HTML को एक सफलता पर लौटाया जाएगा, इसलिए मैं इसे प्रस्तुत करता हूं और वर्तमान पृष्ठ को प्रतिस्थापित करता हूं, और मेरे मामले में मुझे लॉगिन पृष्ठ पर रीडायरेक्ट की उम्मीद है यदि सत्र समाप्त हो गया है, तो मैं पृष्ठ की स्थिति को संरक्षित करने के लिए उस रीडायरेक्ट को बाधित करता हूं।
अब उपयोगकर्ता एक अन्य टैब के माध्यम से लॉग इन कर सकते हैं और फिर से अपना सबमिट करने का प्रयास कर सकते हैं।
आप जावास्क्रिप्ट और AJAX तकनीक का उपयोग कर सकते हैं। 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();
}
});
});
});Blockquote
सभी उपयोग $ (दस्तावेज़) के। ,}); यह पैरामीटर यू लेगा आपकी आवश्यकता के अनुसार चुन सकता है तब कॉल करें आहरण सफलता: फ़ंक्शन (डेटा) {// जो भी आप चाहते हैं कि मेरा उदाहरण प्रतिक्रिया को HTML पर डाल देना है}
सबसे पहले हमें serializeObject () की आवश्यकता होगी;
$.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 उत्तर लौटा सकते हैं । यह आपको सर्वर पर सीधे अपने डेटा को मान्य / स्वीकृत करने की अनुमति देता है, जो एक अच्छा अभ्यास है क्योंकि यह क्लाइंट पर ऐसा करने से अधिक सुरक्षित (और यहां तक कि आसान) है।
उदाहरण के लिए यदि आपको सरल पंजीकरण के लिए उपयोगकर्ता डेटा के साथ सर्वर (HTML को saveprofilechanges.php) पर पोस्ट करने की आवश्यकता है:
I. ग्राहक भागों:
Ia HTML हिस्सा:
<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;
}
}