I tried searching this but found no good solution.
My question is I have a HTML form with few text boxes. Once the user enter details and press submit I want to send this same HTML form to administrator email. The problem is I can not get the HTML markup with values. Is there any suggestion.
example
<div id="user_form" action="" method="post">
<form onsubmit="return validate_me();">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="test" id="test"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="send" id="send" value="Send"/>
<input type="hidden" name="html_data" id="html_data"/>
</td>
</tr>
</table>
</form>
</div>
So once user click on send button I want to send whole form with values to server then I can send it to admin email. How can I do that.
I tried following
<script type="text/javascript>
function validate_me(){
("#html_data").val($("#user_form").html());
}
</script>
But above send only markup without text box value.
Only above works in IE 9. fail in safari 5.1.7 and FF 23
Any suggestion would be greatly appreciate. Also I tried output buffering but I also did not help to send form element's values.
just submit your form
function validate_me(){
$('#user_form form').submit();
}
note: add action attribute to your form tag
Your updated code try this 1 and let me know if it not works.
<div id="user_form" >
<form onsubmit="return validate_me();" method="post" action="SOME_ACTION_URL">
<table>
<tr>
<td>Name</td>
<td><input type="text" name="test" id="test"/></td>
</tr>
<tr>
<td colspan="2">
<input type="submit" name="send" id="send" value="Send"/>
<input type="hidden" name="html_data" id="html_data"/>
</td>
</tr>
EDIT
<script type="text/javascript>
// on ready fill the value and then submit it
jQuery("document").ready(function () {
jQuery("#html_data").val($("#user_form").html());
})
function validate_me(){
// YOUR code MUST be return
return true;
}
</script>
I've just noticed this same problem. What I wanted to do was switch one form with another form yet retain the values the user has entered into the form, such as a message. I tried outputting the form via console.log and noticed all of the form shows up except the user entered data.
I was attempting to have a second form appear to make sure the user agrees to what they are about to do with a button to go back and make changes. I redisplayed the original form and TADA David copperfield magic, the form is there without any of the content in the inputs. (a text input and textarea)
I am not sure why this happens, I am guessing all I can do is store the user entered data in a namespaced global before trying to save the form data, then redisplay the form and replace the users content one field at a time.
What is the reason for this does anyone know? It must be something about how the inputs work in browsers.
Related
<html>
<script>
function changeText()
{
document.getElementById("input1").value = <?php echo '"'.$_POST['input'].'"'; ?>;
return true;
}
</script>
<form name="mainform" action="" method="post">
<input type="text" name="input" id="input1" />
<input type="submit" onclick = "changeText()" name="Submit" value="Submit!" />
</form>
<html>
i have this code here. can you make it work as intended ?
everytime i click Submit! i want to change the value of the textarea to the last input the user inserted.
PHP code is parsed by a PHP interpreter before any HTML output is sent to the browser.
If your form action is the same page and the same form will be shown before and after submission, then you can let PHP print the value of the input field directly into it.
<input type="text" name="input" id="input1" value="<?php echo htmlspecialchars($_POST['input']);" />
If you're trying to revert the value of this input field whenever a user clicks the submit button, then your code (even if it's prone to code injection) should work but this is useless since the page will be requested again when submit is clicked.
I assume you need to fill in
action=""
By the name of your file, like
action="myFile.php"
Few tips :
NEVER trust the user. The user can manually change the value of the input and send some dangerous values in your $_POST variable. You need to check it using filter_input() by example.
Like #Charles said this is pretty simple problem, use google next time.Here for example
Ok I have googled for hours and found nothing that works. I need help desperately
I have got a form with the following elements in it.
<form action="sendmail.php" method="post" name="enquiry">
<table>
<tr>
<td>Name:-</td>
<td><input type="text" name="name" /></td>
</tr>
<tr>
<td>Company:-</td>
<td> <input type="text" name="company" /></td>
</tr>
<tr>
<td>E-Mail:-</td>
<td><input type="text" name="email" /></td>
</tr>
<tr>
<td>Contact:-</td>
<td> <input type="text" name="contact" /></td>
</tr>
<tr>
<td>Requirement:-</td>
<td><textarea name="msg"></textarea></td>
</tr>
</table>
<input type="submit" value="submit" onclick="return validation(this.form);">
<input type="reset" value="Reset" />
</form>
and the php has a line like this:
<?php
if(mail($to, $subject,$message)) {
echo "<SCRIPT LANGUAGE='JavaScript'>alert('Your Enquiry was sent successfully we will get back to you shortly');
window.location.href='javascript:history.go(-1)';
document.enquiry.reset();
</SCRIPT>";
}
?>
Then there's an "else" with the same code but a different message.
The problem is when it redirects back to the form page it still has the data in the fields. What I prefer is a clean form with no data filled in when the user returns to the page.
Please note I am a newbie to javascript so try suggesting a fix that would be easy to comprehend.
Thanks a lot in advance!
That's because you're going back in the history - browsers remember forms when you go back/forward.
What you are doing isn't a "normal" user experience - I would suggest you print out a nice looking page saying thanks in the "sendmail.php" file and then let the user navigate to wherever they want to on your site.
as Ed said, you are going back in history, and the browser remembers it.
Try this:
instead of this line: window.location.href='javascript:history.go(-1)';
write : window.location.href='RelativePathToActualForm';
Your Problem is with the javascript code:
window.location.href='javascript:history.go(-1)';
document.enquiry.reset();
Remove this code
EDIT:
Use this code:
if(mail($to, $subject,$message)){?>
<SCRIPT LANGUAGE='JavaScript'>
alert('Your Enquiry was sent successfully we will get back to you shortly');
window.location.href='/*YOUR FORM PAGE LINK*/';
</SCRIPT>
<?php }
After processing the form post you should redirect to another page (or again to your form) and display your message there e.g.:
php header("Location: form.php?formpostwassuccessful=1");
then the form page
if(isset($_GET['formpostwassuccessful']))
echo "Thank you. Your form was sent.";
also see redirect after post?
First look at example of using php session-based flash messages http://mikeeverhart.net/php/session-based-flash-messages/
Usual flow:
User fills in the form
Presses submit
Your php script sendmail.php validates the form
If there were some validation errors [set error message]
If there were some mail sending errors [set error message]
If everything is ok [set success message]
Call from php redirect to the form display page.
[set error|success message] - using the link provided above how to set the message.
Now important part every time you render your form, you should check for set messages, if there are some messages - display them.
How do those messages work?
It simply sets the message to session ($_SESSION) array, and then when the message is displayed, the message is unset from session.
Simple solution : just use jquery - a single line is to be usee in the head section to include jquery in your page.
The javascript snippet you gave should contain:
window.location="theform_page_address" ;
instead of
window.location.href='javascript:history.go(-1)';
document.enquiry.reset();
and in the form page address: add the following js snippet in the head section :
<script type="text/javascript">
$(document).ready(function(){
$('input').val('');
$('select').val('-1');
$('textarea').val();
});
</script>
EDIT: I assume your form has input and textarea elements which have a blank default value, , and select elements that have -1 as the value for the default option.
I am trying to submit a form with jQuery and I must be missing something small, because I can't get this to work, and from everything I see it should work fine.
What's wrong with this?
<table class="newrecord"><form id="editthis" action="page.php" method="post">
<tr><td class="left">Name:</td><td><input type="text" name="name" id="name" /></td></tr>
<tr><td class="left">Company:</td><td><input type="text" name="company" /></td></tr>
<tr><td class="left">Cancel</td><td><input type="button" name="submit" class="subbut" id="subthis" value="Update" /></td></tr>
</form></table>
And the javascript:
$("#subthis").click(function() {
$('#editthis').submit(); // An alert box works, so I know this is triggering
});
As mentioned in the code, an alert box works if I click the submit button, but when I use the jQuery submit function, nothing happens. What am I missing???
You don't need to use jQuery to submit a form. It's default behavior for a submit button to submit the form it belongs to.
Also, don't use a table for layout. The form elements themselves can layout just fine.
<form id="edit_this" action="page.php" method="POST">
<label>Name <input type="text" name="name"></label>
<label>Company <input type="text" name="company"></label>
Cancel
<button type="submit">Update</button>
</form>
Can be easily layout'd and will submit on its own.
If you need something to happen before the submission with jQuery, bind it to the form's onsubmit handler, rather than the actual click of the button.
The actual problem is the collision between the name you've given to the button and the reserved word in JavaScript. Don't use submit as the name.
I see two possible problems.
1) You have form tags inside table tags. While this probably isn't the root cause of your problem, it's not valid HTML.
2) You've used "submit" as the name of your submit button. This should be avoided because your object will collide with JavaScript reserved words. Use something other than "submit" like you've done with the id attribute.
i have 2 or more forms in one page. like this:
<form method="post" >
<table border="0">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<input type="submit" value="get" />
</form>
<form method="post" >
<table border="0">
<tr>
<td> </td>
<td> </td>
</tr>
</table>
<input type="submit" value="get1" />
</form>
the forms are similar but with different content.
what happens is when i click the get button on one form, all other forms get triggered also.
is there a way to differentiate the forms so that when i click on a button only the form that has that button to get triggered?
edit: if i press on get1 the form with get gets also triggered
thanks
Only the form which contains your submit-button should be triggered. Are you sure you closed both forms properly in the HTML?
Can you post a link to the page or paste all the HTML?
If your code is set like...
if(!empty($_POST)) {}
then it'll seem like both forms are submitted, but really you can only access data from the form that was actually submitted. If you put a name on the two submit buttons you can test for $_POST['submitButtonName'].
You can use this page to see the differences pretty easily.
http://pastie.org/pastes/2290937/text
You can't submit more than one form, your first form is just probably wrongly closed, which causes you a trouble
Hope this code will help you.
If you want to submitt particular
form use javascript or jquery.
In my case i will choose jquery.
Here is the example of my solution.
You will need to change formid and objectid.
$( "#buttonid" ).click(function() {
$( "#formid" ).submit();
});
The short answer is you really only have one form on your page.
You should give each of your forms a name and id to uniquely identify them.
<form name="form1" id="form1" method="post" action=""> is the way to make each of your forms different. It is important because you may want controls other than a submit button to submit the form. Consider this code in the OnChange event of a dropdown list:
"document.forms.form1.submit()"
This will make the form submit as soon as a value is picked in the dropdown list. For advanced features to work, you need to know what your form's name is. The id for the form can be used to access it using document.getElementById('form1')
Finally, do not use tables to display your forms. Use CSS.
I hope this helps someone.
I see lots of jquery tutorials from building the submit form from scratch, and that is cool, but I'm wondering if I can convert my existing form.
I'm using a typical form, and already have an email and blank values checking in place. Right now, on submitting the form, the user is taken to the confirmation php page withing form-submit.php.
I'd like to change that to just giving a user a line on the current page "Your form has been submitted"
Here is my form:
<form name="theForm" action="/contact-form2.php" method="post" onsubmit="return formCheck(this);" >
<table class="formTable" cellpadding="3" cellspacing="0">
<tbody><tr>
<td align="left"><b>Name:</b></td>
<td><input name="name" id="name" size="25" value="" type="text" /></td>
</tr>
<tr>
<td align="left"><b>Email:</b></td>
<td><input name="email" id="email" size="25" type="text" /></td>
</tr>
<tr>
<td align="left"><b>Confirm Email:</b></td>
<td><input name="email_confirm" id="email_confirm" size="25" type="text" /></td>
</tr>
<tr>
<td align="left"><b>Subject:</b></td>
<td><input name="Subject" id="subject" size="35" value="" type="text" /></td>
</tr>
<tr>
<td align="left" valign="top"><b>Message:</b></td>
<td><textarea name="Message" id="message" cols="30" rows="6"></textarea></td>
</tr>
<tr align="left"><td> </td><td><input type="submit" value="Submit" onclick=" return checkEmail();" /> <input type="reset" value="Reset" /></td></tr>
</tbody>
</table>
</form>
So is it possible to just change the on submit or onclick to be able to both submit the form through the external php file, and stay on the same page?
You can convert the existing form, but it is not as simple as just changing the onSubmit or onClick events.
When you use jQuery or another Ajax library to do a callback you are loading new content into the existing page. To do that you need a labeled block, usually a div, to contain any data to change. You also need to write the wrapping code for the callback to send it and to update the page's HTML.
The quick and dirty version on your form would be to wrap the table in a div tag and the Ajax call return new HTML for that div. Your new target for onsubmit would be the wrapping code for the callback I described above.
You still need to do all the work to use jQuery and point it to the right places. As I use prototype.js I can't really detail the jQuery process, but all the tutorials you are reading can.
Yes it is. I would suggest introducing some Javascript (the following example uses jQuery):
<script type="text/javascript">
// when the DOM is ready
$(document).ready(function() {
// bind some code to the form's onsubmit handler
$('form[name=theForm]').submit(function() {
if(formCheck(this)) {
// $.post makes a POST XHR request, the first parameter takes the form's
// specified action
$.post($("form[name=theForm]").attr('action'), function(resp) {
if(resp == '1') {
alert('Your form has been submitted');
} else {
alert('There was a problem submitting your form');
}
});
}
return false;
});
});
</script>
The return false at the end of the above submit handler prevents the browser from loading up the form's action (following the url) in the traditional way. Furthermore, if Javascript is not present, the form will submit the old school way, so essentially you have added a layer of usability above your standard form implementation which degrades gracefully.
I would like to point out that it is always a good idea to provide the user with realistic feedback. That is to say, the ajax posting of the form can capture some indication of this from the server, in the above example I have assumed that a '1' means that the record was successfully saved, and a '0' means it was not saved (the query failed, etc.). The message displayed to the user depends on this outcome.
Yes, you can change the onclick form action to a javascript:myajaxsubmit() function.