How to Connect HTML Code to my Database and Form.

I want to create a QR Code (Quick Response Code) for the client who singed up the form. I copy some code in the internet. i want it connect to my form and database.

Code:

  <label class="control-label col-sm-2" for="content">Content:</label> 
  
  <div class="col-sm-10"> 
    <input type="text" class="form-control" id="content" placeholder="Enter content"> 
  </div> 
  
  <label class="control-label col-sm-2" for="content">Content:</label> 
  
  <div class="col-sm-10"> 
    <input type="text" class="form-control" id="content2" placeholder="Enter content"> 
  </div> 
</div> 
<div class="form-group">  
  <div class="col-sm-offset-2 col-sm-10"> 
    <button type="button" class="btn btn-default" id="generate">Generate</button> 
  </div> 
</div> 
1 Like

hey geovel,
i’m not sure what is your goal,
can you explain ?

2 Likes

sorry Roi, I want to create a QR Code from my Forms…

I want to make sure I understand correctly,
do you mean creating an image (in QR Code format) that contains data for each client from the database collection ?

Here is an example.
const userName = ‘geovel’;
$w(‘#yourImage’).src = ‘https://api.qrserver.com/v1/create-qr-code/?data=’ + userName;
Good luck!
Roi

5 Likes

Thank you Roi,
Yes, that’s right, I want to create an QR Code that contains data for each client from the my database collection, but I’m struggling doing it. could you please lend me some of your knowledge how to achieve it?
I badly need it. I’m not really that good in coding. I hope you could help me. Thank you again :slight_smile:

1 Like

Where did you stuck ?
Did you try the example above ?

1 Like

I’m stuck in how to add the code you send above. I’m not really good at it, but I badly need it.

1 Like

Hi Geovel,
Please paste your editor address here and we will look into it further

2 Likes

Here it is Roi → https://editor.wix.com/html/editor/web/renderer/edit/0f2a2a2e-c0ef-4f72-98b3-679302cef3fb?metaSiteId=a6fdb801-9819-4822-8a0c-9d8fd99355b4&editorSessionId=EF97BFFC-3CA8-4798-98F2-3E5BC3665CAD

Thank you in advance Roi, Merry Christmas

1 Like

Ok, few more questions:

  1. Which Database collection is relevant ?
  2. Which fields or data do you want the QR Code to contain ?
  3. How or where do you want to use the QR Code image ?
2 Likes

Good day Roi, I hope you’re having a great day.

Which Database collection is relevant ?
-Database Name: regdog

Which fields or data do you want the QR Code to contain ?

  • All the fields, cause I’m gonna print it.

How or where do you want to use the QR Code image ?

  • I’m gonna print it and distribute it to clients who fill out my fields/registration

and the QR Code places on the regdog/profile (dynamic page). Thank you Roi

1 Like

Hi,
Replace the HTML element with an image element.
Paste this code in “regdog Profile (ID)”

$w.onReady(function () {
	$w('#dynamicDataset').onReady(()=> {
		const thisUser = $w('#dynamicDataset').getCurrentItem(); 
		const {title, service, handlername,email,street,city,state,zip,trainingStatus,dogname,breed,number,code} = thisUser;
		const dataOfUser = `${title} ${service} ${handlername} ${email} ${street} ${city} ${state} ${zip} ${trainingStatus} ${dogname} ${breed} ${number} ${code}`;
/*change to your image ID*/ $w('#yourImage').src = `https://api.qrserver.com/v1/create-qr-code/?size=500x500&data=${dataOfUser})`;
	});
});

Let me know how it goes

2 Likes

Hi Roi, It’s PERFECTLY work! Thank you! Happy New Year Roi.

1 Like

one last question, sorry. change text to html, so I can add some CSS so I can arrange and design. Thank you very much Roi. you’re a savior!

2 Likes

Hi Gevoel,
I’m glad to hear that it worked out!
Here is an example of what you need:

<div>
    <span style="color:blue;margin-left:30px;">Hello World
    </span>
</div>

Good luck!

1 Like

Hi Roi-

I was wondering if I could get some further in depth explanation here please as I am attempting a similar end goal and don’t understand what you meant when you said “Replace the HTML element with an image element. Paste this code in “regdog Profile (ID)”” I have a html code that shows the sporting fixtures relevant to specific teams in my database and I need it to change depending on the selected team. Your advice regarding replacing the html element with an image element- is this within the database table or on the dynamic page?

This is an example of the html code I have for one division (I have different codes for the different team divisions:

This is my website:

I’ve put the html code boxes in this page to demonstrate what I would love it to show but as they aren’t able to be “connected to data” I don’t know how to link it up!

Please help me! I’m desperate!

Hi Imogen ,
“Replace the HTML element with an image element. Paste this code in “regdog Profile (ID)”” refers to a specific API that returns QR Code image.
If you need to pass information to your HTML component you need some this else.
There are two relevant methods for you. postMessage and onMessage .
Here is a great example of how to communicate with an iFrame.
In a Dynamic page you probably need to use getCurrentItem method .
Here is a sample example from the Dynamic page:

$w.onReady(() => {
    $w('#yourDataset').onReady(() => {
        let itemObj = $w("#yourDataset").getCurrentItem();
        $w("#html1").postMessage(itemObj.urlYouNeed);
    });
});

Feel free to paste your code here,
Good luck!
Roi

Hi Roi Bendet

I have a HTML code as

I have a dynamic page which consists of 5 names (text boxes) and 5 html elements. Each html element differs to the other at data-identifier=“xxxxx” only (Please see in the code above). Now I want that the data-identifier of each html element to be connected to their respective text box. so that whatever values comes in the textbox1 (say Pepper) from my database is copied to data-identifier=“Pepper” of html1.

Let say text box with id = #text1 and the html element with id = #html1 . The text box is connected to some field called #Name 1 in my database called #Celebrities . Now I want my data identifier in my html element as posted above to be connected to the text box with id #text1 . So that whatever value comes in my textbox from the database when the dynamic page loads is copied to the data-identifier in html element.

Any help from you will be really very meaningful to me.

Hello, im Thiago
I working on a dynamic page but i cant link my html/website “container” with my database. Does any one knows what to do?