SharePoint Online Form Processing - javascript

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>

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.

how to show login first alert and fade or disable the current page if not login and if login then don't show alert

suppose i have this post a job page
<?php include_once "session.php" ;?>
<div id="wraper">
<?php include_once 'header.php'; ?>
<?php include_once 'navigationjp.php'; ?>
<div id="main">
<div id="content">
<div >
<form class="form" action="" method="post" >
<div class="lbl"><label><h2>Job Title: </h2></label></div>
<input class="inpu" type="input" name="title" required placeholder="HR Manager" /><br>
<div class="lbl"><label><h2>Degree: </h2></label></div>
<input class="inpu" type="input" name="degree" placeholder="MBA (HR)" /><br>
<div class="lbl"><label ><h2>Posts: </h2></label></div>
<input class="inpu" type="input" name="posts" placeholder="03" /><br>
<div class="lbl"><label><h2>Company: </h2></label></div>
<input class="inpu" type="input" name="company" required="" placeholder="Diamond Pvt Ltd Company" /><br>
<div class="lbl"><label><h2>Contact No: </h2></label></div>
<input class="inpu" type="text" name="contact" id="contact" required placeholder="0423121212" /><br><br>
<div class="lbl"><label><h2> </h2></label></div>
<input class="inpu" type="submit" name="submit" value="Post job" />
</form>
</div>
</div>
<?php include_once 'sidebar.php'; ?>
</div>
<?php include_once 'footer.php'; ?>
</div>
and i want that when someone click on form to write something it should check either user is signed in or not , if not signed in then i want to show an alert to user to login first if user is not signed in. how can i do it by using jquery or php ? can somebody tell me the example code please i don't know how to do it?
Well, you have 2 ways to do it, first is check this when the user enter the page above with php, something like this:
<?php if (!$user) { >?
<script>alert("Please log in first")</script>
<?php }?>
this will check the user right after he entered the page, you should provide us with more info about your login method and code so we can help you more specifically.
if you want to check if he is logged in after he already visited the page, you will need to use AJAX for that, php runs once after the page is loaded, so your way to talk with the php code after the page is loaded is with AJAX.
<script>
$("input.inpu").click(function() { //when the user clicked on the input
//do your ajax here.
});
</script>
you should read more about ajax here: http://api.jquery.com/jquery.ajax/

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

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

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

xhtml required contact form fields?

I have HTML form fields on a contact page which then send the data to a php page.
I would like to make the form fields required and show a red (*) next to the label if the user does not enter a value.
How can I do this?
<form id="contact_form" method="post" action="contact.php">
<p style="margin-top:20px">
<label for="title">Title</label><br/>
<input id="your_name" name="your_name" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="initial">Initial</label><br/>
<input id="initial" name="initial" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="surname">Surname</label><br/>
<input id="surname" name="surname" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="tel_number">Tel number</label><br/>
<input id="tel_number" name="tel_number" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="email">Email</label><br/>
<input id="email" name="email" type="text" style="width:94%"/>
</p>
<p style="margin-top:20px">
<label for="enquiry">Enquiry</label><br/>
<textarea id="enquiry" name="enquiry" rows="7" cols="10" style="width:94%"></textarea>
</p>
<p style="margin-top:50px">
<input type="submit" value="Send Message"/><br/>
</p>
</form>
You will have to put the form in a php file (or .phtml recommended*). Add a css class like .input-error.
.input-error { color: red; }
In your form you'll need something like this for each field:
if (empty($postData['field']) {
echo "<span class=\"input-error\">*</span>";
}
To give a clear-cut example:
<p style="margin-top:20px">
<?php if (empty($postData['your_name']): ?>
<span class="input-error">*</span>
<?php endif; ?>
<label for="title">Title</label><br/>
<input id="your_name" name="your_name" type="text" style="width:94%"/>
</p>
The form will have to submit to a php file that will process the form and bring you back to this page. In that file you'd need a line like this:
$postData = $_POST;
Or, if that script redirects to another page then you'll need to store the post data in the session. like:
$_SESSION['postData'] = $_POST;
In which case, at the top of your form or somewhere in the controller (if there is one), retrieve that data like so:
$postData = $_SESSION['postData'];

Categories

Resources