how to get values when using javascript in form [closed] - javascript

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

Related

Why cant i upload image on Database in php? [duplicate]

This question already has answers here:
File not uploading PHP
(11 answers)
Closed 4 years ago.
I am trying to upload an user image on server in php, but its giving me the error like bellow:
Notice: Undefined index: images in C:\xampp\htdocs\PDF\Registration\index_registration.php on line 20
Notice: Undefined index: images in C:\xampp\htdocs\PDF\Registration\index_registration.php on line 21
here's my code:
<?php include "includes/header.php"?>
<?php include "../db.php" ?>
<?php include "../functions.php" ?>
<!-- banner -->
<div class="center-container">
<div class="banner-dott">
<div class="main">
<h1 class="w3layouts_head">Readers Registration</h1>
<div class="w3layouts_main_grid">
<?php
if (isset($_POST['submit'])){
$name = escape($_POST['name']);
$password = escape($_POST['password']);
$first_name = escape($_POST['first_name']);
$last_name = escape($_POST['last_name']);
$email = escape($_POST['email']);
$p_image = $_FILES['images']['name'];
$post_image_temp = $_FILES['images']['tmp_name'];
$role = 'subscriber';
move_uploaded_file($post_image_temp, "user_picture/$p_image");
$query = "insert into user (name, password, first_name, last_name, email, image, role) values ('{$name}', '{$password}', '{$first_name}', '{$last_name}', '{$email}','{$p_image}', '{$role}')";
$execute = mysqli_query($connection, $query);
}
?>
<form action="" method="post" class="w3_form_post">
<div class="w3_agileits_main_grid w3l_main_grid">
<span class="agileits_grid">
<label>First Name </label>
<input autocomplete="off" type="text" name="first_name" placeholder="First Name" required="">
</span>
</div>
<div class="w3_agileits_main_grid w3l_main_grid">
<span class="agileits_grid">
<label>Last Name </label>
<input autocomplete="off" type="text" name="last_name" placeholder="Last Name" required="">
</span>
</div>
<div class="w3_agileits_main_grid w3l_main_grid">
<span class="agileits_grid">
<label>Your Email </label>
<input autocomplete="off" type="email" name="email" placeholder="Your Email" required="">
</span>
</div>
<div class="w3_agileits_main_grid w3l_main_grid">
<span class="agileits_grid">
<label>User Name </label>
<input autocomplete="off" type="text" name="name" placeholder="User Name" required="">
</span>
</div>
<div class="w3_agileits_main_grid w3l_main_grid">
<span class="agileits_grid">
<label>Password </label>
<input autocomplete="off" class="form-control mx-sm-3" type="text" name="password" placeholder="Password" required="">
</span>
</div>
<br>
<div class="input-group mb-3">
<div class="custom-file">
<input type="file" class="custom-file-input" id="inputGroupFile01">
<label class="custom-file-label" for="inputGroupFile01">Choose file</label>
</div>
</div>
<div class="w3_main_grid">
<div class="w3_main_grid_right">
<input type="submit" name="submit" value="Submit">
</div>
</div>
</form>
</div>
<?php include "includes/footer.php"?>
Note:
I took a folder named user_picture to store all pictures, and using a bootstrap class as a file uploader. CAN ANYONE PLEASE HELP ME TO FIGURE OUT MY ERROR...!
Need to add name attribute to file input field, only then images can be retrieved from $_FILES variable in PHP file. Code for reference:
<input type="file" class="custom-file-input" id="inputGroupFile01" name="images">
Also add enctype attribute to form to allow posting media files like:
<form action="" method="post" class="w3_form_post" enctype="multipart/form-data">
Form element must look like this:
<form action="" method="post" class="w3_form_post" enctype="multipart/form-data">
In your code i found this two issue please check,
<form action="" method="post" class="w3_form_post" enctype="multipart/form-data">
<input type="file" class="custom-file-input" name="images" id="inputGroupFile01">
I hope this will help you.

adding eventlistner to get file related details

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?

Hide and Show Input Mask

When running this solution to hide and show an input mask, on page load I am seeing both input boxes. My script has been placed on the bottom of the page as last script. I am basically hiding and showing one or the other input box based on the checkbox. All appears to be working perfectly on jsfiddle and this code snippet, yet on Chrome, Android browser, Firefox and Safari both input boxes display on page load. After I toggle the checkbox, then it works properly. Not sure what is causing it to show both input boxes on page load. Any help wold be appreciated.
var showPass=false;
$('#c').change(function(){
showPass = ($('#c:checked').length>0);
if (showPass){
$('#p').hide();
$('#transaction_id').show();
}else{
$('#transaction_id').hide();
$('#p').show();
}
});
$('#p').change(function(){
if (!showPass) $('#transaction_id').val($('#p').val());
});
$('#transaction_id').change(function(){
if (showPass) $('#p').val($('#transaction_id').val());
});
#transaction_id{display:none;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://raw.githubusercontent.com/digitalBush/jquery.maskedinput/1.4.1/dist/jquery.maskedinput.js"></script>
<div class="bs-example">
<form role="search" class="navbar-form navbar-left" id="form2" name="form2" autocomplete="off" autocorrect="off" method="post" action="<?php echo $editFormAction; ?>">
<div class="form-group">
<label for="input">Scan Receipt, ID or </label>
<input type="checkbox" id="c">
<span class="phonenum">Phone Number</span>
<div class="input-group">
<input type="text" name="transaction_id" id="p" class="form-control" placeholder="receipt or ID" autofocus>
<input type="text" name="transaction_id" id="transaction_id" class="form-control" placeholder="(999) 999-9999" style="display:none" autofocus />
<input type="hidden" id="activity_id" name="activity_id" value="<?php echo $_GET['recordID']; ?>" />
<input type="hidden" name="MM_insert" value="form2" />
<span class="input-group-btn">
<button type="submit" id="Submit" name="Submit" class="btn btn-default" onclick="this.disabled = true;
this.value = 'Saving...';
this.form.submit();"><span class="glyphicon glyphicon-search"></span> Redeem Ticket</button>
</span>
</div>
</div>
</form>
</div>
After trial and error, I found the solution. Just needed to initially hide the 2nd input:
<input type="text" name="transaction_id" id="transaction_id" class="form-control"
placeholder="(999) 999-9999" style="display:none" autofocus />
Simple solution. I have also fixed the code snippet for anyone who wants to use it.

SharePoint Online Form Processing

I wrote a simple HTML/PHP form that takes input from a form and outputs to HTML to create a company standard email signature. It just echoes the strings from the form fields into the HTML for the signature.
Form:
<form action="sig.php" method="post">
Full Name: <input type="text" name="fullName"><br>
Job Title: <input type="text" name="jobTitle"><br>
Direct Phone Number (xxx.xxx.xxxx) <input type="text" name="phoneNumber"><br>
Email: <input type="text" name="email"><br>
<input type="submit">
</form>
PHP:
<div style="font-size:10pt; font-family:'Arial',sans-serif;color:#0E5881">
Please copy/paste the following into your email signature:
</div>
<hr>
<br>
<br>
<div style="font-size:12pt; font-family:'Arial',sans-serif;color:#133467">
<b><?php echo $_POST["fullName"]; ?></b>
</div>
<div style="font-size:10pt; font-family:'Arial',sans-serif;color:#0E5881">
<?php echo $_POST["jobTitle"]; ?>
</div>
<div style="font-size:10pt; font-family:'Arial',sans-serif;color:#656565">
Direct:</b> <?php echo $_POST["phoneNumber"]; ?>
<br>
<?php echo $_POST["email"]; ?> | www.Example.com
</div>
<br>
<div style="font-size:20pt; font-family:'Arial',sans-serif;color:#676767">
<b>Example.com</b>
It works great, but now they tell me they want to put it on our company's SharePoint Online site.
As far as I can tell, there is no way to run the PHP on SharePoint. I also can't use a PageViewer Web Part.
What is my best option for doing this through SharePoint? Something client side that will run inside of SharePoint? I think Java Script is an option, but I don't know anything about it. I know SharePoint uses ASP, but I know even less about that.
Any help would be appreciated!
PHP is server-side code, which you cannot add in SharePoint online unless you're willing to write your own SharePoint apps.
For something like this, your best bet is probably just a page with some JavaScript.
document.getElementById("btnSubmit").addEventListener("click", function() {
document.getElementById("signaturePanel").style.display = "inherit";
document.getElementById("fullNameOut").innerHTML = document.getElementById("fullName").value;
document.getElementById("jobTitleOut").innerHTML = document.getElementById("jobTitle").value;
document.getElementById("phoneNumberOut").innerHTML = document.getElementById("phoneNumber").value;
var email = document.getElementById("email").value;
var emailOut = document.getElementById("emailOut");
emailOut.innerHTML = email;
emailOut.href = "mailto:" + email;
document.getElementById("socialOut").style.display = document.getElementById("social").checked ? "inherit" : "none";
});
Full Name:
<input type="text" id="fullName" />
<br>Job Title:
<input type="text" id="jobTitle" />
<br>Direct Phone Number (xxx.xxx.xxxx)
<input type="text" id="phoneNumber" />
<br>Email:
<input type="text" id="email" />
<br>
<input type="checkbox" id="social" checked="checked" />Include social media links
<br/>
<input type="button" id="btnSubmit" value="submit" />
<div id="signaturePanel" style="display:none">
<div style="font-size:10pt; font-family:'Arial',sans-serif;color:#0E5881;">
Please copy/paste the following into your email signature:
</div>
<hr>
<br>
<br>
<div style="font-size:12pt; font-family:'Arial',sans-serif;color:#133467">
<b><span id="fullNameOut"></span></b>
</div>
<div style="font-size:10pt; font-family:'Arial',sans-serif;color:#0E5881">
<span id="jobTitleOut"></span>
</div>
<div style="font-size:10pt; font-family:'Arial',sans-serif;color:#656565">
Direct:</b> <span id="phoneNumberOut"></span>
<br>
<a id="emailOut" href="mailto:"></a> | www.Example.com
</div>
<br>
<div style="font-size:20pt; font-family:'Arial',sans-serif;color:#676767">
<b>Example.com</b>
<div id="socialOut" style="display:none">
<a href="http://example.com">
<img src="https://placeholdit.imgix.net/~text?txtsize=15&txt=twitter+link&w=90&h=90&txttrack=0" />
</a>
</div>
</div>

How to prepopulated from data using PHP

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');

Categories

Resources