logo
down
shadow

Form to use AJAX rather than a page refresh but also utilise error handling?


Form to use AJAX rather than a page refresh but also utilise error handling?

By : Helpwise
Date : November 24 2020, 05:47 AM
To fix this issue I think jquery.form may suit you, it is used to submit form without any refresh, and is very famous. There many examples in its official website, it's really easy to use.
Hope helps ;)
code :


Share : facebook icon twitter icon
Form submit without refresh using jquery/ajax if page have more than one form

Form submit without refresh using jquery/ajax if page have more than one form


By : Sumit dongare
Date : March 29 2020, 07:55 AM
I hope this helps you . Just customize your function and add params like formid to get form data within the function to pass processForm("id of the form");
code :
function processForm(formId) { 
    //your validation code
    $.ajax( {
            type: 'POST',
            url: form_process.php,
            data: $("#"+formId).serialize(), 
            success: function(data) {
                $('#message').html(data);
            }
        } );
    }

<form action="" id="form1" method="post" onsubmit="processForm('form1');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>

<form action="" id="form2" method="post" onsubmit="processForm('form2');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<form action="" id="form3" method="post" onsubmit="processForm('form3');return false;">
<input type='text' name='user_name' id='user_name' value='' />
<input type='submit' name='submit' value='submit'/>
</form>
<div id='message'></div>
Form submit with AJAX passing form data to PHP without page refresh

Form submit with AJAX passing form data to PHP without page refresh


By : Sal
Date : March 29 2020, 07:55 AM
To fix the issue you can do Can anyone tell me why this bit of code isn't working? , The form is submitting after the ajax request.
code :
<html>
  <head>
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
      $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'post.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
    </script>
  </head>
  <body>
    <form>
      <input name="time" value="00:00:00.00"><br>
      <input name="date" value="0000-00-00"><br>
      <input name="submit" type="submit" value="Submit">
    </form>
  </body>
</html>
submit form with jquery / ajax / php without page refresh. Can't get form value to email

submit form with jquery / ajax / php without page refresh. Can't get form value to email


By : Elise
Date : March 29 2020, 07:55 AM
To fix this issue I'm looking to submit a single form input for a tracking number using jquery/php so that the page doesn't refresh. I am able to submit the form and have the email sent to me but can't figure out what to put in $email_body so it actually emails me the form info. The email will send blank (So I assume email is in the PHP code). Please see below for HTML/JS/PHP: , Change this line:
code :
$email_body = "Tracking Number: $track".
$email_body = "Tracking Number: $track";
$email_body = "Tracking Number: " . $track . "\r\n";
$headers = 'From: webmaster@example.com' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
$headers = 'From: $email_from' . "\r\n" .
'Reply-To: webmaster@example.com' . "\r\n" .
'X-Mailer: PHP/' . phpversion();
I don't want my page or console to refresh! Javascript form handling

I don't want my page or console to refresh! Javascript form handling


By : Malkavian89
Date : March 29 2020, 07:55 AM
Does that help , Use the preventDefault method.
code :
function init(){
    var form = document.getElementById("myForm");
    form.addEventListener("submit", process, false);
};
function process(e){
    console.log("Yikes!");
    e.preventDefault()
    return false;
};
document.addEventListener("DOMContentLoaded", init, false);
How to update page content after success post in a form without page refresh and not using ajax

How to update page content after success post in a form without page refresh and not using ajax


By : Riku Ojala
Date : March 29 2020, 07:55 AM
around this issue Using Ajax Post you can post data without refreshing whole page.
Example :
code :
<h2>PostDataForm</h2>
<div class="card mb-3">
  <div class="card-header">
    <i class="fas fa-table"></i>
    Form 1
  </div>
 <div class="card-body">
    <div class="form-group">
            <input type="text" id="Email1" name="Email1" class="form-control" 
     placeholder="Email address" >
    </div>
    <input type="button" id="BtnForm1" class="btn btn-primary btn-block" 
   value="Submit" />
   </div>
 </div>
  <div class="card mb-3">
 <div class="card-header">
    <i class="fas fa-table"></i>
    Form 2
</div>
<div class="card-body">
    <div class="form-group">
        <div class="form-label-group">
            <input type="text" id="Email2" name="Email2" class="form-control" 
   placeholder="Email address" >
        </div>
    </div>
    <input type="button" id="BtnForm2" class="btn btn-primary btn-block" 
  value="Submit" />
  </div>
  </div>

 <div class="card mb-3">
<div class="card-header">
    <i class="fas fa-table"></i>
    Form 3
</div>
<div class="card-body">
    <div class="form-group">
        <div class="form-label-group">
            <input type="text" id="Email3" name="Email3" class="form-control" 
  placeholder="Email address">
        </div>
    </div>
    <input type="button" id="BtnForm3" class="btn btn-primary btn-block" 
  value="Submit" />
</div>
</div>
<script src="/vendor/jquery/jquery.min.js"></script>
 <script type="text/javascript">

$(document).ready(function() {
    $("#BtnForm1").click(function () {
        if ($("#Email1").val() != '') {
            $.ajax({
                type: 'POST',
                url: '/User/PostDataForm1',
               // dataType: 'json',
                data: { email: $("#Email1").val() },
                success: function() {
                    alert("Form 1 submitted successfully!");
                },
                error: function (ex) {

                    alert("ex");
                }
            });
        } else {
            alert("Please Form 1 email address");
        }
    });
});

</script>
  public ActionResult PostDataForm() {
        return View();
    }

    [HttpPost]
    public ActionResult PostDataForm1(string email) {
        //update your data
        return Json("Success", JsonRequestBehavior.AllowGet);
    }
Related Posts Related Posts :
  • angular 6 Please add a @NgModule annotation
  • Trying to cast element ID to class selector in jQuery
  • Swipe JS - Display 3 Slides at a time
  • Jasmine test to call function when value is null
  • Redux reducer gets string instead of object
  • Keep chrome javascript running even if page reload
  • The event.target.value is not insert the userinput into a variable
  • Exporting HTML tables to Excel (.xls) in a separate sheet
  • Jquery tooltip on dialog close button
  • access variable inside anonymous function from outside
  • How come func is called from a function?
  • How to change add and remove active class in JavaScript
  • how to toggle a specific div in javascript
  • How to get all the values from multiple keys of an array of object?
  • jQuery bind() unbind() and on() and off()
  • regular expression to find DD Month YYYY from a string
  • How to upload files from web client (HTML/jQuery form) to your Dropbox folder
  • Backbone history and require.js issue
  • Confusion over Classical and Prototypal Inheritance Javascript
  • How to take screen shot of current webpage using Javascript/JQuery?
  • Store meridiem in a variable
  • class declared inside closure vs standard class without closure
  • javascript confirm box always return true
  • dynamically changing the size of font size based on text length using css and html
  • Node.js - Getting the host IP address while on Amazon EC2
  • Confusing CSS, can anyone explain please
  • How to install v8-profiler on Windows 8 (64 bit) using npm?
  • Resolve promise based on another promise
  • google maps adding overlay layer above UI and markers
  • Style specific letter?
  • RangeError: Maximum call stack size exceeded with array.slice
  • node rest client get with local variable
  • If condition not executes while mouse move fastly
  • Count the number of displayed elements in a HTML list
  • Locate JavaScript source code in Emacs
  • Clean, Modular Code vs MV* Frameworks
  • infinite scroll without loading image
  • Backbone: reverse collection order with comparator
  • What do printers ignore?
  • jQuery UI .tabs() Contentless tab?
  • Execute Javascript alert() after page (visually) loaded
  • JavaScript - duplicating array doesn't work
  • Excessive clickable area below image
  • JavaScript Regex: Replace |b| with <b>
  • Unexpected value change in 2D array in JavaScript
  • Function doesnt see parameter as a array of objects
  • jQuery fetch keypress event on chrome and IE
  • How to enable jquery validate localization?
  • Cassandra map collection returned by node.js Helenus looks odd
  • angular ng-repeat with multiple filter options
  • Selecting Children without ID or Class names
  • How to uncheck a group of checkboxes when another checkbox is checked
  • Is hiding content by Javascript or jQuery Worth trying
  • Load XUL resource using javascript
  • XML to HTML text area from server file system
  • set focus() on textbox on form onload
  • es lint '' is assigned a value but never used' eventhough i have used it
  • Can "name" attribute be used for custom VueJS components
  • Get innerHTML of content when it is clicked
  • HTTPS causes CSS animations to not load? Very confused
  • shadow
    Privacy Policy - Terms - Contact Us © ourworld-yourmove.org