First of all, thank you all for your help :) Really appreciate it as I am a total noob.
Second, I am trying to add info to an HTML form:
Email Address &email=x - Used in the request body The email address of the user >filling out the form. While an email is not required, HubSpot will not create a >contact without a valid email address. Please see this page for more details >about how the email address will be validated.
HS Context &hs_context=x - Used in the request body A JSON formatted block >that contains contextual information for the form submission. See the following >entries for descriptions of the included data, and below for the format of this >parameter.
I am totally lost here in terms of where to add these and also how to add the JSON data. Here's what I have so far:
<!DOCTYPE html>
<html>
<body>
<form action="https://forms.hubspot.com/uploads/form/v2/:12345/:1234-432-6575-93456" method="post" enctype="application/x-www-form-urlencoded>
E-mail <br>
<input type="email" name="email">
<input type="submit">
</form>
</body>
</html>
Here's the JSON code that needs to be added: >The hs_context parameter should > contain the following data, formatted in JSON.Please Note All parameters must be >URL encoded before being passed through the API, including the hs_context >parameter.
{
"hutk": "60c2ccdfe4892f0fa0593940b12c11aa",
"ipAddress": "192.168.1.12",
"pageUrl": "http://demo.hubapi.com/contact/",
"pageName": "Contact Us",
"redirectUrl": "http://demo.hubapi.com/thank-you/"
}
I've got this far by myself with Googling but now I am completely lost. Help please? :)
I don't know hubspot but I think you have to send your request using javascript.
In your javascript you can easyly get your form parameters by adding an id to your field and doing like so :
var email = document.getElementById('email');
and send your request like described here :
Sending a JSON to server and retrieving a JSON in return, without JQuery
Related
I have a working example that sends a request with a HTML form.
<html>
<form action="{{url}}?id=123" method="POST">
<input name="request_token[key]" id="key" />
<button type="submit">go</button>
</form>
</html>
I want to send the same request with Postman, but I don't know how to set the parmeters.
I tried to add "key" with the value in the body in json format (Content-Type was set to application/json). It did not work. And many other variations either.
{
"key": "{{theKey}}"
}
In the network tab, chrome sends request_token[key] as key name. This could not be the one I should send?
How do I convert this example to a working postman request?
I found the solution^^
The key name is "request_token[key]". I was irritated cause I get an error if I want to add brackets in the header. But if I add this key as form-data and not in json format, it works.
So I tried to make a URL Shrinker for fun and used the Traversy Media tutorial for it.
Here's the GitHub of his project: https://github.com/bradtraversy/url_shortener_service
In order to make it into a full Website, I have to make a UI...
But I am stuck with the POST request I am generating via ejs.
I currently have written this code in my index.ejs:
<body>
<header class="header">
<h1>Shrinker</h1>
</header>
<div class='main'>
<form action="http://localhost:5000/api/url/shorten" method="POST" class="content">
<h2 class="shortenheader">Url Shortener</h2>
<div class="input-group">
<input type="shortUrl" class='neumorph-input' placeholder='Your Link' />
<input type="submit" class='neumorph-btn'>
</div>
</form>
</div>
</body>
But it always gives me the error "Invalid long url" which is coming from the code structure of the file in routes/url.js.
In the tutorial he used a simple POST request with a content-type of application/json. Which worked just fine. I am using mongodb atlas, so the cloud version of the database.
POST http://localhost:5000/api/url/shorten
Content-Type: application/json
{
"longUrl": "https://www.stackoverflow.com"
}
I guess I have to use that type in my index.ejs but I don't know how to do that. Can somebody please help?
Well, a HTML form is sent as an urlencoded string (just like the GET query string) or form-data (which can contain attachments), never JSON. See https://www.w3.org/TR/html401/interact/forms.html#adef-enctype
To achieve that, you will have to make an AJAX request, in which you'll be able to send whatever data you want.
To form the request body you could serialize the form and then convert it to JSON. Or, the easiest way since there's only one property, you could build the body manually: var data=JSON.stringify({longUrl:$("#shortUrl").val()});.
Also, you have an error. type="shortUrl" is not valid. It should be type="text" and name="shortUrl", or id="shortUrl" to be able to select it with $("#shortUrl").
If you've never done it, the easiest way would be with jQuery. See https://api.jquery.com/jquery.ajax/
I am finding it difficult to retrieve data from a web page when that data was initially passed in from the controller layer.
I am using Thymeleaf 3 and Spring boot v1. I have a webMVC controller which is passing an object to the template. The object looks something like this (pseudo-code):
public class Person{
// Nested object retrieved from various data sources
// and passed to the UI
private Address address;
private Job job;
// Form values I want to retrieve from UI
private String formValue1;
private String formValue2;
// getters/setters
}
My html page is divided into two sections. One section displays most of the Person values, while the other section includes a basic form. When the form is submitted, I want the form values plus ALL original values returned to the server.
What I'm finding is that it seems Thymeleaf will only retrieve values which are in the form, which means I have to stretch the form across both sections of the page, even though the user will only fill out one section of the page. So now the html looks as follows:
<html>
<!--header/body/etc -->
<form th:object="${person}" th:action="#{/person/id}" method="post">
<!-- Form Inputs -->
<input type="text" th:field="${person.formValue1}"/>
<input type="text" th:field="${person.formValue2}"/>
<!-- Values not used in form, but included so they will be sent back
to server -->
<input type="text" th:field="${person.address.city}" readonly="readonly"/>
<input type="text" th:field="${person.address.street}"
readonly="readonly"/>
<input type="text" th:field="${person.job.title}" readonly="readonly"/>
</form>
</html>
Additionally, it seems that Thymeleaf can only retrieve values that have the attribute th:field, but th:field is only assignable to the <input/> element (as far as I know), so any long text I have is truncated to the normal length of an input field, which is rather limited.
So I'm wondering if anyone can help with the following questions:
Can Thymeleaf return values which are not within a form (but returned when the form is submitted)
Is th:field the only option I can use for sending data back? (I've successfully displayed data with th:text, but no luck sending anything back).
Thanks.
Can Thymeleaf return values which are not within a form (but returned when the form is submitted)
This is more about how HTML forms and POST in HTTP works here. HTML form will send whole data within and Thymeleaf will bind that data to an object in your controller. So if you want all the values you should in fact wrap it all in a single form - this is a good way to go. If the case is that you don't want to display all the fields you could use hidden fields.
If you still would like to keep the data in separate forms for some reason you could try to work around it:
By using JavaScript to collect data from both forms and send it
Try to name both forms the same. I am not sure about it but it might work
I wouldn't recommend any of those anyway. Try to keep it simple.
Is th:field the only option I can use for sending data back? (I've successfully displayed data with th:text, but no luck sending anything back)
For a long text you can use textarea.
I understand how to pull out the data attribute in JQuery from an HTML form, but can it be done from within a .cfc controller to which a form is passed?
Page.cfm
<cfform action="controller.cfc" method="getData">
<cfinput name="uploadMyData" type="submit" data-primaryID="123">
</cfform>
Controller.cfc
function getData(rc){
writeDump(rc.uploadMyData.?????(primaryId)????);
}
Not sure if the data attribute is stored in any way in the struct.
I tried a getMetaData on the rc.uploadMyData but just got a list of java functions.
Update
Adrian J. Moreno
Data attributes are just markup that impact the internal data object of the element. They are not part of a form request. You wouldn't submit a form to a CFC file either. Using Ajax, you can read the value from the data attribute and pass it to the server as part of the request's data packet.
So in Page.cfm
<script type="text/javascript">
var otherData = $("#myForm").serialize();
function sendForm(){
var primaryID = $("#submitData").data("primaryID");
jQuery.post("urlpath/controller/",'{"id":'+''+primaryID+'}', function(dataReturn, status){
//I want to get my form and submit the other data as well to the controller
}
}
</script>
<form id="myForm" action="sendForm()">
<input name="uploadMyData" id="submitData" type="submit" data-primaryID="123">
<input name="importantThing" value="#importantVariable#" type="text">
</form>
pass it to the server as part of the request's data packet.
how would I pass them together?
I want this form submission to redirect to another page so I don't see how I couldn't use the controller? The form data should go the newPage.cfc to process it and get it ready for output on newPage.cfm. I'm using framework one but that doesn't change much.
Thanks for the help, what do you think?
Update 2
Ok, now I ask myself why I would want to submit a form with both ajax and coldfusion form submission together? I realize that's not what should be done. I can either
Submit the form via JQuery/Ajax with no page reload, and include the data attribute in the post url and include the serialized form data
Page.cfm
<script type="text/javascript">
var otherData = $("#myForm").serialize();
function sendForm(){
var primaryID = $("#submitData").data("primaryID");
jQuery.post("controller/method/?primaryId="+primaryID+"",otherData, function(dataReturn, status){
//do stuff with dataReturn or do a javascript redirect
}
}
</script>
Controller.cfc
function method(requestContext){
//do stuff with that otherData, all stored in request context. includes the primaryID value i appended to the url
//send it back to the Page.cfm
fw.renderData("rawjson",jsonString,200,"");
}
and if that made it back ok, I could run a function back in my original view with that information. Like display it on the page.
Submit the form traditionally which would result in a page reload. Include a hidden input type with the value that I want to pass.
Page.cfm
<cfform action="controller.method" method="getData">
<cfinput name="uploadMyData" type="submit" value="Submit Form Button">
<cfinput name="primaryID" type="hidden" value="123">
</cfform>
Controller.cfc
function method(requestContext){
//do stuff with requestContext.primaryID
//go to the view method.cfm or do a fw.redirect("new page or back to the page i came from");
}
Why would we want to submit the form twice? just do one or the other.
Matt, I think you're confused about a number of things that are quite basic to HTML, JavaScript and jQuery and have nothing to do with ColdFusion.
Let's start with an HTML Form.
<form id="{{unique_dom_value}}" action="{{uri}}" method="{{http_verb}}">
unique_dom_value: Some string unique to the document. Allows you to reference the entire form object using JavaScript.
uri: The URI to which you submit the form for processing.
http_verb: Defaults to GET, but you should most often use POST.
The URI you're trying to post to in just controller.cfc, but that won't do anything but redirect you to the ColdFusion CFC inspector.
In the context of most MVC frameworks, index.cfm?event=handler.action uses the underlying framework to call a function named action within a CFC named handler. Without a framework, you have to do that manually. So if you have a CFC named controller.cfc and want to send your form data to a function named myFunction, you need to say action="controller.cfc?method=myFunction.
But that's not right either. When you submit a form, the browser expects to load the URI that's found in the action attribute. But your CFC function doesn't respond with HTML, it responds with something else. Maybe a query object, maybe JSON. This is why you would use jQuery.Ajax() to send the form data (including the data attribute values) to the CFC's function, which should return data in JSON. Once you get a response, you can continue processing on the same page or redirect to another page.
However, since you're using Framework One, I would look into the documentation on using renderData() within one of your handler functions.
I'm not an expert but i know a little about HTML forms, here is my problem
i want to create a simple html page with form for my customers to enter a gps values to maps.google.com and get back the result page embedded in the same html
here is the exact format of my string
as an example : 32 06 12.66N, 20 12 22.65E notes that there is spaces between values
that should be post to ( maps.google.com/?q=32 06 12.66N, 20 12 22.65E ) and take the result page and embed it back in the same html page
i want to create a from with separated input fields for every value (drop down menu for the "N" "W" and "S" "E")
would you plz tell me what is exactly the html code for that , appreciate any help guys
You'll need to combine multiple elements into one form element. Use a hidden and some javascript to populate it before submitting.
Something along these lines
<form id="myForm" method="post" action="http://maps.google.com">
<input id="q" type="hidden" name="q" />
<!-- all your other inputs -->
</form>
Then some javascript:
<script type="text/javascript">
function Bind()
{
// bind FillQ to the submit event of the form
}
function FillQ()
{
var q = document.getElementById("q");
q.value = ... // the combination of your other form fields
}
Bind();
</script>
You need to do some scripting to achieve this. Either server side or client side. Consider either hiring someone out or doing some research and learning some coding. I'd recommend your local junior college, or a free online web programming course.
If you have a specific problem with your implementation, post your question here and we will be happy to help, don't expect us to do all the work for you though ;)
Here are some hints to get you started:
Use javascript to collect the drop down fields, and create the google maps url string.
You can search google maps developer site to find code on embending this into your page.