I have a form that looks like:
<form id="search-form" action="about:blank" target="none">
<input type="text" id="search-text">
<button id="search-submit"> Go! </button>
</form>
<iframe name="none" style="display:none"></iframe>
While I don't want my form to update the page, yet I want autocomplete to work properly so I send a blank page to the iframe every time the form is submitted.
Will this solution work on every browser? (Or should I create a "/blank" blank page response on the server...)
Related
I'm building a guessing game that works with user input. When the user inputs a word and submits, it should be taken to a new webpage with an iframe that contains a google page with the search for the element inputed.
For example, if I submit 'cats', i should be taken to a new webpage with an iframe that contains a google page with the search results for 'cats'
This is what I have now. It goes to said new page, but the iframe is empty. My question is: how do you submit the input to the google page in the iframe and redirect the user to the page at the same time?
<p>Choose search for <em>Player 2</em> to guess.</p>
<form action='https://www.google.com/search' method='get'>
<input name='q' type='text' autofocus autocomplete='off' placeholder='Search'>
<button class='btn btn-primary' type='search'>Search</button>
</form>
Google probably doesn't like this sort of usage. Here is how Chrome's javascript console complains when clicking through from Bing to Google inside an iframe:
"(index):1 Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."
Other than that, here is something that gets some content into an iframe based on user text input from the outer page:
<html>
<body>
Clue: <input id="userInput" placeholder="Try entering: google" type="text">
<hr>
<iframe id="innerSpace" width="90%" height="90%"></iframe>
<script>
let is = document.getElementById('innerSpace');
let ui = document.getElementById('userInput');
ui.addEventListener('change', searchFor);
function searchFor() {
// generates an error page:
// `https://www.google.com/search/?q=${query}`;
// this seems to generate some content:
let query = encodeURIComponent(ui.value);
is.src = `https://www.bing.com/search/?q=${query}`;
}
</script>
</body>
</html>
I've a little problem. I submit a form to my route/uploadpdf with
<form action="http://localhost:3000/user/uploadpdf" enctype="multipart/form-data" method="post" onSubmit=window.location.replace('http://localhost:3000/statictoken')>
<input type="file" name="upload" multiple>
<input type="submit" value="Upload">
</form>
and when it is complete the browser tries to traverse to uploadpdf.
What I actually want is to stay on the current page ("statictoken") and refresh. You can see I've attempted to replace onSubmit, but it doesn't work.
The form action attribute is used to send the request to the specified page. If you want to send the request to the current page itself, you should have the following :
<form action="/" ...>
But keep in mind that now, you have to tackle the functionality of uploadpdf page on your 'statictoken' page.
You can also redirect to the "statictoken" page from the "uploadpdf" page after the file upload completes.
Or better, you can use Ajax File Upload, so that form is submitted asynchronously without redirecting you to the "uploadpdf" page.
I have an html form that has no javascript whatsoever, and I am trying to use an iframe to load the response.
My html looks like
<form method="post" action="http://localhost:3000/post_transfer" target="something">
<input type="text" name="user"/><input type="text" name="quantity"/>
<input type="submit"/>
</form>
<iframe name="something" id="something"></iframe>
What I want to happen is that the form is submitted and the iframe is filled with the response and stays on the current page.
The iframe is filled as expected, but then redirects to the post_transfer page with a rails error. (The error does not occur if I remove target=iframe from the form, but I feel that is not relevant)
Here is a short clip: https://i.imgur.com/mhTClbL.mp4
Why is this happening and how can it be fixed?
Try sandbox html attribute on iframe to test if you can prevent redirection.
See https://w3schools.com/tags/att_iframe_sandbox.asp
If it works, it means that the targeted page ("http://localhost:3000/post_transfer") is sending redirection headers in the response.
I just want to send a post request to an api. So far I have:
<form method="POST" action="/api/updoot/ID:{{ post.ID }}">
<input type="submit" value="updoot"/>
</form>
When I click submit it redirects. I know how to prevent the redirection with javascript but I was wondering if it's possible to send the request without using javascript and without redirecting the user?
Yes, it's possible to make an HTTP request, without page re-direction, and without any JavaScript.
The trick is: make an invisible iframe, and use it as the target of form. In this way, when form is submitted, the HTTP request is sent, and the response will be processed in iframe. As the iframe is invisible, nothing would change in page.
Here is an example:
#subframe {
display: none;
}
<form method="POST" action="https://requestb.in/xkaff3xk" target="sub">
<input type="text" name="test">
<input type="submit" value="updoot"/>
</form>
<iframe id="subframe" name="sub">
</iframe>
I have one html page, with a form on it. When the user posts the form, I want the form receiving the response to automatically open up the URL passed by the post in a new browser window.
Basically the URL is passed to the the other page, which in turn opens the URL in a new window then displays another form.
Thanks in advance.
Cheers
Shane
Add target="_blank" attribute to the <form>.
<form action="http://google.com/search" target="_blank">
<input type="text" name="q" />
<input type="submit" />
</form>
This will show the response in a new (blank) window. Note that this happens before the HTML page is loaded (it wouldn't make much sense otherwise).