Outputting html form data - javascript

HTML Code:
<form class="form-inline signup" role="form" action="script.php" method="post">
<div class="form-group">
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter your email address" name="email" >
</div>
<button type="submit" class="btn btn-theme">Get notified!</button>
</form>
PHP Code:
<?php
if (!empty($_POST["email"]))
file_put_contents("emails.txt", file_get_contents("emails.txt") . "\n" . $_POST["email"]);
?>
I tried several methods before asking here but none works.
When the button is click it loads the php code and shows a blank page on the browser.

You have to do a lot of things before you can start.
Set the action attribute of the form to a .php file.
<form class="form-inline signup" role="form" action="write.php" method="post">
Give a name attribute to the <input /> element.
<input type="email" class="form-control" id="exampleInputEmail1"
placeholder="Enter your email address" name="email" />
In the write.php (or whatever PHP file you use), actually write to the file.
<?php
if (!empty($_POST["email"]))
file_put_contents("emails.txt", file_get_contents("emails.txt") . "\n" . $_POST["email"]);
?>
Last but not least, please run this on the server and not in browser:
http://localhost/file.php

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.

Can't run script on form submit or button click

I am new to HTML, PHP and JavaScript, so expect mistakes.
I've got the form working and sending contents via email in my PHP file. That works. I'm using the Iframe to keep people on page and that seems to work as intended.
I'm trying to get a bootstrap alert to appear once the form is submitted. So it's collapsed by default and I simply want it to appear once the form is submitted or the button pressed. I cannot figure it out for the life of me. The form will submit as expected but the script does not seems to run with the alert.
The script is within the HTML doc:
<script>
function FormSubmit(){
alert("The form was submitted");
$('#AlertSuccess'.show('fade');
}
</script>
<div id="AlertSuccess" class="alert alert-success collapse">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;">
</iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
Please make me feel silly and point out the typo or logic mistake as I've been stuck on this for a while.
You have to hide the #AlertSuccess in default and on form submit, call the show() to display the message.
And you have forgot to close the bracket in $('#AlertSuccess'.show('fade');.
It should be
$('#AlertSuccess').show('fade');
function FormSubmit(){
$('#AlertSuccess').show('fade');
}
.hidden{
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="AlertSuccess" class="alert alert-success collapse hidden">
<!--<a id="CloseAlert" href="#" class="close">×</a> -->
<strong>Awesome</strong> We will contact you shortly
</div>
<div class="contact_form_container">
<iframe name="keepitneat" style="display:none;"></iframe>
<form id="contact_form" class="contact_form" action="/contact_send_btn.php" method="post" target="keepitneat" onsubmit="FormSubmit()">
<input id="contact_form_name" name="name" class="input_field contact_form_name" type="text" placeholder="Name" required="required" data-error="Name is required.">
<input id="contact_form_email" name="email"class="input_field contact_form_email" type="email" placeholder="E-mail" required="required" data-error="Valid email is required.">
<input id="contact_form_number1" name="number1"class="input_field contact_form_number1" type="text" placeholder="Mobile Number" required="required" data-error="Phone number is required">
<input id="contact_form_number2" name="number2"class="input_field contact_form_number2" type="text" placeholder="Landline Number">
<button id="contact_send_btn" type="submit" onclick="FormSubmit()" class="contact_send_btn trans_200" value="Submit">send</button>
</form>
</div>
The browser console (F12) should tell you about the syntax error in you javascript. You forgot the closing ) in $('#AlertSuccess'.show('fade');.
$('#AlertSuccess').show('fade');

Codeigniter submit function not working

on my http://localhost/qconsolidated/login_controller/login this error appears:
Object not found!
The requested URL was not found on this server. The link on the
referring page seems to be wrong or outdated. Please inform the author
of that page about the error.
I always get this error everytime i click the submit button on my form. I have checked my it back and forth for 2 days now, and still could't get it right. please help me. Here are the codes that I made:
login_controller.php
defined('BASEPATH') OR exit('No direct script access allowed');
class Login_controller extends CI_Controller {
public function index(){
$this->load->view('template/header');
$this->load->view('login_view');
$this->load->view('template/footer');
}
public function login(){
echo "<script> alert('Working!'); </script>";
}
login_view.php
<div class="container">
<form class="form-login" method="post" action="/login_controller/login">
<img src="<?php echo base_url(); ?>public/img/q_logo.png">
<label class="sr-only">Email address</label>
<input type="email" name="email" class="form-control" placeholder="Email address" required autofocus>
<label class="sr-only">Password</label>
<input type="password" name="password" class="form-control" placeholder="Password" required>
<button class="btn btn-lg btn-primary btn-block" type="submit">Log in</button>
</form>
</div>
Please help me
change your action url.
<form class="form-login" method="post" action="<?php echo base_url()?>/login_controller/login">
change form action.Use something like this
<form class="form-login" method="post" action="<?php echo site_url('login_controller/login');?>">
you can also achieve this by using form_open('login_controller/login');
Try like this used base_url
<form class="form-login" method="post" action="<?php echo base_url("login_controller/login");">

How to get an input text value in jquery?

How go get an input text value in JavaScript?
I want to get input text value in jquery script but it prompted empty.
my script code:
<script type="text/javascript">
var emails;
function checkRegistration() {
emails = document.getElementById('my_email').value;
alert(emails);
}
</script>
my form code :
<form method="post" role="form" onSubmit="return checkRegistration()" action="#">
<div class="form-group">
<input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address">
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
</div>
</form>
First check are you using jquery.min.js file or not.
Second if you want to get value using id. id should be unique on that page.
Try below
var my_email= $('#my_email').val();
Edit, Updated
Add required attribute to input type="email" element, to prevent form submission if value not entered by user
Use .onchange event
var emails = document.getElementById("my_email");
function checkRegistration() {
alert(this.value);
}
emails.onchange = checkRegistration;
<form method="post" role="form" action="#">
<div class="form-group">
<input type="email" class="form-control" id="my_email" name="email" placeholder="Enter a valid email address" required>
</div>
<div class="form-group">
<input type="submit" name="submit" class="btn btn-primary btn-block" value="Forgot Password" />
</div>
</form>

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

Categories

Resources