How to Get Form Data with JavaScript/Jquery

How can I get form data with JavaScript/jQuery?

$('form').serialize() //this produces: "foo=1&bar=xxx&this=hi"

demo

Obtain form input fields using jQuery?

$('#myForm').submit(function() {
    // get all the inputs into an array.
    var $inputs = $('#myForm :input');

    // not sure if you wanted this, but I thought I'd add it.
    // get an associative array of just the values.
    var values = {};
    $inputs.each(function() {
        values[this.name] = $(this).val();
    });

});

Thanks to the tip from Simon_Weaver, here is another way you could do it, using serializeArray:

var values = {};
$.each($('#myForm').serializeArray(), function(i, field) {
    values[field.name] = field.value;
});

Note that this snippet will fail on <select multiple> elements.

It appears that the new HTML 5 form inputs don't work with serializeArray in jQuery version 1.3. This works in version 1.4+

How to get all form elements values using jQuery?

You can use a serialize() function of JQuery:

    var datastring = $("#preview_form").serialize();
        $.ajax({
            type: "POST",
            url: "your url.php",
            data: datastring,
            success: function(data) {
                 alert('Data send');
            }
        });

And read in PHP:

echo $_POST['datastring']['dialog_box_textarea_1'];
echo $_POST['datastring']['radiobutton_1'];
........

And get ***data-**** to tag HTML5 you can see this example:

<div id="texto" data-author="Ricardo Miranda" data-date="2012-06-21">
<h4>Lorem ipsum</h4>
  <p>
    Lorem ipsum dolor sit amet, ius integre eligendi et,
    sea ut expetendis conclusionemque,
    mel at ornatus invenire. His ad moderatius definiebas omittantur,
    liber saepe albucius sea cu.
    Audire tamquam dolores vis ne, mediocrem consulatu eum ex.
    Duo te agam saepe convenire, et fugit iisque his.
 </p>

<script type="text/javascript">
$(function() {
    alert("The text is write " + $('#texto').data('author'));
});

And

<div id="texto" data-author='{"nombre":"Ricardo","apellido":"Miranda"}' data-date="2012-06-21">
   ...
</div>

<script type="text/javascript">
$(function() {
    alert("The text is write " + $('#texto').data('author').apellido + ", " +
        ('#texto').data('author').nombre);
});
</script>

Convert form data to JavaScript object with jQuery

serializeArray already does exactly that. You just need to massage the data into your required format:

function objectifyForm(formArray) {
    //serialize data function
    var returnArray = {};
    for (var i = 0; i < formArray.length; i++){
        returnArray[formArray[i]['name']] = formArray[i]['value'];
    }
    return returnArray;
}

Watch out for hidden fields which have the same name as real inputs as they will get overwritten.

How do I get the the closest form data using jQuery when a child input has changed?

You can try this,

$(document).ready(function() {
   var formObj = {};
   $('form input:checkbox').change(function() {     
        let form = $(this).closest("form");
        formObj[form.attr('id')] = {};
        form.serializeArray().forEach(function(elem){
            formObj[form.attr('id')][elem.name] = elem.value;
        });
        console.log(formObj);
    });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form action="http://myurl.com/1" id="form-1">
    <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
    <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>
<form action="http://myurl.com/2" id="form-2">
    <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
    <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>
</form>
<form action="http://myurl.com/3" id="form-3">
    <label for=""><input type="checkbox" name="monday" value="1" id=""> Monday</label>
    <label for=""><input type="checkbox" name="tuesday" value="1" id=""> Tuesday</label>    
</form>

How to use jQuery Ajax to get form data

When you open the window save the reference to a variable, making sure the variable is in scope of your $.ajax() function:

var childWindow = window.open(url, '_blank', 'width=700,height=700,left=' + left + ',top=' + top);

Then you can use this reference in the jQuery selector:

$.ajax({
    type: "GET",
    url: sitePath + 'supply-chain-pressure/EmailRequest',
    data: $('#emailrequest', childWindow.document).serialize(),
    success: function(data) {
            alert(data);
    }
});