I would like to add forms to a reveal.js presentation using JSON.
Here is the form embedded in one of the reveal slides:
<section>
<form action="#">
First name: <input type="text" name="firstname"><br>
Last name: <input type="text" name="lastname">
<button type="submit">Submit</button>
</section>
I also added this PHP script to the top of the file:
<?php
if(isset($_POST['submit'])){
$file = "data.json";
json_string = json_encode($_POST,JSON_PRETTY_PRINT);
file_put_contents($file, $json_string,FILE_APPEND);
}
?>
I believe the file should be run in as .php extension to properly execute the PHP script which sends the user input to the server, however, I get a white screen when when running revealjs as a .php extension.
Has anyone successfully embedded forms in their revealjs presentation?
Thanks!
Yes I add form to reveal.js, but I work with javascript, no php.
You can try it here: http://jsfiddle.net/B9r22/20/
<h2>Form</h2>
<section>
<form action="#">
First name: <input type="text" name="firstname" data-name="firstname"/><br/>
Last name: <input type="text" name="lastname" data-name="lastname"/><br/>
<button type="submit">Submit</button>
</section>
<h2>JSON</h2>
<p id="json"></p>
$(function() {
$('body').on('submit','form',function() {
var answers = [];
$('input[type="text"]', this).each(function(){
answers.push({'name':$(this).data('name'), 'value':this.value});
});
var data = {
'answers': answers
};
json = JSON.stringify(data);
$('#json').append(json);
return false;
});
});
Related
I want to know if i can set a variable when the player finish the him form.
E.g:
<form>
First name:<br>
<input type="text" name="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" name="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit">
</form>
And when he submit, execute a function on JS, what saves the firstname and lastname to a variable.
And i want know in PhP, if it's possible too thanks.
JS solution:
In this solution, the data is processed client side. Be careful though if you are saving any of this to your server since users can use their browser to manipulate the data in unintended ways.
HTML:
<form>
First name:<br>
<input type="text" id="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" id="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
JS:
function myFunction() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
}
PHP solution:
In this solution, the data is processed server side. Here, you will clear out any JS variables because this causes a new page to load when you do this. So, generally, do not do this if you need to continue working on page after saving your variables. Also, note that the HTML forms use "name" instead of "id" when passing a post.
HTML:
<form action="MYPAGE.php" method="post">
First name:<br>
<input type="text" name="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" name="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit">
</form>
PHP:
<?php
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
?>
AJAX Solution: The third way to do it which is sort of a hybrid is to use AJAX. In this solution you use JavaScript to collect the variables, then you POST the data to another .php file without navigating away. This way you don't clear out any of your JavaScript variables, and you can write the data to the server. Then whatever content is generated by your targeted PHP page can be loaded into the page you are already on by inserting it into the element you target with your result.
NOTE: This sample code uses jQuery.
HTML:
<form>
First name:<br>
<input type="text" id="firstname" value="Pedro">
<br>
Last name:<br>
<input type="text" id="lastname" value="Pinto">
<br><br>
<input type="submit" value="Submit" onclick="myFunction()">
</form>
<div id="MYTARGETELEMENT"></div>
JS:
function myFunction() {
var firstname = document.getElementById('firstname').value;
var lastname = document.getElementById('lastname').value;
$.ajax({
type:"POST",
url: "MYPAGE.php",
data: {
firstname:firstname,
lastname:lastname
},
success: function(result){
$("#MYTARGETELEMENT").html(result);
}
});
}
PHP:
<?php
$firstname = $_POST["firstname"];
$lastname = $_POST["lastname"];
echo("Post Received By Server");
?>
var username = $("input[name=firstname]").val();
var lastname = $("input[name=lastname]").val();
This is how you get the value of both input field with Jquery. The first part gets your input by it's name, .val() gets the value from that input.
How to get it in PHP:
Add a name to the submit button:
<input type="submit" name="submit" value="Submit">
Then use this code:
<?php
if(isset($_POST['submit'])) {
$firstname = $_POST['firstname'];
$lastname = $_POST['lastname'];
}
?>
I have a external page loaded using scripts inside a form of a current page, and tried to call the inputs on the external page to be sent from a form inside the current page. It seems like the data on the external page cannot be sent from the current form. Can somebody please tell me why?
Here are example codes to explain the situation.
PAGE A
<form method="post" action="testing.php">
<input type="hidden" name="program" value="diploma"/>Diploma/Foundation
<input type="hidden" name="program" value="bachelor"/>Bachelor Degree
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript">
function loadPageIntoDiv(url) {
var $div = $("div#imgbox");
$div.load(url, function() {
$div.find("a").on("click", function(evt) {
var $link = $(this);
loadPageIntoDiv($link.id("test"));
evt.preventDefault();
return false;
});
});
}
</script>
<div id="imgbox">
</div>
<input type="submit" name="submit" />
</form>
PAGE B
<div>Input1</div>
<div><input type="text" name="uubsss"</div>
<div>Input2</div>
<div><input type="text" name="uubbsssa"</div>
<div>Input3</div>
<div><input type="text" name="uubbasssab"</div>
the function to load div is in loadPageIntoDiv(), and will call diploma-foundation.php into the first A tag with an id of "test1"
please help me with this. Thank you in advance dear stackoverflow-ers.
Is it possible to save to a .txt file all the generated or the inputted text on the text area? I just want to add a Save button besides the submit button or at the bottom and just save it directly to a .txt file. Thanks
Here's my code:
<html>
<body>
<form id="myForm">
Name: <br><input type="text" name="Name" placeholder="Name" size="40"/><br/>
Phone: <br><input type="text" name="Phone No" placeholder="Phone Number"/><br/>
Callback: <br><input type="text" name="Callback No" placeholder="Callback Number"/><br/>
CID: <br><input type="text" name="CID" placeholder="CID No" /><br/>
Status OK: <br><select name="Status" placeholder="Status"><option>Yes<option>No</select><br/>
INBOUND: <br><select name="INBOUND" placeholder="INBOUND"><option>Yes<option>No</select><br/>
<button type="button" onclick="ShowText();">Submit</button>
</form>
<p>Result:</p>
<p><textarea cols=40 rows=7 id="show" onClick='selectText(this);'></textarea></p>
<script>
function ShowText(){
// find each input field inside the 'myForm' form:
var inputs = myForm.querySelectorAll('input,select');
// declare 'box' variable (textarea element):
var box = document.getElementById('show');
// clear the 'box':
box.value = '';
// loop through the input elements:
for(var i=0; i<inputs.length; i++){
// append 'name' and 'value' to the 'box':
box.value += inputs[i].name + ': '+inputs[i].value+'\n';
}
}M
function selectText(textField)
{
textField.focus();
textField.select();
}
</script>
<textarea rows="9" cols="40">
Issue:
Steps:
</textarea>
</body></html>
You can try to use fopen.
if your text from yout post form example : $_POST['nameoftextarea'] you can add on variable. Maybe like this
<?php
$myfile = fopen("newfile.txt", "w") or die("Unable to open file!");
$txt = $_POST['nameoftextarea'];
fwrite($myfile, $txt);
fclose($myfile);
?>
try to explore with the path of your text result too.
here some other example i found to make txt file on php create txt file using php
CMIWW
Server Side
Use the following code for server side:
$text = $_POST["textarea_name"] //Needs to correspond with the name in the HTML
file_put_contents("myFile.txt", $text); //Change the file path to your needs
For more info look at this: http://php.net/manual/en/function.file-put-contents.php
Simple as that. Remember to change your form tag like so (obviously change the action link):
<form id="myForm" action="/link/to/process/form" method="POST">
and change the name of the text area like so:
<textarea cols=40 rows=7 id="show" onClick='selectText(this);' name="textarea_name"></textarea>
You'll also need to add a Save button to the form.
<button type="submit">Save</button>
Client Side
For client side check this out:
http://eligrey.com/demos/FileSaver.js/
and
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
Those links also tell you how to save data other than text, but I assume your only interested on the text bit.
i am trying to check my value form database it already enter or not before submitting the form
i have code its display the result in text box how it is possible that result is display in div or span.
my code is as under:
my first file category.php have script and html form
script
<script src="jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$("#id").keyup(function() {
$.ajax({
type : "POST",
url : "dbscript2.php",
data : "id=" + $("#id").val(),
success : function(html) {
$("#message").val(html);
}
});
});
});
</script>
html form is :
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="category" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="new" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
and last php file message dbscript2.php
<?php
include "config.php";
$id = $_POST['id'];
$q=mysql_query("select * from category where category ='$id'");
$num=mysql_num_rows($q);
if($num==0)
echo "";
else
{
echo "This Category already Entered";
}
?>
Since there are couple of errors in the actual code you shared and the answer you derived, let me put it across here
HTML form
<form method="POST" action="gcd.php">
<p>
<label>Category:</label>
<input type="text" name="id" id="id" tabindex="1" />
</p>
<p>
<div id="mes"></div>
<input type="text" name="message" id="message" tabindex="2" />
</p>
<p>
<input type="submit" name="submit" id="submit" value="Save" />
</p>
</form>
The core code where you want the data to get inserted to the div
$("#mes").text(html);
Please note that you get the value returned from the php script, and not some html. Hence it is better to rename your expected return value as some other identifier say mydata
$("#mes").text(mydata);
Please let me know if you are looking for something else.
Updated based on OP's further query
Please read jquery API docs, It gives you an idea of the supported functions http://api.jquery.com/.
To your specific question, yes you can hide or show a particular div using the below calls:
//check your condition and show or hide the div accordingly
$("#mydiv").show();
or
$("#mydiv").hide();
I have the following html form...
<form id="mform" method="get" enctype="text/plain">
<input name="firstname" type="text" id="firstname">
<input type="submit" class="submit-sponsor-btn" name="submit" value="Submit" onclick="javascript:doMailto(); return false;" id="submit">
</form>
and my javascript looks like this...
var msubject = "Become an sponsor to start your connection to future talent";
var mfirstname = $('#firstname').val();
var mbody = "<h1>Sponsor Information Below:</h1><p>Firstname:"+mfirstname + "</p>";
var sMailto = "mailto:memail#something.com?subject="+ msubject + "&body="+ mbody;
function doMailto() {
window.open(sMailto);
}
What do I need to do with this code, to enable HTML tags to be rendered within the e-mail?
Because as of right now, it simply shows the element tags along with the content.
Thanks for any advice!
You can set the Mail Content Mime-type to be HTML, the page will be rendered. This would work only if the content is generated from server-side.