jQuery AJAX පෝරමය ඉදිරිපත් කරන්න

මට නමක් සහිත පෝරමයක් orderproductFormසහ නිර්වචනය නොකළ යෙදවුම් සංඛ්‍යාවක් ඇත.

මට යම් ආකාරයක jQuery.get හෝ ajax හෝ ඒ හා සමාන දෙයක් කිරීමට අවශ්‍යයි, එය Ajax හරහා පිටුවක් අමතා පෝරමයේ සියලුම යෙදවුම් සමඟ යවනු ඇත orderproductForm.

මම හිතන්නේ එක් ක්‍රමයක් වන්නේ එවැනි දෙයක් කිරීමයි

jQuery.get("myurl",
          {action : document.orderproductForm.action.value,
           cartproductid : document.orderproductForm.cartproductid.value,
           productid : document.orderproductForm.productid.value,
           ...

කෙසේ වෙතත් මම සියලු ආකාර යෙදවුම් හරියටම නොදනිමි. සියලුම පෝරම යෙදවුම් යවන අංගයක්, ශ්‍රිතයක් හෝ යමක් තිබේද?

ඔබට AjaxForm / ajaxSubmit කාර්යයන් Ajax Form Plugin වෙතින් හෝ jQuery අනුක්‍රමික ශ්‍රිතය භාවිතා කළ හැකිය.

AjaxForm :

$("#theForm").ajaxForm({url: 'server.php', type: 'post'})

හෝ

$("#theForm").ajaxSubmit({url: 'server.php', type: 'post'})

යොමු බොත්තම එබූ විට ajaxForm යවනු ලැබේ. ajaxSubmit වහාම යවයි.

අනුක්‍රමික කරන්න :

$.get('server.php?' + $('#theForm').serialize())

$.post('server.php', $('#theForm').serialize())

AJAX අනුක්‍රමිකකරණ ලියකියවිලි මෙහි ඇත.

මෙය සරල සඳහනකි:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');
    
    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

    
});

ආකෘති මූලද්‍රව්‍යය මත අර්ථ දක්වා ඇති ගුණාංග භාවිතා කරමින් තවත් සමාන විසඳුමක්:

<form id="contactForm1" action="/your_url" method="post">
    <!-- Form input fields here (do not forget your name attributes). -->
</form>

<script type="text/javascript">
    var frm = $('#contactForm1');

    frm.submit(function (e) {

        e.preventDefault();

        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                console.log('Submission was successful.');
                console.log(data);
            },
            error: function (data) {
                console.log('An error occurred.');
                console.log(data);
            },
        });
    });
</script>

ඔබ මතක තබා ගත යුතු කරුණු කිහිපයක් තිබේ.

1. පෝරමයක් ඉදිරිපත් කිරීමට ක්රම කිහිපයක් තිබේ

• ඉදිරිපත් කිරීමේ බොත්තම භාවිතා කරමින්
• Enter එබීමෙන්
• ජාවාස්ක්‍රිප්ට් හි ඉදිරිපත් කිරීමේ සිදුවීමක් අවුලුවාලීමෙන්
• සමහර විට උපාංගය හෝ අනාගත උපාංගය මත පදනම්ව.

එබැවින් අපි බොත්තම ක්ලික් කිරීමේ සිද්ධියට නොව පෝරමය ඉදිරිපත් කිරීමේ සිද්ධියට බැඳිය යුතුය . අපගේ කේතය දැන් සහ අනාගතයේදී සියලුම උපාංග සහ උපකාරක තාක්ෂණයන් මත ක්‍රියාත්මක වන බව සහතික කරයි.

2. හිජාක්ස්

පරිශීලකයාට ජාවාස්ක්‍රිප්ට් සක්‍රීය කර නොතිබිය හැකිය. ඒ hijax රටාව, මෙහි යහපත් අපි මෘදු JavaScript භාවිතා ස්වරූපයෙන් පාලනය කරන්න, නමුත් JavaScript අපොහොසත් වන්නේ නම්, submittable ඒක අත්හරින්න එහිදී.

අපි පෝරමයෙන් URL සහ ක්‍රමය ඇද ගත යුතුය, එබැවින් HTML වෙනස් වුවහොත් අපට ජාවාස්ක්‍රිප්ට් යාවත්කාලීන කිරීමට අවශ්‍ය නොවේ.

3. නොවරදින ජාවාස්ක්‍රිප්ට්

භාවිතා event.preventDefault () වෙනුවට නැවත බොරු එය බුබුල දක්වා මෙම අවස්ථාවට ඉඩ ලෙස හොඳ ක්රමයක් වන්නේ. මෙය වෙනත් ස්ක්‍රිප්ට වලට සිදුවීමට සම්බන්ධ වීමට ඉඩ දෙයි, උදාහරණයක් ලෙස පරිශීලක අන්තර්ක්‍රියා අධීක්ෂණය කරන විශ්ලේෂණ ස්ක්‍රිප්ට්.

වේගය

අපගේ ස්ක්‍රිප්ට් පේළියට ඇතුල් කිරීමට වඩා බාහිර පිටපතක් අප ඉතා මැනවින් භාවිතා කළ යුතුය. පිටුවේ ප්‍රධාන කොටසේ ස්ක්‍රිප්ට් ටැගයක් භාවිතයෙන් අපට මෙය සම්බන්ධ කළ හැකිය, නැතහොත් වේගය සඳහා පිටුවේ පතුලේ එය සම්බන්ධ කරන්න. ස්ක්‍රිප්ට් එක නිහ ly ව පරිශීලක අත්දැකීම් වැඩිදියුණු කළ යුතුය.

කේතය

ඉහත සියල්ල සමඟ ඔබ එකඟ වන බව උපකල්පනය කර, ඔබට ඉදිරිපත් කිරීමේ සිදුවීම අල්ලා ගැනීමට අවශ්‍ය වන අතර එය AJAX (හිජාක්ස් රටාවක්) හරහා හසුරුවන්න, ඔබට මේ වගේ දෙයක් කළ හැකිය:

$(function() {
  $('form.my_form').submit(function(event) {
    event.preventDefault(); // Prevent the form from submitting via the browser
    var form = $(this);
    $.ajax({
      type: form.attr('method'),
      url: form.attr('action'),
      data: form.serialize()
    }).done(function(data) {
      // Optionally alert the user of success here...
    }).fail(function(data) {
      // Optionally alert the user of an error here...
    });
  });
});

ජාවාස්ක්‍රිප්ට් හරහා ඔබ කැමති විටෙක පෝරම ඉදිරිපත් කිරීමක් අතින් ක්‍රියාත්මක කළ හැකිය:

$(function() {
  $('form.my_form').trigger('submit');
});

සංස්කරණය කරන්න:

මට මෑතකදී මෙය කිරීමට සිදු වූ අතර ප්ලගිනයක් ලිවීම අවසන් විය.

(function($) {
  $.fn.autosubmit = function() {
    this.submit(function(event) {
      event.preventDefault();
      var form = $(this);
      $.ajax({
        type: form.attr('method'),
        url: form.attr('action'),
        data: form.serialize()
      }).done(function(data) {
        // Optionally alert the user of success here...
      }).fail(function(data) {
        // Optionally alert the user of an error here...
      });
    });
    return this;
  }
})(jQuery)

ඔබගේ පෝරම ටැගයට දත්ත ස්වයංක්‍රීයව ඉදිරිපත් කිරීමේ ලක්ෂණයක් එක් කරන්න, එවිට ඔබට මෙය කළ හැකිය:

HTML

<form action="/blah" method="post" data-autosubmit>
  <!-- Form goes here -->
</form>

ජේ

$(function() {
  $('form[data-autosubmit]').autosubmit();
});

ඔබට FormData ද භාවිතා කළ හැකිය (නමුත් IE හි නොමැත):

var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector        
$.ajax({
    type: "POST",
    url: "yourURL",// where you wanna post
    data: formData,
    processData: false,
    contentType: false,
    error: function(jqXHR, textStatus, errorMessage) {
        console.log(errorMessage); // Optional
    },
    success: function(data) {console.log(data)} 
});

ඔබ FormData භාවිතා කරන ආකාරය මෙයයි .

සරල අනුවාදය (රූප යවන්නේ නැත)

<form action="/my/ajax/url" class="my-form">
...
</form>
<script>
    (function($){
        $("body").on("submit", ".my-form", function(e){
            e.preventDefault();
            var form = $(e.target);
            $.post( form.attr("action"), form.serialize(), function(res){
                console.log(res);
            });
        });
    )(jQuery);
</script>

පිටුවක පෝරමයක් හෝ සියලු ආකාර පිටපත් කිරීම හා ඇලවීම

එය ඇල්ෆ්‍රෙක්ජ්ව්ගේ පිළිතුරේ නවීකරණය කරන ලද අනුවාදයකි

• එය jQuery> = 1.3.2 සමඟ ක්‍රියා කරයි
• ලේඛනය සූදානම් වීමට පෙර ඔබට මෙය ක්‍රියාත්මක කළ හැකිය
• ඔබට පෝරමය ඉවත් කර නැවත එකතු කළ හැකි අතර එය තවමත් ක්‍රියාත්මක වේ
• එය පෝරමයේ "ක්‍රියා" ගුණාංගයේ දක්වා ඇති සාමාන්‍ය පෝරමයේ එකම ස්ථානයට තැපැල් කරනු ඇත

ජාවාස්ක්‍රිප්ට්

jQuery(document).submit(function(e){
    var form = jQuery(e.target);
    if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms)
        e.preventDefault();
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: form.serialize(), // serializes the form's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

මට ඇල්ෆ්‍රෙක්ජ්ගේ පිළිතුර සංස්කරණය කිරීමට අවශ්‍ය වූ නමුත් එයින් ඕනෑවට වඩා වෙනස් වූ නිසා මෙය වෙනම පිළිතුරක් ලෙස පළ කිරීමට තීරණය කළෙමි.

ලිපිගොනු යවන්නේ නැත, බොත්තම් සඳහා සහය නොදක්වයි, උදාහරණයක් ලෙස බොත්තමක් ක්ලික් කිරීමෙන් (ඉදිරිපත් කිරීමේ බොත්තමක් ඇතුළුව) එහි වටිනාකම ආකෘති දත්ත ලෙස යවනු ලැබේ, නමුත් මෙය අජැක්ස් ඉල්ලීමක් බැවින් බොත්තම ක්ලික් කිරීම යවනු නොලැබේ.

බොත්තම් සඳහා සහය දැක්වීම සඳහා ඔබට ඉදිරිපත් කිරීම වෙනුවට සත්‍ය බොත්තම ක්ලික් කළ හැකිය.

jQuery(document).click(function(e){
    var self = jQuery(e.target);
    if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){
        e.preventDefault();
        var form = self.closest('form'), formdata = form.serialize();
        //add the clicked button to the form data
        if(self.attr('name')){
            formdata += (formdata!=='')? '&':'';
            formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val());
        }
        jQuery.ajax({
            type: "POST",
            url: form.attr("action"), 
            data: formdata, 
            success: function(data) {
                console.log(data);
            }
        });
    }
});

සේවාදායක පැත්තේ ඔබට jquery සැකසෙන මෙම ශීර්ෂකය සමඟ අජැක්ස් ඉල්ලීමක් හඳුනාගත හැකියHTTP_X_REQUESTED_WITH php සඳහා

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}

මෙම කේතය ගොනු ආදානය සමඟ පවා ක්‍රියා කරයි

$(document).on("submit", "form", function(event)
{
    event.preventDefault();        
    $.ajax({
        url: $(this).attr("action"),
        type: $(this).attr("method"),
        dataType: "JSON",
        data: new FormData(this),
        processData: false,
        contentType: false,
        success: function (data, status)
        {

        },
        error: function (xhr, desc, err)
        {


        }
    });        
});

සුපර්ලුමිනරි විසින් මෙම පිළිතුරට මම සැබවින්ම කැමතියි. විශේෂයෙන් ඔහු ඔතා ඇති ආකාරය jQuery ප්ලගිනයක විසඳුමකි . එබැවින් ඉතා ප්‍රයෝජනවත් පිළිතුරක් සඳහා සුපර්ලුමිනරි වෙත ස්තූතියි . මගේ නඩුවේදී, මට අවශ්‍ය වූයේ සාර්ථකත්වය සහ දෝෂය නිර්වචනය කිරීමට ඉඩ සලසන ප්ලගිනයක් ප්ලගිනය ආරම්භ කරන විට විකල්පයන් මඟින් සිදුවීම් හසුරුවන්නන් ප්ලගිනයක්.

ඉතින් මම ඉදිරිපත් කළ දේ මෙන්න:

;(function(defaults, $, undefined) {
    var getSubmitHandler = function(onsubmit, success, error) {
        return function(event) {
            if (typeof onsubmit === 'function') {
                onsubmit.call(this, event);
            }
            var form = $(this);
            $.ajax({
                type: form.attr('method'),
                url: form.attr('action'),
                data: form.serialize()
            }).done(function() {
                if (typeof success === 'function') {
                    success.apply(this, arguments);
                }
            }).fail(function() {
                if (typeof error === 'function') {
                    error.apply(this, arguments);
                }
            });
            event.preventDefault();
        };
    };
    $.fn.extend({
        // Usage:
        // jQuery(selector).ajaxForm({ 
        //                              onsubmit:function() {},
        //                              success:function() {}, 
        //                              error: function() {} 
        //                           });
        ajaxForm : function(options) {
            options = $.extend({}, defaults, options);
            return $(this).each(function() {
                $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error']));
            });
        }
    });
})({}, jQuery);

මෙම ප්ලගිනය මඟින් පිටුවේ ඇති html ආකෘති ඉතා පහසුවෙන් "අජැක්සි" කිරීමට සහ අඛණ්ඩව ඉදිරිපත් කිරීම , සාර්ථකත්වය සහ දෝෂ ස්වරූපයෙන් ඉදිරිපත් තත්ත්වය පිළිබඳ පරිශීලක ප්රතිපෝෂණ ක්රියාත්මක කිරීම සඳහා අවස්ථාව පේනු. මෙමඟින් ප්ලගිනය පහත පරිදි භාවිතා කිරීමට ඉඩ ලබා දෙන ලදි:

 $('form').ajaxForm({
      onsubmit: function(event) {
          // User submitted the form
      },
      success: function(data, textStatus, jqXHR) {
          // The form was successfully submitted
      },
      error: function(jqXHR, textStatus, errorThrown) {
          // The submit action failed
      }
 });

බව සටහන සාර්ථක හා දෝෂයක් සිදුවීම පේනු ඔබ අනුරූප සිදුවීම් වලින් ලැබෙන බව එම තර්ක ලබා jQuery Ajax ක්රමය.

මට පහත සඳහන් දේ ලැබුණි:

formSubmit('#login-form', '/api/user/login', '/members/');

කොහෙද

function formSubmit(form, url, target) {
    $(form).submit(function(event) {
        $.post(url, $(form).serialize())
            .done(function(res) {
                if (res.success) {
                    window.location = target;
                }
                else {
                    alert(res.error);
                }
            })
            .fail(function(res) {
                alert("Server Error: " + res.status + " " + res.statusText);

            })
        event.preventDefault();
    });
}

මෙය උපකල්පනය කරන්නේ 'url' වෙත අජැක්ස් ස්වරූපයෙන් ය {success: false, error:'my Error to display'}

ඔබට කැමති පරිදි මෙය වෙනස් කළ හැකිය. එම ස්නිපටය භාවිතා කිරීමට නිදහස් වන්න.

jQuery AJAX ඉදිරිපත් කිරීමේ පෝරමය , ඔබ බොත්තමක් ක්ලික් කළ විට පෝරම ID භාවිතා කරමින් පෝරමයක් ඉදිරිපත් කිරීම හැර අන් කිසිවක් නොවේ

කරුණාකර පියවර අනුගමනය කරන්න

පියවර 1 - පෝරම ටැගයට හැඳුනුම් ක්ෂේත්‍රයක් තිබිය යුතුය

<form method="post" class="form-horizontal" action="test/user/add" id="submitForm">
.....
</form>

ඔබ ක්ලික් කිරීමට යන බොත්තම

<button>Save</button>

පියවර 2 - ඉදිරිපත් කිරීමේ සිද්ධිය පෝරමයක් ඉදිරිපත් කිරීමට උපකාරී වන jQuery හි ඇත. පහත කේතයෙන් අපි HTML මූලද්‍රව්‍ය නාමයෙන් JSON ඉල්ලීම සකස් කරමින් සිටිමු .

$("#submitForm").submit(function(e) {
    e.preventDefault();
    var frm = $("#submitForm");
    var data = {};
    $.each(this, function(i, v){
        var input = $(v);
        data[input.attr("name")] = input.val();
        delete data["undefined"];
    });
    $.ajax({
        contentType:"application/json; charset=utf-8",
        type:frm.attr("method"),
        url:frm.attr("action"),
        dataType:'json',
        data:JSON.stringify(data),
        success:function(data) {
            alert(data.message);
        }
    });
});

සජීවී නිරූපණය සඳහා පහත සබැඳිය ක්ලික් කරන්න

JQuery AJAX භාවිතා කරමින් පෝරමයක් ඉදිරිපත් කරන්නේ කෙසේද?

මෙය jQueryආශ්‍රිත ප්‍රශ්නයක් බව මම දනිමි , නමුත් දැන් JS ES6 සමඟ දේවල් වඩාත් පහසු ය. පිරිසිදු javascriptපිළිතුරක් නොමැති බැවින් javascript, fetch()ඒපීඅයි භාවිතා කිරීමෙන් වඩා පිරිසිදු පිරිසිදු විසඳුමක් එක් කළ හැකි යැයි මම සිතුවෙමි . ජාල ඉල්ලීම් ක්‍රියාත්මක කිරීමට මෙය නවීන ක්‍රමයකි. ඔබගේ නඩුවේදී, ඔබට දැනටමත් පෝරම මූලද්‍රව්‍යයක් ඇති බැවින් අපගේ ඉල්ලීම ගොඩනැගීම සඳහා අපට එය භාවිතා කළ හැකිය.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));

භාවිතා කිරීම සලකා බලන්න closest

$('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) {
        frm = $(ev.target).closest('form');
        $.ajax({
            type: frm.attr('method'),
            url: frm.attr('action'),
            data: frm.serialize(),
            success: function (data) {
                alert(data);
            }
        })
        ev.preventDefault();
    });

බහු ආකෘති දත්ත යැවීම වළක්වා ගැනීම සඳහා:

පෝරමය නැවත ඉදිරිපත් කිරීමට පෙර, පරිශීලකයාට එක වරකට වඩා වාර්‍තා ශ්‍රිතය ඇමතිය හැකිය, සමහර විට ඔහුට යමක් අමතක වී හෝ වලංගු කිරීමේ දෝෂයක් විය.

 $("#idForm").unbind().submit( function(e) {
  ....

ඔබ පෝරමය භාවිතා කරන්නේ නම් .serialize () - ඔබට එක් එක් ආකෘති මූලද්‍රව්‍යයට මෙවැනි නමක් ලබා දිය යුතුය:

<input id="firstName" name="firstName" ...

පෝරමය මේ ආකාරයට අනුක්‍රමික වේ:

firstName=Chris&lastName=Halcrow ...

පහත දැක්වෙන පරිදි ඉදිරිපත් කිරීමේ ශ්‍රිතය මත ඔබට මෙය භාවිතා කළ හැකිය.

HTML පෝරමය

<form class="form" action="" method="post">
    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us"> </textarea>
    <input type="button" onclick="return formSubmit();" value="Send">
</form>

jQuery ශ්‍රිතය:

<script>
    function formSubmit(){
        var name = document.getElementById("name").value;
        var message = document.getElementById("message").value;
        var dataString = 'name='+ name + '&message=' + message;
        jQuery.ajax({
            url: "submit.php",
            data: dataString,
            type: "POST",
            success: function(data){
                $("#myForm").html(data);
            },
            error: function (){}
        });
    return true;
    }
</script>

වැඩි විස්තර සහ නියැදිය සඳහා පිවිසෙන්න: http://www.spiderscode.com/simple-ajax-contact-form/

උත්සාහ කරන්න

fetch(form.action,{method:'post', body: new FormData(form)});

function send(e,form) {
  fetch(form.action,{method:'post', body: new FormData(form)});

  console.log('We submit form asynchronously (AJAX)');
  e.preventDefault();
}

<form method="POST" action="myapi/send" onsubmit="send(event,this)" name="orderproductForm">
    <input hidden name="csrfToken" value="$0meh@$h">
    <input name="email" value="aa@bb.com">
    <input name="phone" value="123-456-666">
    <input type="submit">    
</form>

Look on Chrome Console > Network after/before 'submit'

කිසිවෙකු dataවස්තුවක් ලෙස සඳහන් නොකිරීම පුදුමයට කරුණකි . මට එය දත්ත යැවීමට ඇති පිරිසිදුම හා පහසුම ක්‍රමයයි:

$('form#foo').submit(function () {
    $.ajax({
        url: 'http://foo.bar/some-ajax-script',
        type: 'POST',
        dataType: 'json',
        data: {
            'foo': 'some-foo-value',
            'bar': $('#bar').val()
        }
    }).always(function (response) {
        console.log(response);
    });

    return false;
});

ඉන්පසු, පසුබිම තුළ:

// Example in PHP
$_POST['foo'] // some-foo-value
$_POST['bar'] // value in #bar

මෙය OP ගේ ප්‍රශ්නයට පිළිතුර නොවේ,
නමුත් ඔබට ස්ථිතික ආකෘති DOM භාවිතා කළ නොහැකි නම්, ඔබටත් මේ ආකාරයෙන් උත්සාහ කළ හැකිය.

var $form = $('<form/>').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});

ජාවාස්ක්‍රිප්ට්

(function ($) {
    var form= $('#add-form'),
      input = $('#exampleFormControlTextarea1');


   form.submit(function(event) {

       event.preventDefault(); 

       var req = $.ajax({
           url: form.attr('action'),
           type: 'POST',
           data: form.serialize()
       });
    req.done(function(data) {
       if (data === 'success') {
           var li = $('<li class="list-group-item">'+ input.val() +'</li>');
            li.hide()
                .appendTo('.list-group')
                .fadeIn();
            $('input[type="text"],textarea').val('');
        }
   });
});


}(jQuery));

HTML

    <ul class="list-group col-sm-6 float-left">
            <?php
            foreach ($data as $item) {
                echo '<li class="list-group-item">'.$item.'</li>';
            }
            ?>
        </ul>

        <form id="add-form" class="col-sm-6 float-right" action="_inc/add-new.php" method="post">
            <p class="form-group">
                <textarea class="form-control" name="message" id="exampleFormControlTextarea1" rows="3" placeholder="Is there something new?"></textarea>
            </p>
            <button type="submit" class="btn btn-danger">Add new item</button>
        </form>

ඉදිරිපත් කිරීමේ සිදුවීම ද ඇත, එය මේ ආකාරයට අවුලුවන $ ("# form_id"). ඉදිරිපත් කරන්න (). ආකෘති පත්‍රය දැනටමත් HTML හි හොඳින් නිරූපණය කර ඇත්නම් ඔබ මෙම ක්‍රමය භාවිතා කරනු ඇත. ඔබ පිටුවේ කියවා, ආකෘති යෙදවුම් දේවල් සමඟ පුරවා, පසුව .submit () අමතන්න. එය පෝරමයේ ප්‍රකාශනයේ අර්ථ දක්වා ඇති ක්‍රමය සහ ක්‍රියාව භාවිතා කරනු ඇත, එබැවින් ඔබට එය ඔබගේ ජාවාස්ක්‍රිප්ට් එකට පිටපත් කිරීමට අවශ්‍ය නොවේ.

උදාහරණ