JQuery - If statement for Eform

i am trying to populate a text box based on the outcome of a dropdown.

i am trying to populate a text box based on the outcome of a dropdown.

currently if i use:

$(document).ready(function () {
  //if Department is changed
  $("#Field9").on('change',function(){
    $("#Field27").val(3);
});

i get "3" in the correct field so that's fine i know the field references are correct.

my scenario is i want to customise "Field27" based on the options in the dropdown ("Field9".

my existing code is:

$(document).ready(function () {
  //if Department is changed
  $("#Field9").on('change',function(){

//check is equal to planning
if($("#Field9").val() == "Planning"){
$("#Field27").val(3);
}
else{
$("#Field27").val(4);
}

}

});
});

can anyone advise why the if statement is not working as desired? it's not even populating 4 in the "else" statement


Multiple form submit upon last form PHP

I am working on a web application using PHP and sql on localhost using wamp server.

I am working on a web application using PHP and sql on localhost using wamp server.

I have a requirement to make multiple forms Like personal details, Physical detail medical detail and religion detail with save button for each form in each page of a form. For these forms I designed database tables separately, like personal detail , medical, religion and users details have separate database tables with primary key and a foreign key of User Id from user table to distinguish records specific to each user.

  1. My problem now is what approach will I use to submit all forms with single button? Before submitting my application checks whether all required fields are filled or not if filledthen it would submit all pre filled forms.
  2. Second question is when user submits all forms with single click
  3. where is data is to be stored ?


Ajax Form Submit examples using jQuery

Ajax Form Submit examples using jQuery

In this jquery ajax form tutorial – you have learned how to send or submit the form data or multipart form using the jquery ajax on the server. Also, you have known the related queries of jquery ajax form.

Overview

In this jQuery Ajax submits a multipart form or FormData tutorial example – you will learn how to submit the form using the jquery ajax with multi-part data or FromData. Here you will know about the basic faqs of jquery ajax form.

In this tutorial, learn jquery ajax form submits with the form data step by step. A simple jQuery Ajax example to show you how to submit a multipart form, using Javascript FormData and $.ajax().

If you will be using jQuery’s Ajax Form Submit, you can send the form data to the server without reloading the entire page. This will update portions of a web page – without reloading the entire page.

AJAX: AJAX (asynchronous JavaScript and XML) is the art of exchanging data with a server and updating parts of a web page – without reloading the entire page.

Table Of Contents

  • Create HTML Form
  • jQuery Ajax Code

FAQs

  • How to add extra fields or data with Form data in jQuery ajax?
  • ajax FormData: Illegal invocation
  • How to send multipart/FormData or files with jQuery.ajax?

Create HTML Form

In this step, we will create an HTML form for multiple file uploads or FormData and an extra field.

<!DOCTYPE html>
<html>
<title>jQuery Ajax Form Submit with FormData Example</title>
<body>
 
<h1>jQuery Ajax Form Submit with FormData Example</h1>
 
<form method="POST" enctype="multipart/form-data" id="myform">
    <input type="text" name="title"/><br/><br/>
    <input type="file" name="files"/><br/><br/>
    <input type="submit" value="Submit" id="btnSubmit"/>
</form>
 
<h1>jQuery Ajax Post Form Result</h1>
 
<span id="output"></span>
 
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> 
 
</body>
</html>

jQuery Ajax Code

In this step, we will write jquery ajax code for sending a form data to the server.

$(document).ready(function () {
 
    $("#btnSubmit").click(function (event) {
 
        //stop submit the form, we will post it manually.
        event.preventDefault();
 
        // Get form
        var form = $('#fileUploadForm')[0];
 
       // Create an FormData object 
        var data = new FormData(form);
 
       // If you want to add an extra field for the FormData
        data.append("CustomField", "This is some extra data, testing");
 
       // disabled the submit button
        $("#btnSubmit").prop("disabled", true);
 
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: "/upload.php",
            data: data,
            processData: false,
            contentType: false,
            cache: false,
            timeout: 800000,
            success: function (data) {
 
                $("#output").text(data);
                console.log("SUCCESS : ", data);
                $("#btnSubmit").prop("disabled", false);
 
            },
            error: function (e) {
 
                $("#output").text(e.responseText);
                console.log("ERROR : ", e);
                $("#btnSubmit").prop("disabled", false);
 
            }
        });
 
    });
 
});

FAQs – jQuery Ajax Form Submit

1. How to add extra fields with Form data in jQuery ajax?

The **append()** method of the FormData interface appends a new value onto an existing key inside a FormData object, or adds the key if it does not already exist.

// Create an FormData object 
    var data = new FormData(form);
 
// If you want to add an extra field for the FormData
    data.append("CustomField", "This is some extra data, testing");

2. ajax FormData: Illegal invocation

jQuery tries to transform your FormData object to a string, add this to your $.ajax call:

processData: false,
contentType: false

3. How to send multipart/FormData or files with jQuery.ajax?

In this step you will learn how to send multiple files using jQuery ajax. Let’s see the below code Snippet:

var data = new FormData();
jQuery.each(jQuery('#file')[0].files, function(i, file) {
    data.append('file-'+i, file);
});
 
$.ajax({
    url: 'upload.php',
    data: data,
    cache: false,
    contentType: false,
    processData: false,
    method: 'POST',
    success: function(data){
      console.log('success');
    }
});

Note

Conclusion

In this jquery ajax form tutorial – you have learned how to send or submit the form data or multipart form using the jquery ajax on the server. Also, you have known the related queries of jquery ajax form.

10 Best Vue Form Component for Your Vue App

10 Best Vue Form Component for Your Vue App

Vue Form component is a tool to help you solve the problem of allowing end-users to interact with the data and modify the data in your application.

Vue Form component is a tool to help you solve the problem of allowing end-users to interact with the data and modify the data in your application.
In this article I will come up with 11 Vue form components that I find very helpful.

1. Vuetify-Form-Base

vuetify-form-base is a Vue Component and can easily integrated into any Vue Project.

The Schema-Object has the same structure as the Value-Object. Create a Schema by cloning the Value-Object and replace the Values of the Data-Object by Definitions for your your Schema. The corresponding Schema-Object defines type, layout and functional behaviour of your Form.

Features

  • Vue-Component
  • integrates UI framework Vuetify with responsive Layout and Support of Grid
  • Use a lot of Vuetify Control & Input types inclusive available API-Props
  • Get full configurable Forms based on Schema Definition
  • Edit plain or deep nested objects including Arrays, without the Need to flatten it
  • Get a Full reactive Result
  • Listen on 'Resize', 'Focus', 'Input', 'Click', 'Swipe' and 'Update' Events
  • Use Slots to pass Header and Footer into a Control. Or replace a Control by Slot
  • Configurable CSS Style

Demo

Download


2. FormVuelar

FormVuelar is a set of predefined vue form components which are designed to automatically display errors coming back from your backend. It works out of the box with the error message bag that is returned by Laravel when submitting an ajax form.

Demo

Download


3. vue-form-components

Clean & minimal vue form elements with validation.

Demo

Download


4. example-list-form

Form Dinamis dengan menggunakan Vue.js.

Download


5. vue-genesis-forms

Easy create forms in Vue.js

Demo

Download


6. FormBuilder

Laravel Enso Form Builder is a customizable, template based form creator, so you can quickly create forms with the minimum amount of effort

Demo

Download


7. vfg-field-array

A vue-form-generator field to handle arrays.

Download


8. vue-formbuilder2.0

ElementUI Form Builder.

Basic code was clone from https://github.com/jmeei/vue-formbuilder, and did some improve.

Demo

Download


9. vue-interactive-paycard

A fantastic credit card form with smooth and sweet micro-interactions. Includes number formatting, validation and automatic card type detection. Built with vuejs and also fully responsive.

Demo

Download


10. vue-dynamic-form-component

vue-dynamic-form-component is a dynamic form component base on element-ui and async-validator. You just need to write descriptors(reference to async-validator) of the data you want, vue-dynamic-form-component will generate the form automatically.

Demo

Download


Thank for read!