javascript

Question

130 votes

1 answers

javascript - Ajax: How to pass both form data and credentials on submit?

Get the solution ↓↓↓

Main Problem :- Ajax: How to pass both form data and credentials on submit?

I have the below function which is called when a user clicks on a submit button:

<script type="text/javascript">
function submitForm() {
    console.log("submit event");
    var fd = new FormData(document.getElementById("campaign_form"));
    console.log(fd);
    var username = $('#username').val();
    console.log(username);
    var password = $('#password').val();
    console.log(password);
    $.ajax({
        type: "POST",
        url: "http://localhost/testing/post_campaigns.php",
        data: fd,
        data: {
            "username": $('#username').val(), 
            "password": $('#password').val()
        },
    });
    return false;
}
</script>

My php URL is called properly, but I don't see that my data is passed.

For example, I would typically expect to see in developer tools:

http://localhost/testing/post_campaigns.php?username=XXX&password=YYY

But I only see:

http://localhost/testing/post_campaigns.php

My variables are written to the console properly so I know they exist and have values.

I'm sure the issue is along the lines of my syntax; but I'm not sure how to format my Ajax properly to accommodate both object FormData and string variables username/password.

Basically, my overall code asks the user for a sheet they have filled out with specific values under designated column headers, and I read that information and POST it to our ad server. So I need both the FormData and the Username/Password provided by the user to be passed to my PHP file when I execute the POST request to our ad server with the information/changes requested by the user.

If my question/dilemma is not clear or you need more code, please let me know.

Thank you,

Edit: Attaching a screenshot of FormData in console per request.

Undefined asked

2022-02-8

Source

Share

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Similar questions

Find the answer in similar questions on our website.

275 php - Form is submitting only the final row data in a foreach loop, not the correct selection information

137 javascript - How to include HTML data (tags) as value in "arrayToDataTable" of Google Pie Chart?

673 php - 400 bad request when put enctype="multipart/form-data" in my form

339 javascript - How do i check for duplicate entries in a database using pdo, php and ajax?

600 javascript - Returning data from jQuery ajax request

737 javascript - How to display PHP CodeIgniter error validation if the form has error and display successfully submitted if it has no error

742 php - How to pass the data dynamically to post__in

322 php - Create dynamic DataTable from database

581 php - hello i need create dyanmic database connnection with dynamic user create database from dashboard site

477 php - Show data from database

Undefined answered · Answer 1 · 2022-02-8

Answer

Solution:

jQuery / AJAX Code:- For Sending formdata with other javascript variable together.

<script>
    $('#btn').on("click", function () {
            var formData = new FormData($("#form1")[0]);
            formData.append('ipid',id); //id is the variable that has the data that I need
            var path = "http://localhost/testing/post_campaigns.php",
            $.ajax({
                url: path,
                type: "POST",
                data: formData,
                contentType: false,
                processData: false,
                success: function (stuff) {
                    $("#resp").html(stuff);
                }
            });
        });
    });
</script>

Note:- To append param just useappend() method:

formData.append("param", "value");

And in the php-side I catch it:

 echo   $pid = ($_POST['ipid']);

Note:- For more reference regarding this check this

https://developer.mozilla.org/en-US/docs/Web/API/FormData/append

Popular technologies

Latest questions:

javascript - Ajax: How to pass both form data and credentials on submit?

Answer

Solution:

Share

Didn't find the answer?

Similar questions

Write quick answer

About the technologies asked in this question

PHP

JQuery

HTML

Welcome to webdevask.com

Get answers to specific questions

Help Others Solve Their Issues