How to change iFrame results to JavaScript alert box? - javascript

I have access to a url runs a script to clear a users state.
Id like to produce a script that will run on a webpage, to do this.
The following script works but in Firefox its annoying for people to have to disable mixed content each time they come to the page:
<SCRIPT LANGUAGE="JavaScript">
function go(loc,loc2){
document.getElementById('userstate').src = loc +
document.getElementById('username').value + loc2;
}
</script>
<form onSubmit="go('http://mysiteurlomitted.com/userstate/?userId=','&app=cc'); return false;"/>
Username: <input type="text" id="username">
<input type="submit" value="Clear User State">
</form>
<iframe id="userstate" src="about:blank" width="470" height="30" frameborder="1" scrolling="no"></iframe>
The resulting URL produces a simple text string, and has no HTML on the results page, so I feel it should be pretty easy to read this URL as a file, and load the results into an alert box. This would avoid the iframe method, and get out of the mixed content situation. It would run without anyone needing to change anything. But I cannot figure out how to get this to work. I feel like FileReader() should be a good way to do it, but the URL has parameters... so the reader doesn't know what file type it is. Its just failing. There has to be an easier way to do this.

You shouldn't need any javascript for this kind of thing. Just add a name attribute to the username input, and that value will get passed along in the query string as "&username=Name". so:
<form action="/userstate?app=cc">
Username: <input type="text" id="username" name="username" />
<input type="submit" value="Clear User State" />
</form>
That would submit the form to "http://samedomain.wut/userstate?app=cc&username=", which would be available on the server side in the usual post data source.
There are other, better ways of doing this, but I don't know your setup. You should look into server-side management of cookies/session; the user shouldn't have to input anything except to log in initially.
Edit:
If you want to use this as an administration tool, you can do two things: use ajax (XMLHttpRequest or $.ajax from Jquery), or make your endpoint redirect back to (or serve) the form. You could have the form submit to its own url and in your server side scripting process the data, then output the html for the form again. Not a great pattern for actual applications, but it should work in this situation.

Related

javascript Redirect user to directory based on form input

someone give me a part of the answer
Redirect user to directory based on form input
<form onsubmit="location.href='http://www.example.org/' + document.getElementById('myInput').value; return false;">
<input type="text" id="myInput" />
<input type="submit" />
</form>
the code implement like this in the browser :
http://www.example.com/contact
my issue is :
this address become not working with me without adding extension .html
like this
http://www.example.com/contact.html
i read about solution in the .htaccess
but I'm looking if we can implement this too in java script
so the use just Enter the word contact as the example before
and java script do the other ?
regrads
As others have mentioned in the comments, the way to get 100% of what you're asking for is to add a rule to the .htaccess (assuming Apache) that makes the server add the file extension.
The closest I think you could do purely on the client side is to simply add the .html yourself, maybe like this:
<form onsubmit="handleFormSubmit();">
<input type="text" id="myInput" />
<input type="submit" />
</form>
And then somewhere in your javascript:
function handleFormSubmit() {
var destinationUrl = 'http://www.example.org/' + document.getElementById('myInput').value + ".html";
window.location = destinationUrl;
}
The biggest problem I see with what you're wanting to do, though, is that you're relying on the user to know what the names of the available pages are, unless you have something more going on on the server side.

PHP redirect with header

I'm not expert in PHP, and I'm trying to create public chatroom for my simple website.
I'm using SQL database to store messages.The file named chat_index.php getting all messages from database and show it to users. Also it has a simple form to send message with PHP GET method. The following is code for my form.
<form method="get" action="sendmessage.php">
<input name="msg" placeholder="Message" data-theme="a" type="text">
<button type="submit" class="ui-btn ui-corner-all">Send</button>
</form>
With above code I'm sending data to sendmessage.php file. In this file adding message to database and user redirect to chat_index.php with this code.
header("Location: chat_index.php");
exit();
After redirect page loading correctly on browser window. But URL end like this
...../sendmessage.php?msg=test_message
So if I reload the page message sending again and url getting correct like this
...../chat_index.php
How can I resolve this problem?
UPDATED
I tried with POST method. but not solved. browser showing content in chat_index.php and url ending with ../sendmessage.php
Why you are recieveing the url variables is because you are using GET. use POST instead and the variables will be gone.
example:
<form method="POST" action="sendmessage.php">
If you don't want to send data to the query string use POST instead of GET.
<form method="POST" action="sendmessage.php">
This should clearly be a POST form. Any form saving or changing anything on the server should be. Otherwise (using get) people could add messages by just following a link, which is not intended. The redirect after save is OK and good practice. Note that such redirects only work before any output is produced.
Cannot say much more by what you have posted. You should also check if your saving and redirect code is triggered correctly when message is posted.
This is what is happening, the form is being submitted from chat_index.php, so the action ends up being chat_index.php/sendmessage.php.
To solve this change the method to post as directed and change your action to /sendmessage.php
your form should look look like this
<form method="POST" action="/sendmessage.php">
....
</form
hope this help
If this is to be a simple forum site, then it would be much less complicated to not redirect at all. Just set your action attribute to "", and when someone submits the form, it will post the data back to the page. So do something like this:
<form method="post" action="">
<input name="msg" placeholder="Message" data-theme="a" type="text">
<input name="function" type="hidden" value="post_message">
<button type="submit" class="ui-btn ui-corner-all">Send</button>
</form>
Then put the php code that was in sendmessage.php into chat_index.php above the starting DOCTYPE and html tags, and delete sendmessage.php. Or alternatively, use include('sendmessage.php') in the same spot. Then when the page loads, check if $_POST['function'] == 'post_message', and if this condition is true, then execute the stuff you had in sendmessage.php. That will be much more compact, and the user will be redirected once instead of twice. Also, I don't know your file structure, but you might want to rename chat_index.php to just index.php to make it intuitive and so that people can't see inside your directory.

Access HTML form submitted value from a different javascript file?

EDIT: Rephrased the question so that it is less ambiguous.
I have two HTML files, x.html and y.html, and I have two javascript files, x.js and y.js. I have a form in x.html like so:
<form action="y.html">
<input type="text" value="Blank." />
<br />
<input type="submit" />
</form>
Note that x.html and x.js work together, and y.html and y.js work together.
I want to access the value that a user submits into this form from y.js. How do I do this?
Thank you!
You can use window.sessionStorage or window.localStorage to keep String data across page loads on the same origin.
In x', where formElement is a reference to the <form> and textElement is the <input> or <textarea> reference, set up an event handler using node.addEventListener(event_type, handler) for when the <form> is submitted
formElement.addEventListener('submit', function (e) {
window.sessionStorage.setItem('foobar', textElement.value);
});
In y' you can then access
var foobar = window.sessionStorage.getItem('foobar');
if (foobar === null) console.warn('nothing got set on x :(');
So, below is the source of a.html, use get method to send the data to b.html, and after redirect, the data of the form will be available in the query string like /b.html?ta=sfsdfsdfsdfs
<form action="b.html" method="get">
<textarea name="ta" id="" cols="30" rows="10"></textarea>
<input type="submit" value="Submit" id="subBtn">
</form>
You could use any the query string, or GET parameters to do so.
In the form on page x you can use define method as GET and when this form is submitted it will be directed to an address which includes your variable and parameter passed by the user. Now in page y you can just use window.location.search value and use the variable.
Also, you can make use of cookies and do the same.
If possible describe your problem in more detail so that one could post a relevant solution.

Prevent page reload on form submit

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.

Make form redirect users after posting

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;

Categories