Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
i have a simple form and i wanna save inputs as a text file how i can do it ?
this is html code
<div id="wrapper">
<div class="main-content">
<div class="header">
</div>
<div class="l-part">
<input type="text" placeholder="Username" class="input-1" />
<div class="overlap-text">
<input type="password" placeholder="Password" class="input-2" />
Forgot?
</div>
<input type="button" value="Log in" class="btn" />
</div>
</div>
<div class="sub-content">
<div class="s-part">
Don't have an account?Sign up
</div>
</div>
</div>
With just html you can only display things on your site. To save things into say a database or in your case a text file, you have to use something like PHP or JavaScript.
Also, the code you have right now doesn't contain any tag. You need this tag to tell the browser that this is a form and can be submitted to your website. Here is a simple example of a form that saves itself to a text file with PHP after submitting:
<?php
if ($_SERVER['REQUEST_METHOD'] === "POST") { // If someone is submitting a form
$myfile = fopen("file.txt", "w") or die("Unable to open file!"); // Open/create the file to write in
// Add parameters that are included in $_POST
$txt = "First Name: " . $_POST["firstname"];
$txt .= "\nLast Name: " . $_POST["lastname"];
$txt .= "\nAge: " . $_POST["age"];
fwrite($myfile, $txt); // Write $txt to file
fclose($myfile); // Save the file
}
?>
<body>
<form method="post">
<input type="text" name="firstname">
<input type="text" name="lastname">
<input type="text" name="age">
<input type="submit">
</form>
</body>
You can´t do this with only HTML.
Maybe this can help you:
Is it possible to write data to file using only JavaScript?
You will need read the input data and save to a .txt file using javascript.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to create a revision website for teens, and i want to implement a test using radio buttons and with a submit at the bottom which will tell them wether their answers are correct or not. The answers will all be set to be one of the 4 answers. Can anyone explain the easiest way to do this just using hard code as i am reluctant to use a database as at the moment it is just local.
Save this in a file named quiz.html, or any name you want (just keep the .html extension), and try it:
<html>
<head>
<title>Quiz</title>
<style type="text/css">
.valid{color:#1F1}
.invalid{color:#F11}
#overall{font-size:2em;font-weight:bold}
</style>
<script src='http://code.jquery.com/jquery-latest.min.js' type='text/javascript'></script>
</head>
<body>
<div class="form">
<div class="form-content"></div>
<div><input type="button" id="btnSubmit" value="Submit"/></div>
<div id="overall"></div>
</div>
<script type="text/javascript">
// Questions and answers
// You can add questions from here >>>>>
var questions = [
{"question":"Question 1","possibleAnswers":{"1":"Answer 1-1", "2":"Answer 1-2", "3":"Answer 1-3","4":"Answer 1-4"},"validAnswer":"3"},
{"question":"Question 2","possibleAnswers":{"1":"Answer 2-1", "2":"Answer 2-2", "3":"Answer 2-3","4":"Answer 2-4"},"validAnswer":"1"}
];
// To here <<<<
// Building quiz
var form = $(".form-content");
for (var i=0;i<questions.length;i++) {
var q = questions[i];
var qHtml = '<div id="dq'+i+'"><div>'+q.question+'</div><div>';
var pas = q.possibleAnswers;
$.each(pas, function(j, val) {
qHtml = qHtml + '<input type="radio" name="q'+i+'" value="'+j+'">'+val+'<br/>';
});
qHtml = qHtml + '<div class="result"></div></div>';
form.append($(qHtml));
}
var overall = $('#overall');
// Checking answers on button click
$('#btnSubmit').click(function(e){
var goodAnswers = 0;
for (var i=0;i<questions.length;i++) {
var q = questions[i];
var qDom = form.find('#dq'+i);
var v = qDom.find('input[name="q'+i+'"]:checked').val();
var rDom = qDom.find('.result');
if (v == q.validAnswer) {
rDom.removeClass('invalid').addClass('valid').html('Valid answer');
goodAnswers++;
} else {
rDom.removeClass('valid').addClass('invalid').html('Invalid answer');
}
}
overall.html('Final result: ' + goodAnswers + '/' + questions.length);
});
</script>
</body>
</html>
It's a HTML/JavaScript only webpage (not secure for somebody with JavaScript knowledges, though). Pay attention to the part that says "You can add questions from here". It's a javascript array, and you can add as many questions, with as many options as you wish. Just keep the pattern of each question element:
{
"question":"Here goes the question",
"possibleAnswers": // List of possible answers, "value":"text" pairs, as a JSON object
{
"1":"Answer 1",
"2":"Answer 2",
"3":"Answer 3",
...
"N":"Answer N"
},
"validAnswer":"3" // Value of the valid answer
}
EDIT 1: Modified to use radio buttons instead of dropdown.
EDIT 2: Removed logging, and added overall result.
This can help you start. Place all of the code in a file called quiz.php and try it.
HTML:
<html>
<form action='quiz.php' method='POST'>
<input type='radio' name='sex' value='male'>Male<br>
<input type='radio' name='sex' value='female'>Female<br>
<input type='submit' value='submit'>
</form>
</html>
PHP:
<?php
$q1 = $_POST['sex'];
if($q1=='male')
{
echo 'correct!';
}
?>
Simple example of submitting user input and doing something with it in PHP :
HTML
<form action='myphpfile.php' method='POST'>
What brand has a model called Q7 ?
<select name="question1">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option>
</select>
<input type="submit">submit</input>
</form>
PHP , myphpfile.php
<?php
$answer1 = "audi";
if($_POST['question1'] == $answer1){echo $answer1.' = is the right answer !'}
else{echo 'Wrong answer'}
?>
here you go, an idea for you
<?php
//Set Answers//
$q1_answer = 'b';
$q2_answer = 'a';
$q3_answer = 'c';
$form = '<form action="" method="post">
Question 1<br />
A<input type="radio" name="q1" value="a"/>
B<input type="radio" name="q1" value="b"/>
C<input type="radio" name="q1" value="c"/><br />
Question 2<br />
A<input type="radio" name="q2" value="a"/>
B<input type="radio" name="q2" value="b"/>
C<input type="radio" name="q2" value="c"/><br />
Question 3<br />
A<input type="radio" name="q3" value="a"/>
B<input type="radio" name="q3" value="b"/>
C<input type="radio" name="q3" value="c"/><br />
<input type="submit" name="submit" value="submit" />
</form>';
if (isset ($_POST['submit'])){
if ($_POST['q1'] === $q1_answer){
$q1_res = 'correct';
}else{$q1_res = 'incorrect';
}
if ($_POST['q2'] === $q2_answer){
$q2_res = 'correct';
}else{$q2_res = 'incorrect';
}
if ($_POST['q3'] === $q3_answer){
$q3_res = 'correct';
}else{$q3_res = 'incorrect';
}
$display = 'Q1 = '.$q1_res.'<br>
Q2 = '.$q2_res.'<br>
Q3 = '.$q3_res.'<br>';
}else{
$display = $form;
}
echo $display;
?>
Can anyone explain the easiest way to do this just using hard code as i am reluctant to use a database as at the moment it is just local.
Your solution is to use Javascript and do your best to obfuscate the answer file. Since your question does not tell use if you have PHP or another server solution like node.js available we have to assume that HTML/Javascript is all that is at your disposal.
StackOverflow usually advises against external links as answers but I'm providing these here as support links to check out.
https://github.com/jrue/JavaScript-Quiz
http://uhaweb.hartford.edu/kelley/quiz/quizmaker-gen.html
Fundamentally, using the github example you create a quiz file in javascript, personally unlike the github example I'd put this in its own .js file and link it instead of including in the HTML header. I'd also obfuscate the .js file as to disguise the potential answers to source code snoopers, there are plenty of tools available to do this online.
Ultimately a PHP or Node.js solution will be your best choice for a secure test if you have those available. Please consider revising your question to help us answer it better.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions asking us to recommend or find a tool, library or favorite off-site resource are off-topic for Stack Overflow as they tend to attract opinionated answers and spam. Instead, describe the problem and what has been done so far to solve it.
Closed 8 years ago.
Improve this question
How do you display a error depending on the length of the text inputted to a password field? For example if a user inputted 10 characters but the limit was 5 "Limit is 5 characters" would be displayed in a DIV. Here is my code:
<!doctype html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
<title>Project</title>
<script type="text/javascript">
</script>
</head>
<body>
<div class="container">
<span class="main_text">Textbox</span><br>
<input name="textbox1" type="password" class="textbox1" placeholder="Enter Password" autofocus><br><br>
</div>
</body>
</html>
Any help will be greatly appreciated. Thanks, Omar.
Here is a example of what I mean:
Okay i think it'll help you.
In PHP:
<?php
if(strlen($_POST['textbox1']) > 16)
echo 'Limit is 16 characters';
else
// log in
?>
In JavaScript:
<!doctype html>
<html>
<head>
<title>Project</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
function passwordCheck(y){
var x = y.value;
if(x.length>5) {
document.getElementById("error").innerHTML="<font color='red'>Limit is 16 characters</font>";
} else {
if(x.length<=16) {
document.getElementById("error").innerHTML="";
}
}
}
</script>
</head>
<body>
<div class="container">
<span class="main_text">Textbox</span><br>
<input name="textbox1" onkeyup="passwordCheck(this);" type="password" class="textbox1" placeholder="Enter Password" autofocus><br><br>
<div id="error"></div>
</div>
</body>
</html>
Hope it'll help you.
strlen is what you are looking for. It counts letters in the string.
<?php
if(strlen($_POST['textbox1']) > 5) {
echo 'Limit is 5 characters';
}
else {
// log in
}
?>
jQuery solution, i think more elegant:
$('.textbox1').keydown(function() {
if($(this).length > 5) {
$('#error_div').html('Limit is 5 characters');
}
});
You can use javascript keyup event. Which check length of the text box..
You need understand 2 layers:
usability layer: put some Javascript, HTML codes into your page to turn it more easy to use.
security layer: put a Webservice Language (php, c#, python, etc.) to avoid error on your data, malicious injection, etc.
So what you need is both:
Using Javascript you will use attribute object.length and on PHP the attribute strlen($variable)
Hope this helped.
The best practice is validation form data on server-side and client-side. Always implement rule that says: "Never trust users".
Your php-code is:
<?php
$errors = [];
if(isset($_POST['submit'])){
if(isset($_POST['password']) && strlen($_POST['password']) > 5){
$errors[] = 'Limit is 5 characters';
}
}
?>
<div class="container">
<php if(!empty($errors)): >
<div class="messages"><?php join('<br/>', $errors) ?></div>
<?php endif; ?>
<form action="" method="post">
<span class="main_text">Textbox</span><br>
<input name="password" type="password" class="textbox1" placeholder="Enter Password" autofocus><br><br>
<input type="submit" name="submit" value="Submit"/>
</form>
</div>
Try this, Added <form> tag and submit button
<form action="index.php" method="post">
<div class="container">
<span class="main_text">Textbox</span><br>
<input name="textbox1" type="password" class="textbox1" placeholder="Enter Password" autofocus onkeyup="PasswordChecker(this)"><br><br>
<span id="passwordCheck"></span>
<?php
if(isset($_POST['submit'])){
if(strlen($_POST['textbox1']) > 5){
echo 'Limit is 5 characters';
}
}
?>
</div>
<input type="submit" name="submit" value="Submit">
</form>
Javascript:
function PasswordChecker(d){
if(d.value.length>5){
document.getElementById("passwordCheck").innerHTML = 'Password limit is 5';
}
}
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 9 years ago.
Improve this question
How do I use only one INPUT TYPE = "text" to conduct two surveys
<FORM method="GET" action="http://www.youtube.com/results?q=">
</A><br>
**<INPUT TYPE="text" name="q" size=25 maxlength=270 value="" background-color="#ff00ff" >**
<INPUT type="submit" name="btnY" VALUE="Youtube">
</FORM>
<FORM method="GET" action="http://www.google.com/search">
</A>
**<INPUT TYPE="text" name="q" size=25 maxlength=270 value="" background-color="#ff00ff">**
<INPUT type="submit" name="btnG" VALUE="Google">
</FORM>
You can use somethink like this
html
**<INPUT id="inputLink" TYPE="text"size=25 maxlength=270 background-color="#ff00ff" >**
<a id="searchOnYoutube" href=""><button>Youtube</button></a>
<a id="searchOnGoogle" href=""><button>Google</button></a>
and jQuery
$("#inputLink").keyup( function(){
var search = $(this).val();
$("#searchOnYoutube").attr("href", "http://www.youtube.com/results?q="+search);
$("#searchOnGoogle").attr("href", "http://www.google.com/search="+search);
});
jQuery keyup function refresh the links of Google button and Youtube button
Try on jsFiddle : http://jsfiddle.net/p22fw/
I'm currently working on a project where the user needs to fill in a form which will be converted into HTML.
For example the user fills in the next form:
<form method="POST" action="">
Edit title: <input type="text" name="title"><br />
Edit subtitle: <input type="text" name="subtitle"><br />
Edit image: <input type="file" />
<input type="submit" value="OK" />
</form>
And the output has got to be in HTML, something like this:
<div class='container'>
<div class='leftBLock'>
<h2>*Title*</h2>
<p>*Subtitle*</p>
<img src='path/to/img/image.jpg' />
</div>
</div>
Do you guys know a way to easily get this done?
Thanks in advance!
Edit: I forgot to mention that I prefer a client-side solution.
Easy way to do is..
Store data in Table MySQL and fetch data in php file
<?php
//connection to database
//database query
?>
<div class='container'>
<div class='leftBLock'>
<h2><?php echo $rs['title']; ?></h2>
<p><?php echo $rs['subtitle']; ?></p>
<img src='<?php echo $rs['image']; ?>' />
</div>
</div>
I need some help, I'm building a website for a good friend and I need some help with the contact form. I found the code online but it's not working correctly. It sends the e-mail but not all the forms correctly, and doesn't send the picture. Also, when I send the form, it should link to the page contactus.html, but the link doesn't seem to work either. Can anyone help correct this code, this would help SO much. Thank you so, so much.
Here is the HTML for the contact form:
<div id="stylized" class="myform">
<form id="form" id="form" action="mail.php" method="POST">
<label>Name
<span class="small">Add your name</span>
</label>
<input type="text" name="name">
<label>Address
<span class="small">Add your home address</span>
</label>
<input type="text" name="address">
<label>Phone
<span class="small">Add a Phone Number</span>
</label>
<input type="text" name="phone">
<label>E-mail
<span class="small">Enter a valid E-mail</span>
</label>
<input type="text" name="email">
<label>Timeline
<span class="small">Range for your project</span>
</label>
<input type="text" name="timeline">
<label>Photo
<span class="small">Upload current picture</span>
</label>
<input type="file" name="photo">
<label>Description
<span class="small">Type Your Project Description</span>
</label>
<textarea name="message" rows="6" cols="25"></textarea>
<button type="submit" value="Send" style="margin-top:15px;">Submit</button>
<div class="spacer"></div>
</form>
</div>
And here is mail.php, which is supposed to help make the form work. I think here is where the problem is:
<?php $name = $_POST['name'];
$address = $_POST['address'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$timeline = $_POST['timeline'];
$description = $_POST['description'];
$formcontent="From: $name \n Message: $message";
$recipient = "blanger#hawaii.edu";
$subject = "New Project Request from 2DadsDB.com";
$mailheader = "From: $email \r\n";
mail($recipient, $subject, $formcontent, $mailheader) or die("Error!");
echo "Thank You!" . " -" . "<a href='contactus.html'>Go Back</a>";
?>
As Blender pointed out the code is very insecure. It's easy for malicious content to be inserted. Also there's no reference in the mail.php to "photo"
$fileImage = $_POST['photo'];
You'll need to use a script to upload and store the photo I believe. It's best too look at a tutorial or complete source instead of building from scratch.
The mail() function is good for only message sending.
To send an image First you need to upload your photo to the server To upload an image.
To send an image using mail() first attach your photo from server to mail() PHP e-mail attachment script
And use $name = mysql_real_escape_string(strip_tags($_POST['name']));
for each post like name,e-mail etc., for security purpose.
You should sanitize your imputs.Use mysql_real_escape_string or stripslashes function on each of the $_POST.
$user = mysql_real_escape_string($_POST['user']);