I searched all day for the right answer on stackoverflow, also I couldn't find something helping me out.
Having a simple form like this:
<form action="process.php" method="post">
<input type="text" name="email">
<input type="password" name="password" id="password">
<button value="Login" type="submit" name="submit" onclick="formhash(this.form, this.form.password);"></button>
</form>
currently: Submitting the form redirects to process.php showing a success message & redirecting to another page after some time.
What I need: instead of redirecting to process.php a modal dialog box should open doing the work and showing a success message, closing the dialog box after some time and then doing a refresh of the actual side.
Any help is welcome!
Use ajax submit, JQuery already supports this. Try JQuery API http://api.jquery.com/ especially http://api.jquery.com/category/ajax/ Examples are provided on that site too.
This might be what you are looking for:
Message Box opens then disappears
There is also a similar question here on stackoverflow: Link
Related
I have a page ( index.html ) with a form. On submit the data is posted to a php-file which then stores said data in a (temporary) xml-file, however, I also have a number of iframes which also contain forms.
At first, I was planning on simply posting the input-data from the iframes to a seperate php file but I encountered several problems:
-I have several iframes, but I don't have a fixed amount since the user is supposed to be able to delete/ add iframes. Therefore I can't just tell iframe 1 to send its data to php-file no. 1, iframe 2 to send its data to php-file no.2 etc.., I need a flexible solution.
-I tried to submit all iframe inputs to ONE php file and was hoping it'd work since the xml-file this php-file sends the data to is only updated and not completely overwritten. As you might guess, this did not work.
-Another problem I encountered is that the user may go back and edit whatever he entered into the iframe. The data should only be saved once he clicks on the save button in the html-file to prevent that.
I also tried submitting the data via JavaScript, as people in similar questions suggested, but that did not work out for me. So I guess what I would like, is a suggestion as to how I should go about this. How can I send all the data once the "main" save button is clicked, it doesn't matter if the data goes to several php files. The solution shouldn't depend on a fixed amount of elements as that amount is not always the same.
Here's the iframe-html:
<form method="POST" action="php/iframe.php">
<label>Your thoughts:</label>
<input type="text" name="header">
<label>Suggestions:</label>
<textarea type="text" name="textbox"></textarea>
<input type="button" value="submit">
</form>
(It's basically the same for all Iframes).
Please let me know if you need any additional information.
Edit: I read that submitting forms at the same time may cause interference, I know that much
Edit:
Relevant index.html:
<form method="post" action="main.php">
<div id="firstSection"
<label>First input</label>
<input type="text" name="input[]">
<button type="button" onclick="openIframe1()">Read more</button>
</div>
<div id="secondSection"
<label>Second input</label>
<input type="text" name="input[]">
<button type="button" onclick="openIframe2()">Read more</button>
</div>
<button type="submit" value="submit"></button>
</form>
<div class="iframe">
<button type="button" class="close">Close</button>
<iframe src="iframe1.html"></iframe>
</div>
<div class="iframe">
<button type="button" class="close">Close</button>
<iframe src="iframe2.html"></iframe>
</div>
Define an array of your iframe inputs in the main page as hidden element, on click submit in the main page loop through the iframe by getting the datas and append to your hidden element from where you can now post that to your back end.. try this: Access jQuery data from iframe element
I'm a noobie programmer and I wonder how to properly submit a form with javascript.
I made some test code to show you what I mean:
<?php
if (isset($_POST['message']))
{
echo $_POST['message'];
}
?>
<script>
function formsubmit()
{
document.getElementById('form').submit();
}
</script>
<form id="form" name="form" action="" method="post">
<input id="message" name="message" value="hello world">
<input id="submit" name="submit" type="submit">
</form>
Click me<br/>
<input type="submit" onClick="formsubmit()" value="Click me">
When you push the "submit" button inside the tags - the php code will echo "hello world".
When submitting the form with JS the values won't post to the page. What am I doing wrong?
Thanks in advance.
I've searched the whole afternoon for a solution, but cause of my lack of knowledge about programming I failed to find it.
Believe it or not, but the main problem lies here:
<input id="submit" name="submit" type="submit">
If a form contains an input element with name (or id) of submit it will mask the .submit() method of the form element, because .submit will point to the button instead of the method. Just change it to this:
<input name="go" type="submit">
See also: Notes for form.submit()
The smaller problem is here:
Click me<br/>
An empty anchor will just request the same page again before calling formsubmit(). Just add href="#".
The problem here is that the id and name of the input element on your form is called submit.
This will mask the submit function for the form. Change the name and id and you will be able to use javascript to submit the form.
try setting the href of the to '#'. I would guess what is happening is that by clicking on the link, it submits the form and immediately changes the url to the same page you are on cancelling the form submit before it has a chance to go.
I have a form like below on my index page:
<form action="send.php" method="POST">
<b>Your name :</b> <input type="text" name="name"><br>
<b>Your e-mail :</b> <input type="text" name="email"><br>
<b>Message</b><br><textarea name="message"></textarea>
<input type="submit" value="Send">
</form>
When I click the submit button, it posts the values on the index form still instead of navigating to send.php
/index.php?name=chris&email=heymega%40gmail.com&message=HELLO!
Notice how its still on the index page. Any ideas why this is happening?
Both files exist in the root directory.
Either you already have another form tag open that you haven't closed earlier on the page, or it's not liking that you have POST in uppercase - I believe it should be lowercase.
Ok really taking a shot in the dark here since you said that it isnt nested in anyother forms and that it "still" sends to index.php that you need to press ctrl+F5 to refresh the possibly cached version of this page.
If that doesn't work then post your complete html code with the javascript.
I would like to make a button on my website that automatically logs me in on another website. I recon I can use either Javascript/jQuery or PHP/cURL to do this.
Which is the best way to go?
You may use either remote javascript or iFrame. Find more details here: http://kuza55.blogspot.com/2007/06/building-secure-single-sign-on-systems.html
Also checkout google's approach named SAML: http://code.google.com/googleapps/domain/sso/saml_reference_implementation.html
It depends what the website is. JavaScript and jQuery alone cannot be used due to the cross-domain policy. You could perhaps use a combination of cURL and AJAX to achieve something similar.
I think you might need to provide a little more information about the site, and exactly why you'd want to do this...
I'm not sure if this is exactly what you're looking for, but one thing I have done in the past is to mimic the login form on the site you want to log in to.
For example lets say you want to log in to 'example.com'. In the source code for the login page of 'example.com' you will find the html code for the login form.
Example
<form name="blabla" action="action.php" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="sumbit" value="Login" />
</form>
Create a form on your site similar to the one you find in 'example.com'. If you want you can even hide the fields, include values to make it a one button login. The trick is making sure that the action has the actual url. For example if the form says 'action.php' for 'example.com' you would put 'http://example.com/action.php'
Example
<form name="blabla" action="http://example.com/action.php" method="post">
<input type="hidden" name="username" value="testuser" />
<input type="hidden" name="password" value="testpass" />
<input type="sumbit" value="Login" />
<form>
This will log you in to the site in most cases. If you don't want to leave your own site you can set a 'target' for the form to an iframe or something.
So I have this simple form:
<form action="includes/process.php" method="post" name="standard_use" id="standard_use" enctype="multipart/form-data">
<button onclick="dofunction(); return false;">Do it!</button>
<input type="file" id="upload_file" name="filename" style="float:left;width:70%;" size="42"/>
</form>
So what happens really when the button is clicked ?
Is it that the php file is called ? does it not ? the javascript is called before ?
Anyone can shed some light on this ?
Thanks !
Well, when you hit the button the following events occurs:
You send a REQUEST to the server
The php codes evaluates the request and runs some codes
Finally it returns back a RESPONSE which you see as a web page
Javascript is a client-side script which means that whenever you make an action on the page, the code runs. For instance, when you click the button, before sending the request javascript will work. You may, for instance, place a function that will be triggered when you hit the button which checks the form and either approves the form or shows the error messages
EDIT
As far as your comment is concerned:
Yes, javascript runs first when you hit the submit button. Php runs only when you submit the form and make a request to the server.
Consider this example: (I am better at explaining things with examples:)
<form action="somepage.php" onsubmit="return checkMe()" method="POST">
<input name="firstname" id="fn" value="" type="text" />
<input type="submit" value="Submit" />
<script type="text/javascript">
function checkMe(){
var tb = document.getElementById("fn")
if(tb.value == "Alex") return true;
else return false;
}
</script>
</form>
So basically, when you hit the button and try to submit the form, the javascript will first check whether the name provided in the textbox is Alex or not, if it is not then it will not submit the form. If it is Alex then it will submit the form and then the form will redirect the user to somepage.php. Finally, the php codes will work in somepage.php and the page will be rendered again.
What happens is that only doFunction() javascript function is invoked and nothing more.
However, it might be possible that this javascript function invokes "submit" event on the form and the request is sent (what you described as "php file is called").
Your code just trigger javascript event and your function. To submit a form you need an
<input type="submit" value="Submit" />
or a button, which default type is submit (thx davin)
<button value="Submit" />
However as far as you return false in your javascript code your form won't be submitted even with the submit button.