Using Hooks to capture item values & insert into url string

Ask the community
,
1

Will you please help me understand how I can hook data that has been inserted in to web form and then insert that data (or rather form value that was entered) into a URL string? I am so… close, but there is something missing because when I run the console.log the string does not show the resulting hooked value - but shows [object Object]

This is the URL I am expecting:
http://www.biolynk.com/customer.i?cmd=add&type=rest&fname=[item.fname.value <NOTE: this is where the hooked data value should be entered or rather inserted]&lname=[item.lname.value]&email=[item.email.value]&phone=[item.phone.value]&"

This is the URL I am receiving in the console.log:
URL: http://www.biolynk.com/customer.i?cmd=add&type=rest&[object Object]

The fetch/hook is trying to call the data but all that is showing up is object Object instead.

Here is how I have it all set up:

IN THE BACKEND…
~~ formfetch.jsw file =>
import {fetch} from ‘wix-fetch’;

export function sendToBiolynk (formdata) {
const url = ‘http://www.biolynk.com/customer.i?cmd=add&type=rest&’ + formdata;
formdata = “fname=[item.fname.value]&lname=[item.lname.value]&email=[item.email.value]&phone=[item.phone.value]&”;
console.log("URL: "+ url);

return fetch(url);

}

~~ formdata.js file =>
export function QualifyForm_afterInsert(item, context) {
item.fname, item.lname, item.email, item.phone;
return item.value;

}

ON THE PAGE CODE…
import {sendToBiolynk} from ‘backend/formfetch’;

$w.onReady(function () {
$w(“#submit”).onClick(formdata);

});

export function formdata() {

var formdata = { 
	"fname":$w("#fname").value, 
	"lname":$w("#lname").value, 
	"email":$w("#email").value, 
	"phone":$w("#phone").value 
}; 

// Process request 
sendToBiolynk(formdata);

}

2

Hey
you cannot send objects using the url. Take the object formdata and run it through JSON.stringify(formdata) and it will be a string. would not recommend using GET is you are going to send data that will be inserted or modify data on the endpoint. Then use POST snd then you can send the object as it.

3

Thank you Andreas! 1st Q: Where do I put the JSON.stringify(formdata)? - on the backend in .jsw or .js files or does that go in the front end?..I have the words “formdata” on each of my named files in the example I sent. Also is POST in the backend or the page code?

2nd Q: On the coding examples I have seen, it shows writes that was inserted in the code, But I need to write the code so it will post the inserted data, so I can’t write it in the code before someone enters the value (if that makes sense); so the hook is somehow not grabbing the value that the user entered?

var JSON.stringify(formdata));

// expected output: “fname=[VALUE]&lname=[VALUE]&…etc”

4

If you must add it all in the url you will need to serialize it to use url encoded string from a Javascript object. Add this function in the backend file and make sure to call it before you run the fetch command on formData.

1920×729 98.1 KB

formData = serialize(formData);

5

Alrighty…here is now where I am stuck:

IN THE BACKEND…
~~ formfetch.jsw file =>
export function serialize (){

serialize = function (obj) {
var str = [];
for (var p in obj)
if (obj.hasOwnProperty (p)) {
str.push(encodeURIComponent(p) + encodeURIComponent(obj[p]));
}
return str.join (“&”);
};
}

import {fetch} from ‘wix-fetch’;

export function sendToBiolynk (formdata) {
const url = ‘http://www.biolynk.com/customer.i?cmd=add&type=rest&’ + formdata;
formdata = JSON.stringify(formdata); <<this does not work because I cannot have commas
formdata = serialize(formdata); <<tried
console.log("URL: "+ url);

return fetch(url);

}

~~ formdata.js file =>
[SAME AS BEFORE]

ON THE PAGE CODE…
when I test submit data in the form, it tries to run the “serialize” but the url is still returned in the console as:
URL: http://www.biolynk.com/customer.i?cmd=add&type=rest& [object Object]

6

Try changing your function to be:

export function sendToBiolynk (formdata) {
       const formdata = serialize(formdata);
       const url = 'http://www.biolynk.com/customer.i?cmd=add&type=rest&' + formdata;
	console.log("URL: "+ url);
	return fetch(url);
}

You first need to serialise the data, and only then to add it to the url.

Liran.