I have the following setup in the PHP page for the form fields and when a submit button is clicked, the Javascript function submit() is called and the variable
formdata contains a javascript object.
<!-- Start of HTML Form -->
<form id = "myForm">
<label for="projectTitle">Title </label>
<input type="text" class="form-control" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
<label for="projectDesc">Description </label>
<input type="text" class="form-control" id="projectDesc" value="<?php echo $previousProjDesc;?>">
</form>
<!-- END of HTML Form -->
<button class="btn btn-primary" onclick="submit()">Submit</button>
function submit(){
var formdata = $("#myform").serializeArray();
}
Now, I want to include file related things in the form fields as follows:
<!-- Start of HTML Form -->
<form id = "myForm">
<label for="docSubmission">First Document</label>
<input type="file" id="firstdoc">
<label for="docApproval">Second Document</label>
<input type="file" id="seconddoc">
<label for="projectTitle">Title </label>
<input type="text" class="form-control" id="projectTitle" value="<?php echo $previousProjTitle;?>" >
<label for="projectDesc">Description </label>
<input type="text" class="form-control" id="projectDesc" value="<?php echo $previousProjDesc;?>">
</form>
<!-- END of HTML Form -->
<button class="btn btn-primary" onclick="submit()">Submit</button>
So, when my submit button is clicked, I am wondering whether it's possible to include document related things (after converting it into base64 format) into the
javascript object variable formdata ?
I came across this example where they are converting it into Base64 format by attaching event listner on button click.
I am wondering if it's possible to attach event listner somewhere here <input type="file" id="firstdoc"> or should I be following different approach?
Related
Working on a really simple form for a district site. I have a really simple form in PHP.
<form method="post">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="submit" name="action" value="enter">Enter</button>
</div>
</fieldset>
</form>
What I am trying to do is when the user presses the enter button, I want to alert the user of what they have entered.
This is what I have so far in my HTML.
<body onload="document.forms[0].submit()">
<form action="/index.php" onsubmit="" method="POST">
<script>
alert(document.getElementsByName("age").value);
</script>
</form>
</body>
However, I keep seeing "undefined". I am assuming that is happening because on page load my script is being run instead of when the user presses the submit button. Kind of confused how to just do a simple alert. Appreciate any help.
You must insert your code in a function that you must attach to a event handler like onsubmit, something like this:
HTML:
<form method="post" onsubmit="showData();">
JAVASCRIPT:
function showData() {
alert(document.getElementsByName("age")[0].value);
}
I've inserted [0] in your Javascript code because document.getElementsByName returns you an Array of elements, in your case, this Array, obviously contains only one value that is retrievable on the index 0 (first index of any array).
<form method="post" id="myform">
<fieldset>
<legend>Enter Age and Weight</legend>
<label>Age:</label>
<input type="text" name="age" value="<?php echo #$_POST['age'] ?>" id="age">
<label>weight:</label>
<input type="text" name="weight">
<div>
<button class="btn" type="button" name="action" value="enter" onclick="alert(document.getElementById('age').value);document.getElementById('myform').submit()">Enter</button>
</div>
</fieldset>
</form>
Is this what you want?
I'm trying to submit a form with jquery, but it does not acknowledge that I submitted it when I click the "submit" button.
My html is as follows:
<form id="singleParam" role="form">
<div class="form-group">
<label for="sample_size">Number of samples needed</label>
<input name="choices[sample_size]" type="number" class="form-control" id="sample_size" placeholder="Enter desired number of samples">
</div>
<div class="form-group">
<label for="mode">Mode of the distribution (value most likely to be sampled)</label>
<input name="choices[mode]" type="number" class="form-control" id="mode" placeholder="Enter the likeliest value for your parameter">
</div>
<div class="form-group">
<label for="confidence">Confidence interval factor</label>
<input name="choices[confidence]" type="number" class="form-control" id="confidence" placeholder="Enter desired confidence interval factor">
</div>
<div class="form-group">
<input type="button" class="btn btn-primary btn-lg" id="submit" name="submit">
</div>
</form>
and JS is:
$('#singleParam').on('submit', function () {
alert('Form submitted!');
console.log('Form submitted!');
return false;
});
The alert() or console.log() in the loop do not work, meaning that jquery did not run the code on submit. What am I doing wrong? It might be worth mentioning that I am using bootstrap.
Change the button type from type="button" to type="submit"
EDIT:-
Make sure you are calling all your event handlers once the DOM is fully loaded by adding all the code inside dom ready event like:-
$(document).ready(function() {
// code here
});
Have HTML (part):
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
</form>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</div>
I need to add class "modal-error" for div.modal-write-us if submitted form have empty field/fields.
JS:
var modalWriteUs = document.querySelector('.modal-write-us');
var form = modalWriteUs.querySelector('form');
var userName = modalWriteUs.querySelector('[name=user-name]');
var eMail = modalWriteUs.querySelector('[name=e-mail]');
var textArea = modalWriteUs.querySelector('[name=text]');
form.addEventListener('submit', function(event) {
if (!userName.value || !eMail.value || !textArea.value) {
event.preventDefault();
modalWriteUs.classList.add('modal-error');
}
});
But class is not added. Where is my mistake?
First of all, you need to place your submit button into the form.
Then, change submit button to input:
<input class="btn btn-red" type="submit">Submit</input>
Now you need to make some fixes in your JS.Use double quotes in atttribute selectors:
querySelector('[name="user-name"]')
Attribute required doesn't allow to submit empty form, so your submit callback never runs.If you remove required attribute your code will work.
If you put <button class="btn btn-red" type="submit">Submit</button> inside the <form> it should work.
See working Plunker.
<div class="modal-write-us">
<form class="modal-write-us-form" action="" method="post">
<label>
<input type="text" name="user-name" required>
</label>
<label>
<input type="text" name="e-mail" required>
</label>
<label for="text-field"></label>
<textarea name="text" rows="5" id="text-field" required></textarea>
<div class="modal-write-us-button">
<button class="btn btn-red" type="submit">Submit</button>
</div>
</form>
</div>
EDIT: More explanation here:
The elements used to create controls generally appear inside a FORM element, but may also appear outside of a FORM element declaration when they are used to build user interfaces. This is discussed in the section on intrinsic events. Note that controls outside a form cannot be successful controls.
I have added an aweber form on my project file called adduser.php. It has three fields First name, Last Name and Email. When user will submit form data they will go to welcome.php page. In welcome.php page I have some welcome message and and button called "Start". When a user click on "Start" Button they will get a custom form.
So, My question is now, How can i show previously data that was submited by user on adduser.php on my custom form.
Remember that I did not use any custom database to store adduser.php form data. This page handled by aweber.com embedded Perl script.
There are total four pages on my Project folder. one is adduser.php and then welcom.php, then custom.from.php and last one is thankyou.php.
This is the form script for adduser.php. It is a embedded from script provided by aweber.com.
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
<div style="display: none;">
<input type="hidden" name="meta_web_form_id" value="1305186106" />
<input type="hidden" name="meta_split_id" value="" />
<input type="hidden" name="listname" value="awlist3791609" />
<input type="hidden" name="redirect" value="http://localhost/php/intro.php?" id="redirect_33699466c49909887d43ec924c761a52" />
<input type="hidden" name="meta_adtracking" value="My_Web_Form" />
<input type="hidden" name="meta_message" value="1" />
<input type="hidden" name="meta_required" value="name (awf_first),name (awf_last),email" />
<input type="hidden" name="meta_tooltip" value="" />
</div>
<div id="af-form-1305186106" class="af-form">
<div id="af-header-1305186106" class="af-header">
<div class="bodyText">
<p> </p>
</div>
</div>
<div id="af-body-1305186106" class="af-body af-standards">
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-first">First Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-first" type="text" class="text" name="name (awf_first)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044792-last">Last Name:</label>
<div class="af-textWrap">
<input id="awf_field-71044792-last" class="text" type="text" name="name (awf_last)" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element">
<label class="previewLabel" for="awf_field-71044793">Email: </label>
<div class="af-textWrap">
<input class="text" id="awf_field-71044793" type="text" name="email" value=""/>
</div>
<div class="af-clear"></div>
</div>
<div class="af-element buttonContainer">
<input name="submit" type="submit" class="btn btn-success" value="Start Screening"/>
</div>
</div>
</div>
</form>
I'm in big trouble, I'm unable to handle I'm waiting for support from expert developer. I'm still working on local server connected with internet.
You can use $_SESSION to use your variables through your entire application runtime. At the end, just close them to clear your users browsers.
It's a common practice used by "flash session messages". They setup the message by $_SESSION and close when the variables has no use anymore.
Change the default action of your form
<form method="post" class="af-form-wrapper" action="https://www.aweber.com/scripts/addlead.pl" >
to
<form method="post" class="af-form-wrapper" action="trial.php" >
In this file trial.php, start the seeion first and then use the session variables as follows
session_start();
$_SESSION["first-title"] = $_POST['awf-first'];
and so on for each of the form inputs and then redirect the page to default action using location
header('Location : Aweber perl script link');
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I am a beginner in java-script, I would like to send my values to another page with using java-script .
my codes :
<form id="contact-form" method="post" enctype="multipart/form-data">
<fieldset>
<label><span class="text-form">name</span><input name="name" type="text" /></label>
<label><span class="text-form">email</span><input type="text" /></label>
<label><span class="text-form">phone</span><input name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<a class="button"href="savenazar.php" onClick="document.getElementById('contact-form').submit()">send</a>
</div>
</fieldset>
</form>
now how can I get name,phone .. values in savenazar.php page ?
The following code will help you achieve what you are looking for and it does it with AJAX so no need to refresh the page
<form id="contact-form" method="post" enctype="multipart/form-data"> <fieldset>
<label><span class="text-form">name</span><input name="name" id="name" type="text" /></label>
<label><span class="text-form">email</span><input id="email" type="text" /></label>
<label><span class="text-form">phone</span><input id="mobile" name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<a class="button id="submit">send</a>
</div>
</fieldset>
</form>
add the following js to your file or include it
$('#submit').click(function() {
name = document.getElementById('name').value;
email = document.getElementById('email').value;
mobile = document.getElementById('mobile').value;
$.post('savenazar.php', {'name': name, 'email': email, 'mobile'" mobile}, function(data) {
var parsed = JSON.parse(data);
var html = 'HTML to show when data is passed';
<!-- following are your divs -->
$('#requestStatus').append(html);
}).success(function() {
$('#comment').val('');
$('#sentSuccess').html('data Sent!').show().delay(5000).fadeOut();
}).fail(function() {
$('#sentFailed').html('data not sent').show().delay(5000).fadeOut();
});
});
// In savenazar.php
<?php
$name = $_GET['name'];
You need to add action="savenazar.php" attribute to the form and use <input type="submit"> instead of <a>. The email textbox also needs name="email" attribute
<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >
<fieldset>
<label><span class="text-form">name</span><input name="name" type="text" />
</label>
<label><span class="text-form">email</span><input name="email" type="text" /></label>
<label><span class="text-form">phone</span><input name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<input type="submit" class="button" value="send" />
</div>
</fieldset>
</form>
then in savenazar.php you can get the values by using $_POST["x"] where x is the name attribute of the input tag you want to get from. For example you can get name by $_POST["name"] because the name textbox has name="name" attribute. You can get email by $_POST["email"] because the email textbox has name="email" attribute. You can get phone by $_POST["mobile"] because the phone textbox has name="mobile" attribute, and so on.
Alternatively you can also use the <a> tag like in your previous code and set the href attribute to # as mentioned by #Ghost in the comment below
<form action="savenazar.php" id="contact-form" method="post" enctype="multipart/form-data" >
<fieldset>
<label><span class="text-form">name</span><input name="name" type="text" />
</label>
<label><span class="text-form">email</span><input name="email" type="text" /></label>
<label><span class="text-form">phone</span><input name="mobile" type="text" /></label>
<div class="wrapper"><div class="text-form">comment</div><textarea id="nazar"></textarea></div>
<div class="buttons">
<a class="button" href="#" onClick="document.getElementById('contact-form').reset()">refresh</a>
<a class="button" href="#" onClick="document.getElementById('contact-form').submit()">send</a>
</div>
</fieldset>
</form>
You would require some knowledge of server side programming, in this instance PHP.
Handling POST data server-side should be taken seriously as this is easily the most prominent security hole in most new websites.
A simple PHP script to view POST data would be:
<?php
if ($_POST) {
echo '<pre>';
var_dump($_POST);
echo '</pre>';
}
?>
"Security measures" must be taken when it comes to ensuring the validity of client-side input
Prevent SQL Injection (If storing in MySQL use mysqli_real_escape_string())
Form Flooding (Captcha is the most popular choice to prevent this)
Taking what ekad added you can then access the POST data using $_POST['name'] etc.
I recommend looking up some beginner tutorials, here is a good one to get started: PHP Forms