Passing Javascript object to PHP using post on submit and store data in mySQL DB

Question

I'm having issues posting JS object into a PHP page on submit and then store it into mySQL db.

Here's the script:

var idToDb = [];
var nameToDb = [];
var friendToDb ={};
$('.btn-add').click(function(e){
    e.preventDefault();
    $(this).toggleClass('btn-info btn-success');
    $(this).toggleClass('friend-selected');
    $(this).html($(this).html() == "Selected" ? "Add" : "Selected");         
    addOrRemove(idToDb, $(this).parent().data('id'));
    addOrRemove(nameToDb, $(this).parent().data('name'));
    friendToDb = _.object(idToDb, nameToDb)

I want to post this array "friendToDb" to a separate PHP page using post after clicking submit button and then store it in mySQL db.

Here's what I'm trying to post in PHP:

<form method="post" action="friend_input.php">
    <div id="submitBtnRow" class="row top-plus">
      <div class="col-md-12">
        <div class="form-group">
          <input type="submit" id="submitBtn" class="btn btn-info btn-lg btn-block" value="SUBMIT">Submit</a>
        </div>
      </div>
    </div><!-- /submitBtnRow -->
</form>

And then in friend_input.php, I'm trying to fetch friendToDb and store in mySQL db and this I'm not sure how to do.

Please advice me how this should be done.

Thank you.

What issues are you having? Where is the code that tries to submit it? — Barmar
– Barmar, Commented Oct 14, 2013 at 16:38
If i am not wrong friendToDb is an object not an array.Your code says so. — Joke_Sense10
– Joke_Sense10, Commented Oct 14, 2013 at 16:44
@NabeelSheikh Yeah sorry that's an object. And I'm not aware of ajax at all. — rrg
– rrg, Commented Oct 14, 2013 at 16:46
@Barmar Sorry I forgot to include that. I've updated my question. — rrg
– rrg, Commented Oct 14, 2013 at 16:52

Joke_Sense10 · Accepted Answer · 2013-10-14 17:56:25Z

1

Make form action="" and Use ajax to pass your object to php:

$.ajax({
url:"friend_input.php",
type:"post",
data:{value:JSON.stringify(friendToDb)},   //Converts a JavaScript value to a JavaScript Object Notation (JSON) string.
success:function(result){
// response from php page
}
});

In php page:

echo json_decode($_POST['value']);  //Takes a JSON encoded string and converts it into a PHP variable.

edited Oct 14, 2013 at 17:56

answered Oct 14, 2013 at 17:00

Joke_Sense10

5,3972 gold badges20 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

rrg Over a year ago

Thanks for this, but how do I make sure that this happens only after I click the submit button? And could you also explain what does "//response from php page" means? Thanks

Joke_Sense10 Over a year ago

Use this function once friendToDb is declared. i.e after assigning value to friendToDb. "//response from php page" means the response that your getting from your php page.i.e in this case $_POST['value'] will be displayed if you alert variable result

rrg Over a year ago

Ok. So I did what you told me and after I click the submit button, the page gets redirected to friend_input.php and I get an error: "Undefined index: value in C:\xampp\htdocs\project-1\friend_input.php on line 37"

Joke_Sense10 Over a year ago

Is it getting redirected via ajax or form action??

rrg Over a year ago

It should get redirected via form action because the variable friendToDb is dynamic and is not final until user clicks submit button.

|

user2571962 · Accepted Answer · 2013-10-14 16:54:39Z

0

Add this to your form

<input id="friendDb" name="friendDb" type="hidden" />

Then using use

$("#friendDb").val();

To set the value before posting to your script.

answered Oct 14, 2013 at 16:54

user2571962

793 bronze badges

1 Comment

rrg Over a year ago

Thanks. But what is the connection between <input> tag and setting the variable $("#friendDb").val();? I followed your approach and changed the input tag and used another variable to store #friendToDb and tried to echo it in php. But nothing was displayed.

Collectives™ on Stack Overflow

Passing Javascript object to PHP using post on submit and store data in mySQL DB

2 Answers 2

9 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related