What's new

Welcome to uruad | Welcome My Forum

Join us now to get access to all our features. Once registered and logged in, you will be able to create topics, post replies to existing threads, give reputation to your fellow members, get your own private messenger, and so, so much more. It's also quick and totally free, so what are you waiting for?

AJAX Kind in Pure JavaScript with out jQuery

Hoca

Administrator
Staff member
Joined
Mar 22, 2024
Messages
193
Reaction score
0
Points
6
Easy approach to create an AJAX Kind utilizing Pure JavaScript with out jQuery. AJAX kind tutorial & instance, reside demo & obtain instance.

Create an AJAX Kind with out jQuery​


We have to XMLHttpRequest() class and FormData() class, with some features. We are going to create an AJAX kind in simple method with instance.

Dwell Demo and Obtain​


Strive live demo, or download the instance.

Create an AJAX Kind​


JavaScript perform:


/*
AJAX in Pure JavaScript, with out jQuery.
Written by Qassim Hassan |
*/

/* AJAX Operate */
perform AJAXform( formID, buttonID, resultID, formMethod = 'put up' ){
var selectForm = doc.getElementById(formID); // Choose the shape by ID.
var selectButton = doc.getElementById(buttonID); // Choose the button by ID.
var selectResult = doc.getElementById(resultID); // Choose outcome ingredient by ID.
var formAction = doc.getElementById(formID).getAttribute('motion'); // Get the shape motion.
var formInputs = doc.getElementById(formID).querySelectorAll("enter"); // Get the shape inputs.

perform XMLhttp(){
var httpRequest = new XMLHttpRequest();
var formData = new FormData();

for( var i=0; i < formInputs.size; i++ ){&#13;
formData.append(formInputs.identify, formInputs.worth); // Add all inputs inside formData().&#13;
}&#13;
&#13;
httpRequest.onreadystatechange = perform(){&#13;
if ( this.readyState == 4 && this.standing == 200 ) {&#13;
selectResult.innerHTML = this.responseText; // Show the outcome inside outcome ingredient.&#13;
}&#13;
};&#13;
&#13;
httpRequest.open(formMethod, formAction);&#13;
httpRequest.ship(formData);&#13;
}&#13;
&#13;
selectButton.onclick = perform(){ // If clicked on the button.&#13;
XMLhttp();&#13;
}&#13;
&#13;
selectForm.onsubmit = perform(){ // Stop web page refresh&#13;
return false;&#13;
}&#13;
}&#13;


HTML kind:

&#13;
<kind motion="kind.php" id="my-form">&#13;
<enter sort="textual content" identify="some-name" worth="">&#13;
<enter sort="submit" identify="submit" worth="Ship me!" id="my-button">&#13;
</kind>&#13;
<div id="my-result"></div>&#13;


kind.php file:

&#13;
<?php&#13;
if( isset($_POST['some-name']) and !empty($_POST['some-name']) ){&#13;
echo $_POST['some-name'];&#13;
exit();&#13;
}&#13;
else{&#13;
echo 'Please enter your identify!';&#13;
exit();&#13;
}&#13;
?>&#13;


Now add this code in your HTML web page or in JavaScript file:

&#13;
<script sort="textual content/javascript">&#13;
/* Utilization */&#13;
window.onload = perform (){&#13;
AJAXform( 'my-form', 'my-button', 'my-result', 'put up' );&#13;
};&#13;
</script>&#13;


Parameters: AJAXform( ‘your-form-id‘, ‘button-id‘, ‘result-element-id‘, ‘put up or get methodology’ );

Verify extra AJAX tutorials.
 
Top Bottom