For example, the website https://talky.io/ has a form on its homepage. When you enter text into the form and hit the button, you're taken to a page that's https://talky.io/[your text]. How do you do this? What's the best way to do it?
Thank you!
You can use onSubmit and change the action attribute of the form via javascript, then return true. The code could look like this:
HTML from linked page:
<form id="createRoom">
<input id="sessionInput" placeholder="Name the conversation" autofocus="autofocus">
<button type="submit">Let’s go!</button>
</form>
Js code:
document.getElementById("crateRoom").onsubmit = function(){
var url = encodeURIComponent(document.getElementById("sessionInput").value);
document.getElementById("crateRoom").action = "/" + url;
return true;
}
It is server-side script job. You can look at some MVC framework and the url parameters
You can use GET method of form;for example:
<form action="index.php" method="get">
Page: <input type="text" name="page">
<input type="submit" value="Submit">
</form>
that after submit will go to index.php?page=yourEnteredPage.
You can use PHP symfony or codeignitor, if you use .net then create a new MVC project.
But if you only need to change urls like
www.mysite.com/mypage.php?something=value
to
www.mysite.com/value
You can do a mod rewrite in apache or if you're using .net then use RegisterRoutes in your global.asax.cs
Using a form you can submit data to a location/url that was given in the action attribute of the for, for example
<form method="POST" action="http://example.com">
<input name="first_name" type="text" value="" />
<!-- Form elements -->
<input type="submit" name="mySubmitButton" value="Submit">
</form>
This form will submit the form data to the given action url when submit will be pressed and on the derver data could be retrieve using
$first_name = $_POST['first_name';];
and so on. The method POST is used to submit the form in the post array so you can retrieve data using $_POST['formfieldname'] and if you use method="GET" then you can get submitted data from $_GET variable, like, $fname=$_GET['first_name']. GET has limitation of amount when submitting data (safe to use up to 2000 characters IE's limit) and is visible to address bar of the browser and not being used for login (password) and POST can send more data than GET and also not visible to address bar.
You may read this.
Fairly possible with URL Rewriting
http://en.wikipedia.org/wiki/Rewrite_engine
Related
I'm using a nocode API that returns some HTML based on some parameters in the URL when the user makes a GET request. I'd like to improve the user experience and have a form like a contact 7 form that can map user input for each form field in the call to API.
For example form would look like following:
Name: Todd
Email: todd#gmail.com
Key: zjdHSDFHSDFHSDFS
My API is example https://api.com/endpoint/v1/
When the user enters name, email and key I need to make a call like this:
My API is example https://api.com/endpoint/v1?name={name}&email={email} with the Key field passed in as a header (X-BLOBR-KEY: {key})
I couldn't figure out how to do this with javascript or with a wordpress plugin.
Here is some code. It is a generic HTML form and a custom submit function in vanilla JavaScript placed inside the head tag. I think it achieves what you want besides the header.
It is not possible to perform an HTTP redirect with headers, read more here. An alternative would be to perform an async request then if it returns HTML you could replace the existing HTML with the new HTML. This is a bit of hacky approach in my opinion.
As it stands, I'm not sure what value a header like this would be adding. If it's hard-coded into the HTML/JavaScript anyone could see it, manipulate it, or use it on their own form to spoof yours. To avoid this you could look into using PHP. I know W3 has resources for HTML forms with PHP.
<html>
<head>
<script>
function submitFunction(e) {
// Prevent the default form submitting actions to occur
e.preventDefault();
e.stopPropagation();
// Get the form
let form = document.querySelector("#myForm");
// Get all field data from the form
let data = new FormData(form);
// Convert key-value pairs to URL parameters
let params = new URLSearchParams(data);
// Build the endpoint URL
let newUrl = `https://api.com/endpoint/v1?${params}`;
// Send to endpoint URL
window.location.href = newUrl;
}
</script>
</head>
<body>
<h2>HTML Form</h2>
<form id="myForm" onsubmit="submitFunction(event)">
<label for="fname">First name:</label><br>
<input type="text" id="fname" name="fname" value="John">
<br>
<label for="lname">Last name:</label><br>
<input type="text" id="lname" name="lname" value="Doe">
<br><br>
<input type="submit" value="Submit">
</form>
</body>
</html>
I've got the following form:
<form action="/action_page.php" method="get">
First name: <input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
<input type="submit" value="Submit">
</form>
Once the user hits submit, the full URL will look like this: example.com/action_page.php?fname=John&lname=Doe. I want to be able to grab the full URL of the form like you would if you called document.getElementById("form").action;
Is there a native method in either JavaScript or jQuery that will allow me to grab this URI? I'm wanting to save the full URL in a cookie. I know that I could technically parse each input value and build a string but I was wondering if there was a more simple way about to do this.
Thanks in advance.
var href = $('form').attr('action')+ '?' +$('form').serialize();
Is this what you need? There may be some additional work for checkbox/radio field types.
I am limited by pre-existing constraints and need to keep the structure the same for this project. I am generating forms using PHP and populating the page as needed from them.
I have a customer information form
<form action="index.php" method="POST" id="cust-form">
<input type="text" name="cust-name"></input>
<input type="submit" value="submit" name="submit">
</input>
Below that I have a search form
<form action="index.php" method="POST" id="form">
<input type="text" name="search-tags"></input>
<input type="submit" value="submit" name="Search">
</input>
And a variable amount of forms can appear on the rest of the page, normally just a variable process button to pass to a php backend.
I keep running into issues passing the customer data into a post format so it can be processed by the php back-end. I have tried with javascript
var form = document.getElementById('form');
var data = $('#cust-form').serialize();
data.split('&');
var cust_name = document.createElement("input");
cust_name.setAttribute("type", "hidden");
cust_name.setAttribute("name", "cust-name");
cust_name.setAttribute("value", data[0]);
form.appendChild(cust_name);
But that wont appear in the POST request that I receive. What would be the best way to get that request through without having to do a major overhaul to the code structure?
Are you able to add the hidden "cust-name" input to the html, or is this something that you are unable to modify?
According to MDN (https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute) using setAttribute to set the value works inconsitently. You should try this instead:
cust_name.value = data[0];
I have form on the page, in the background I gather make an array of data that I want to pass to a back end controller. I can $post but I don't want the request to be ajax. I want to submit the array along with form, when the user presses the submit button. Does Javascript allow this anyway?
You can use iframe if you donot want to use ajax.
To POST to an iframe you must use form target.
Sample code :
<form
id="moodleform" target="iframe"
method="post" action="http://www.example.com/login/index.php"
>
<input type="hidden" name="username" value="guest"/>
<input type="hidden" name="password" value="guest"/>
<input type="hidden" name="testcookies" value="1"/>
</form>
<iframe name="iframe"></iframe>
<script type="text/javascript">
document.getElementById('moodleform').submit();
</script>
Why not have a hidden field that you populate with a serialized version of the data?
Alternatively, you could have multiple hidden input form elements with the same name, which (back-end application dependant) should give you the POST variable as an array of values.
Building on that, you could add the hidden input elements dynamically to the form.
I am trying to submit a form using get method but I dont want the form to refresh or rather when it reloads I want to maintain the data. There seems to be lot of questions on similar lines but none that I tried helped. I am posting my code here:
<script type="text/javascript">
function formSubmit()
{
document.getElementById('form1').submit();
return false;
}
</script>
<form id = "form1" method = "GET">
<br> Query: <input name="query" id="query" type="text" size="50" value="">
<input type="button" name="search" value="Get News" onclick = "formSubmit()">
</form>
I am using python on the server side.
Thanks
The statement:
I am trying to submit a form using get method but I dont want the form to
refresh or rather when it reloads I want to maintain the data.
Implies to me that your end goal requires AJAX or at least some passing of data to the server and back. You will not be able to retain scope within Javascript over a page refresh without the use of something like cookies or passing data to/from the server. Having said that these are more akin to secondary storage mechanisms while you want to retain scope (or primary storage). To do this I would recommend AJAX.