Make Post Api Call from HTML - javascript

I want to make a post API call from a anchor HTML tag and URL will be included in the href.
How can i attach the body parameters.
<a href='http:/test_url:5002/api/GetFile'></a>
And in this I want to send the body parameters in the call as well.
I want to find a way to include this in the html tag itself, not in the javascript file.
Help will be appreciated.

Links are designed to GET a URL. You cannot make a POST request directly with them.
Use a form with a submit button instead.

Thats what forms are for. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form
Just create a form with a submit button. You can also specify if you want to open the requested URL in a new tab with the target attribute.

This is a way you could do it
<form method="POST" action="/api/PostFile">
<!-- with input in between -->
<!-- and a submit button-->
</form>

there's only one way for you to POST data with a link... you would need to wrap the code in a <form> and use that link to submit the form, for example:
<form id="frm" ation="http:/test_url:5002/api/GetFile">
<input type="hidden" name="param1" value="value_for_param1" />
...
...
</form>
any input can be used to append parameters to the <form>, as an example, the hidden is used
now, remember that you shouldn't use http:/test_url:5002 just minimize to /api/getfile or you would most likely get caught into CORS issues

Related

HTML form submit adding flag into URL

I have a simple html form. When the form is submitted, the page is refreshed and the input is appended to the url.
<form>
<input name="q" type="text" />
</form>
For example, the original URL is:
file:///Users/Download/dd.html
When the form is submitted, the URL becomes
file:///Users/Download/dd.html?q=ccc
I want to add a flag to let the backend knows where the request is from. Is it possible to add a flag into the header?
If not, I want to add &global to the end of the URL, so the url becomes file:///Users/Download/dd.html?q=ccc&global I tried to set the value of the input, but it will change what displayed in the page.
I am wondering if it is possible to add a flag into header, so my backend java code can handle it. Or, add the flag to the end of the URL.
Thanks a lot!
You cant add headers with a form but you can add other params to the form with a hidden input
<input type="hidden" name="global" value="" />
If you really want to add headers you will have to use javascript and ajax.
Keep in mind that once you use params in the url a user can either refresh the page or manually add the params which may not be what you expected.

Add hidden form variable to the end of the URL

I have searched Unbounce and Google for documentation, but can't find a way to make this work. Any help is greatly appreciated!
Use case:
I have a test page setup in Unbounce and it would be great when a user lands on the page and submits the form that the value being generated through the script below in the hidden field is added to the current URL upon submission.
It's important that if the user lands on the page from an advertising campaign that the value is added to URL and does not replace it.
Example:
User lands on testpage.com or testpage.com?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA
Unique ID is created with the following JavaScript and added to a hidden field:
<script type="text/javascript">
$(document).ready(function() {
var id = new Date().toISOString().replace(/[-tTzZ:.]/g, '');
$('#lead_id').val(id);
});
</script>
User clicks submit and and is redirected to a thankyou page with the value of the hidden field passed in the URL:
testpage.com/thank-you?lead_id=1234
testpage.com/thankyou?qs=3134728&pcd=THANKS20&dclid=CNi4wvCv39cCFZdFNwodE_wALA&lead_id=1234
I should also mention that I can not edit the html of the form so this would need to happen with JavaScript as Unbounce provides a space to add custom code.
Is the form method get? If it is post it wont append that to the URL for the hidden field.
Your approach seems right however if this is the HTML on page:
<form action="http://example.com" method="get" id="theForm">
<input type="hidden" value="xyz" />
<button type="submit">Send</button>
</form>
You can use some JS code like one of the following to modify this...however you'll want to verify that everything still works as expected:
document.getElementById('theForm').action = "http://another.example.com";
document.getElementById('theForm').method = "get";

Sending data to php script without ajax

I am required to send data from an html page, via input elements to a php script and I cannot use ajax for some reason. How to accomplish this?
My code is something like this:
HTML:
First Name : <input type"text" name="first_name">
<br><br>
Last Name : <input type"text" name="last_name">
<br><br>
<button id="submit_btn">Submit</button>
Now, I want the javascript to be something like :
function redirect_from_here() {
close(); //close the current window
window.location='./phpfile.php'; //load the new page which will process the data sent to it.
}
My question is how do I send the value in the input elements in the HTML portion, as data to be processed, to the php script (phpfile.php in this case).
Please note that I prefer not to use html form for doing the job.
You are using HTML form as there are input fields in you code.
Inputs are part of a form and should be wrapped by a form element
Why using JS for submitting the form when you can use <form action='script.php'.. for that?
I suggest that you revise your requirements instead of trying to come up with a hackish way of how to send the data..
Just submit a form with action="phpfile.php"
if not interested with html,
then in the window location bind the values as a GET form method do

Change the form fields to url

I need to change the form to a single link instead of post as below:
Instead of http://example.hu/search.php?product=shoes
I want the form to lead user only to http://example.hu/products/shoes
I have fixed the rewrite and everything. Only I need the help with the form in the homepage. Thanks for your help.
You need to change the form up a little. Instead of using the action parameter on <form> to send the user along, instead you'll need to drop the form tag and do some javascript trickery to make the url like you want. Here's an example that uses jquery, but it could also easily be done in vanilla JS. http://jsfiddle.net/7czFq/
The answer to my question was this:
Just go to this form action + name using javascript when submit is pressed, like this:
<form>
<div><input type="text" placeholder="Search for a something..." name="q">
<button type="submit" onclick="window.location.href = this.form.action + encodeURIComponent(document.getElementsByName('q')[0].value); return false; ">Search</button></div>
</form>
The form will send user to a URL like http://localhost.hu/search/q/

php form : twig parameter from javascript or textarea html

i have a textarea defined by an id
<textarea id='vegetable'> Tomato </textarea>
i have a button
<button type="button" onclick="MyFunction()">generate vegetable</button>
which trig a javascript in order to modify the content of the textarea
<script>
function MyFunction()
{
document.getElementById("vegetable").innerHTML = VegetableNameGenerator();
}
</script>
The problem is this php action :
<form action="{{ path('mypath', { 'myparam': ??? }) }}" method="post" >
<input type="submit" />
</form>
??? must be the content of the textarea (which is also known by the javascript code) but i don't know how to access it in twig.
I guess there are several way of doing that : jquery, dom, global variable twig... any syntax example would be great.
This is impossible in the way you're describing it.
When a request is made to the server, twig renders the page, then it is sent to the browser, and then javascript can run.
There are options for how to make this work:
Create a controller action which returns the rendered path when you call it using a GET request with the provided parameter. Then create an event listener on the submit button that blocks the submit process until it has retrieved the route via AJAX and modified the form's action attribute.
Redirect from your controller to the path you want displayed. myparam will be included in the post data, so you can redirect from your controller action after you've handled the form.
$this->redirect($this->get('router')
->generate('mypath',
array('myparam'=>
$this->getRequest()->get('myparam')
),
true);

Categories

Resources