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.
Related
I have an html form that is more or less the following
<form action="/results">
<input name="q" type="text">
<div>See results</div>
</form>
If I type something into the form, such as "my search" and press "enter" I'll be taken to the Results page with something like this: mywebsite.com/results?q=my+search. My problem is that I would like to get the same behavior when someone clicks "See results," which currently takes them to the Results page but without the params. I know using <button> instead of <div> would get me the results I need, but in this situation using <button> is not practical due to how all of the templates have been written.
Concatenate ?q=searchstring to the URL when assigning to window.location.
document.querySelector("#results").addEventListener("click", function() {
let param = document.querySelector([name=q]).value;
let url = `/results?q=${encodeURIComponent(param)}`;
window.location = url;
}
<form action="/results">
<input name="q" type="text">
<div id="results">See results</div>
</form>
If you can use input type submit, try wrapping the it in the div as in this way:
<form action="/results">
<input name="q" type="text">
<div><input type="submit" value="See results" /></div>
</form>
If this not works for you, alternatively you can handle it using javascript as #Barmar answered above.
Folks
I am in need to construct a simple < a> tag. or another such mechanism such as < form> etc
There is a third party tool that does not takes arguments in the url.
But suppose at a certain endpoint "https://example.com/ticket" there is a form that performs a search on given tickets Number. I can head over there and manually type a ticket ID and submit the form and result is retrieved.
This tool has one input and one button
<input id="query" name="query" autocomplete="off" type="text">
<button> name="button" type="submit" class="btn"></button>
On my page I have list of tickets assign to certain users, and I am trying to construct an href link that will take the user to "https://example.com/ticket" in new window and reload the page with provide ticket ID in post method
something like following
TICKET-123
one of the option I tried is
<form action="https://example.com/ticket" method="post">
<input id="query" name="query" autocomplete="off" type="text" hidden>
<button> name="button" type="submit" class="btn" value="TICKET-123"></button>
</form>
Argument in the usr such as https://example.com/ticket?id=TICKET-123 would've been sweet, but form link does not work. what am I missing
Could you try something like this for the form sending a user to search.php
<form action="search" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
where search.php would contain the following
<?php
$ticketnumber = $_GET["ticketnumber"];
header("Location: https://example.com/ticket/$ticketnumber");
die();
?>
This would work if you just need to send users to an external site. As long as the pattern is like this. You then wouldn't need to reload the page if you can send the user to the URL correctly in the first instance.
Your question is a little vague but I think this approach could work because users then must input their ticket number instead of getting the inner text from the <a> tag. Let me know if you're looking at a different approach and please clarify how.
Also, if you didn't want to process this via PHP (I'd recommend it though because users can't see how it's done) you could go with the same form and the following
<form action="example.com/ticket/" method="get" name="searchform" target="_self">
<input type="text" autocomplete="off" placeholder="Enter your ticket number" id="ticketnumber" name="ticketnumber">
<button class="button" type="submit">Search</button>
</form>
Or you could use window.location.replace("https://example.com/ticket/#"); and place the ticket number where # is.
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 want to submit a form without redirecting page. Form is submitted to third party so i can't make changes in php.
What I want to do is:-
Submit for without visiting third party page.
After successful submit show alert.
Current I am using hidden iframe and form target to hidden iframe but I am not satisfied. Is there is any better way to do this using javascript or jquery.
My Form:-
<form target="iframe" action="http://www.example.com" type="post" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
My Iframe:-
<iframe style="display:none" id="iframe"></iframe>
You need to use Ajax for that kind of request.
Please look at some tutorials, this for example http://www.w3bees.com/2013/08/submit-form-without-page-refresh-with.html
Change the iframes id attribute to name:
<iframe style="display:none" name="iframe"></iframe>
You can use jquery here
<form action="http://www.example.com" id="myform">
<input type="text" value="" name="name">
<input type="submit" name="submit">
</form>
and after in jquery you write like
// bind to the form's submit event
$('#myform').submit(function() {
alert("ok");
return true;
});
Consider using a PHP proxy.
Copy the script from here to anywhere you like on your own server.
Modify line 11 so that it points to the URL you are posting to at the moment.
// Destination URL: Where this proxy leads to.
$destinationURL = 'http://www.otherdomain.com/backend.php';
Then in your ajax script, change the URL to your proxy.php script.
I have written following function which checks whether start_date field is not empty and displays proper message when submit button is clicked. But then it takes the control to the previous page. So user has to write again all other fields on that form.
Is there any way to stay on that page even after prompting the error message, with all other fields value.
//JavaScript
function checkform() {
if(document.frmMr.start_date.value == "") {
alert("please enter start_date");
return false;
} else {
document.frmMr.submit();
}
}
// HTML
<html>
<form name=frmMr action="page1.jsp">
Enter Start date:
<input type="text" size="15" name="start_date" id="start_date">
<input type="submit" name="continue" value="submit" onClick="checkform();">
</form>
</html>
Thanks in advance
While you have a return value in checkform, it isn't being used anywhere - try using onclick="return checkform()" instead.
You may want to considering replacing this method with onsubmit="return checkform()" in the form tag instead, though both will work for clicking the button.
You can simply make the start_date required using
<input type="submit" value="Submit" required />
You don't even need the checkform() then.
Thanks
use return before calling the function, while you click the submit button, two events(form posting as you used submit button and function call for onclick) will happen, to prevent form posting you have to return false, you have did it, also you have to specify the return i.e, to expect a value from the function,
this is a code:
input type="submit" name="continue" value="submit" onClick="**return** checkform();"
Don't know for sure, but it sounds like it is still submitting. I quick solution would be to change your (guessing at your code here):
<input type="submit" value="Submit" onclick="checkform()">
to a button:
<input type="button" value="Submit" onclick="checkform()">
That way your form still gets submitted (from the else part of your checkform()) and it shouldn't be reloading the page.
There are other, perhaps better, ways of handling it but this works in the mean time.