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.
Related
I need a little bit of help. I'm stuck at making the form information I have on my first html document show up on the tables in the second html document.
Any help would really feel good right now.
I'm not sure exactly what your question means, but if you are asking about including an html inside another html, check this link: include html in another html
Edit:
If you have no option to use server-side programming, you could use the query string.
In the form, add a method="GET" attribute:
<form action="display.html" method="GET">
<input type="text" name="name" />
<input type="text" name="phone" />
<input type="submit" value="Submit" />
</form>
When they submit this form, the user will be directed to an address which includes the name, phone value as a parameter. like:
http://www.example.com/display.html?name=XYZ&phone=98745654
You should then be able to parse the query string - which will contain the parameters value - from JavaScript, using the window.location.search value:
// from display.html
<p id= 'hi' ></p>
<script>
document.getElementById("hi").innerHTML = window.location.search;
</script>
this should help you to start what you are trying to do.
I'm trying to write a form in which user writes a location and the page redirects there after submit. How can I accomplish that? I have problem to find out how to put something to action="" when I do not know the value yet. Something with this logic:
<form action="how-to-get-this-value">
<input name="location" type="text">
<input name="submit" type="submit">
</form>
I can use whatever I want to do this (javascript, css, php...).
You don't need to make a <form> to do this. Forms are used more often for processing data. Instead, you can use Javascript. There are many ways to do this, but if you want to use a <form>, the easiest way is to redirect the user when they submit the form as follows:
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<form id="form">
<input id="url" type="text">
<input type="submit" onClick="red(); return false" value="Submit">
</form>
Of course, you would probably want to add verification methods to make sure the user gets to where they want to get (ie typing "google.com" would take them to "https://www.google.com/" instead of "yourdomain.com/google.com/").
Alternatively, you can simply remove the <form> tags, and it will work the same.
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<input id="url" type="text">
<input type="submit" onClick="red()" value="Submit">
There are a lot of good answers for this question. But I advise you to do the following...
Create a HTML form like this:
Them submit it to the php page with this. This can also be the same page.
I'm looking for a boilerplate smart way to take the input value, append it to a fixed url like /search/inputboxvalue and send the user there. Is there anyway smart robust way to do it? I could use an onlick handler and a form but I wondered if there is a more elegant way to do it, pref just using javascript.
My code:
<input name="search" id="search" value="" type="text" width="650px"></input>
Try this:
var my_value = document.getElementById('search').value;
window.location.href = window.location.href + my_value
Use following statment to get value from text box and append to current url.After append it will redirect user to that url.
input_box_value = jQuery('#search').attr('value');
window.location.href = window.location.href + input_box_value
Above 2 statement can be insert on particular event.like click
This is not really correct way to form requests. This symbol "/" should tell us, that we go to subdirectory, or its analog. So, to form this type of url, you will need to use javascript.
But, there is more easy way to create this type of request. Native:
<form id="search" method="get" action="search">
<input type="text" name="q" value="" />
<button type="submit">Search</button>
</form>
This small HTML snippet will allow you to visit an url: site.com/search?q=inputboxvalue without any JS. You may even hide submit button and just use Enter to search.
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
I need to change a form so that instead of reloading the page after submitting it, it redirects the user to another page.
This is the form I'm talking about:
<form class="questionform" name="questionform-0" id="questionform-0">
<textarea class="question-box" cols="12" rows="5" id="question-box-' . $questionformid . '" name="title" type="text" maxlength="200" size="28"></textarea>
<input type="text" class="ubicacion" value="" name="question">
<input type="button" name="ask" value="Publicar" onclick="askquestion('questionform-0'); window.location.reload(true);">
I want to remove window.location.reload and change it for something that redirects users to the page their comment will appear.
The problem is that it's not simply a static. So I have no idea how to do it. The URL I want to send users to is:
www.chusmix.com/s?=(content of the second field)
How do I do it? Anyway thanks for any info or whatever that points me on the right direction. Thanks
There is no need to use javascript for this purpose. You only need to set the action attribute of the form tag. It tells where the form information will be sent. So in your case it will be:
<form action="http://www.chusmix.com/s">
Also if you want to send the variables through the URL like: http://www.chusmix.com/s?variable=someValue
You need to set the method attribute as get so it will look like this:
<form action="http://www.chusmix.com/s" method="get">
If you don't want the data sent to be visible set the method to post, note that there are different advantages for each method so i recommend you read more about this if this form is an vital part of your webpage.
The variable names that appear in the url http://domain.com?**variable**= will depend on the inputs name <input type="text" name="**variable**" />
For more information on how forms work you can go to:
http://www.w3schools.com/TAGS/tag_form.asp
http://www.tizag.com/phpT/forms.php
You can ad an action:
<form action="redirection_url.php" method="POST" class="questionform" name="questionform-0" id="questionform-0">
I think you can use both absolute and relative url. Also note that I've added
method="POST" - which defines how the data from the form will be sent, as you already send some data with GET method (that's the stuff after ? in your url) - so this should work pretty well.
If you cannot use the action attribute in the <form> tag, you may redirect the user using window.location (you will probably want to do this inside the askquestion method, not in the onclick attribute).
window.location = "http://www.chusmix.com/s?=" + inputValue;