Change the form fields to url - javascript

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/

Related

Make Post Api Call from HTML

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

set value in a form or pass a value in a form using jquery or javascript or ajax

i created a Google Form and list down all the ID in each input type, and then created a localhost with the same ID,
The first thing i want to do is to save the values into a localhost and pass the values in the Google Form or set the values into the corresponding ID or Name in each input type in a new tab, is there a way to do this using ajax or jquery?
my form looks like this
<form method="post" action"">
<input type="text" name="FName">
<input type="text" name="LName">
<input type="Submit">
</form>
$post('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform'{FName:Fname,LName}function(){
window.open('https://docs.google.com/a/grabtaxi.com/forms/d/e/1FAIpQLSfjiuhFbURVavdNW82ofHG3gPpBUKkK2VATQQKmV-YKKrJ75Q/viewform');
});
i am trying to use the $.post() in jquery but it looks like i cannot set the values into the Google Form.
Any tips please... Thank You very much
You should wrap your javascript code inside a scipt tag. Then, you should bind the code to submit event, tha happened when you press the submit button.
<script type="JavaScript">
$('input[type=submit]').submit(
// here you should put your code
});
</script>
And check your code, you wrote $post instead of $.post mi sing the dot.

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

Retrieving Input Text Value

For the following HTML
<form>
Enter hash here: <input type="text" name="hash">
<button type="submit" formaction="/tasks/">Retrieve Url</button>
</form>
How can I re-direct the user to /tasks/A where A = whatever the user typed in the "hash" <input> box?
Thanks
Take a look at this post will help.
It do exactly the same thing you want with example.
You'd need to either prevent the submit's default action (event.preventDefault();), or change the button from type="submit" to type="button", then use JavaScript to set the form's action. Here's some jQuery that could do the job for you:
$('button').click(function() {
//set the form action
$('form').attr('action', '/tasks/'+$('input[type="text"]').val())
//submit the form
.submit();
});
See a working example at http://jsfiddle.net/jhfrench/BQ8MW/
You could use a temporary post and redirect. For example:
<?php
if(isset($_POST['hash'])){
header("Location:/tasks/" . $_POST['hash']);
}
?>
Or if you want you could use AJAX to collect the value and then redirecting without the refresh.

How to retrieve html form elements and display the values elsewhere on the page

I am inexperienced so sorry if this is a dumb question but I'm looking around and I haven't found an answer that works for me. I am using JavaScript and I have an html form with one text input. When someone enters a value for that input and submits the form I want to return to the same HTML page but with what they entered displayed elsewhere on the page. Here is my form:
<form name="chatInput" action="index.html" method="get">
chat:<input type="text" name="chat"/>
</form>
I saw something about having:
var chatText = document.forms[0].elements[0];
But when I try to use this I get [object HTMLInputElement]
Also I would only want to create that variable if the form has been entered once already but not initially. How would I check for this?
Thanks for any info.
var chatText = document.forms[0]['chat'].value;
http://jsfiddle.net/XLeAn/
If you don't want to re-update the html, I'd recommend not using the form tag.
Instead, I'd create a button with the onclick attribute.
<input type="button" value="Update" onclick="someFunction()">
Then in the JS portion, have something like this.
var someFunction = function(){
var chatText = document.getElementById("this-is-the-element-I-want").value;
}
Of course, make sure that the element you are trying to retrieve info from has an id.
<input type="text" name="chat" id="this-is-the-element-I-want">
EDIT: Code indents and clarity
Try this:
var chatText = document.forms[0].elements[0].value;

Categories

Resources