I have been playing with bookmarklets and made one that wraps a page in an iframe then puts a form so I can submit data to my server but I can't get PHP variables from the page.
sample code (have been compiling to bookmarklet at: http://moxleystratton.com/javascript/bookmarklet-compiler):
javascript:void((function(){
var a=document;
a.write(
'<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>'+a.title+' - Edit Mode </title>
</head>
<body>
<section>
<div id="wrapper">
<iframe src="'+a.URL+'" >
</iframe>
</div>
</section>
<footer>
<form action="/sys/manage/seo.php" method="post">
<input type="hidden" value=rawData >
<label for="title">Title</label>
<input type="text" name="title" value="<?= $title;?>">
<label for="title">Meta-Description</label>
<input type="text" name="meta-desc" value="<?= $data->meta-desc;?>">
<label for="title">Meta-Keywords</label>
<input type="text" name="meta-key" value="<?= $data->meta-key;?>">
</form>
</footer>
</body>
</html>')})());
First fix your JS like this:
void((function(){
var a=document;
a.write(
'<!DOCTYPE html>\
<html>\
<head>\
<meta charset="UTF-8\
<title>'+a.title+' - Edit Mode </title>\
</head>\
<body>\
<section>\
<div id="wrapper">\
<iframe src="'+a.URL+'" >\
</iframe>\
</div>\
</section>\
<footer>\
<form action="/sys/manage/seo.php" method="post">\
<input type="hidden" value=rawData >\
<label for="title">Title</label>\
<input type="text" name="title" value="<?= $title;?>">\
<label for="title">Meta-Description</label> \
<input type="text" name="meta-desc" value="<?= $data->meta-desc;?>">\
<label for="title">Meta-Keywords</label> \
<input type="text" name="meta-key" value="<?= $data->meta-key;?>">\
</form>\
</footer>\
</body>\
</html>')})());
Demo here : http://jsfiddle.net/shahverdy/Z5EBk/
Related
Here are codes that I have tried the last. With these codes I got nothing in input field. I want user can see what he has entered but cannot change the same. if he wants to change he has to go back to the previous page and refill the data with correct value.
For page 1 (with php extension)
<?PHP
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type = "text/css" href="index.css"/>
<title>EduLife Welcomes You</title>
<link rel="icon" type="image/png" href="title-icon.png"/>
</head>
<body>
<?php
// Set session variables
$_SESSION['dob'] = $dob;
$_SESSION['class'] = $class;
?>
[...javascript for calculating age...]
<form>
<h3>Check Eligibility : </h3>
Enter Date of Birth of the child: <input type="date" name="dob" id="dob" required/><br>
<input class="btn" type="button" value="Check Eligibility" onclick="ageCalculate()"><br>
You are eligible for the Grade : <span id="class" class="eligible"></span>
</form>
OK, I want to apply!</button>
</body>
</html>
CODE FOR PAGE 2(with php extension)
<?PHP
session_start();
$dob = $_SESSION['dob'];
$class = $_SESSION['class'];
?>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type = "text/css" href="admn-form.css"/>
<title>EduLife</title>
<link rel="icon" type="image/png" href="title-icon.png"/>
</head>
<div id="admn-form">
<form action="insert.php" method="POST">
<h2 id="form-name">Apply For Admission </h2>
<h2 id="part"> Part A - Information of the student</h2>
<h3><span style="color:blue">You applying for the Grade:</span><input for="class" name="class" id="class" value="<?php echo $_SESSION['class'];?>" readonly> </input></h3>
<h3>1. Name of the student</h3>
<p class="quest">
<label for="first-name"> First Name * : </label>
<input type="text" Name="firstname" placeholder="First Name" pattern="[A-Z]{2,15}" required>
<label for="middle-name"> Middle Name : </label>
<input type="text" Name="middlename" placeholder="Middle Name" pattern="[^\s][A-Z]+{2,15}">
<label for="last-name"> Last Name : </label>
<input type="text" Name="lastname" placeholder="Last Name" pattern="[^\s][A-Z]+{2,15}">
</p>
<h3>2. Select Gender of the student *</h3>
<p class="quest">
<input type="radio" id="female" name="gender" value="Female" required>
<label for="female">Female</label>
<input type="radio" id="male" name="gender" value="Male" required>
<label for="male">Male</label>
<input type="radio" id="other" name="gender" value="Other" required>
<label for="other">Other</label>
</p>
<h3>4. Enter Birth-detail of the student</h3>
<p class="quest">
<label for="DOB"> Date of Birth *: </label>
<input type="date" name="dob" value="<?php echo $_SESSION['dob'];?>" readonly>
</p>
</form>
</div>
</HTML>
I have a simple form that I've made to help me learn php. I'm using my local host server to host the php file (form.php). However, when I refresh the page it resubmits the form, I know I can use the post/redirect/get method to negate this problem. Except implementing the header('Location: form.php'); hasn't been working, if you could take a look at the code- and tell me what I'm doing wrong, that would be much appreciated.
Code example i.e without header('Location: form.php');
<?php
if (empty($_POST) === false) {
echo '<pre>', print_r($_POST, true), '</pre>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<form action="form.php" method="post">
<p>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name"><br>
</p>
<p>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
</p>
<p>
<label for="message">Message:</label><br>
<textarea name="message" id="message"></textarea>
</p>
<p>
<input type="submit" value="submit">
</p>
</form>
This is the result...
Screen Shot without header location
then I add:
header('Location: form.php');
And I get this...
To prevent a form from resubmitting on page refresh, two methods are used:
Method 1: Use AJAX + Redirect
Submit your form using AJAX and then redirect to another page using JQuery.
Method 2: Reload the page
Refresh the page using Javascript.
Your code should be like this:
<?php
if (!empty($_POST)) {
echo '<pre>', print_r($_POST, true), '</pre>';
echo '<script type="text/javascript"> location.reload();</script>';
}
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Form</title>
</head>
<body>
<form action="form.php" method="post">
<p>
<label for="name">Name:</label><br>
<input type="text" name="name" id="name"><br>
</p>
<p>
<label for="email">Email:</label><br>
<input type="text" name="email" id="email"><br>
</p>
<p>
<label for="message">Message:</label><br>
<textarea name="message" id="message"></textarea>
</p>
<p>
<input type="submit" value="submit">
</p>
</form>
</body>
</html>
I have following form and I want to send the data to controller. The problem is that data from dynamically created inputs is not being passed to the controller. This is the output of dd($request->all());
`array:4 [▼
"_token" => "gzpNTHPfZl8GCtNbCPGJrc4S4zTUmhhMUve4gyet"
"course" => "ICTP"
"section" => "BB3"
"lecture" => "functions and pointers"
]
`
welcome.blade.php
`
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<META http-equiv="Content-Type" content="text/html; charset=utf-8"></head>
<body>
<div>
#if(count($errors)>0)
<div class="alert alert-danger">
#foreach($errors->all() as $error)
<p>{{$error}}</p>
#endforeach
</div>
#endif
</div>
<div>
<form action="{{route('course.save')}}" method="post">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
<label>Select a category</label>
<select>
<option>Category 1</option>
<option>Category 2</option>
<option>Category 3</option>
<option>Category 4</option>
</select>
<br><br>
<label>Select a subcategory</label>
<select>
<option>SubCategory 1</option>
<option>SubCategory 2</option>
<option>SubCategory 3</option>
<option>SubCategory 4</option>
</select>
<br><br>
<label for="course">Course Name:</label>
<input type="text" name="course" id="course"/>
<div id="content">
<div id="section-content-1">
<div id="secs">
<label for="section">Section 1:</label>
<input type="text" name="section" id="section"/>
</div>
<div id="lects">
<label for="lecture">Lecture 1:</label>
<input type="text" name="lecture" id="lecture"/>
</div>
<button type="button" id="add-lect" data-lect="1">Add New Lecture</button><br><br>
</div>
</div>
<button type="button" id="add-sect" data-sect="1" >Add New Section</button>
<br><br><br><br>
<button class="btn-primary" type="submit">Save</button>
</form>
</div>
</body>
</html>
<script src="{{asset('/js/code.js')}}"></script>`
Here is the jquery file code.js
//$('#add-lect').click(function
$('#content').on('click', '#add-lect', function() {
var count = parseInt($(this).parent().children('#lects').children().length / 2) + 1;
lectures = '<label>Lecture ' + count + ':</label><input type="text" name="lecture" id="lecture"/>'
$(this).parent().find('#lects').append(lectures);
});
$('#add-sect').click(function(){
sect_id = parseInt($('#add-sect').attr('data-sect')) + 1;
$('#add-sect').attr('data-sect', sect_id)
var count = ($("#secs").children().length / 2) + 1;
//section = '<div id="section-content-'+sect_id+'"> <div id="secs"> <label for="section">Section'+sect_id+':</label><input type="text" name="section" id="section-"/></div><div id="lects"><label for="lecture">Lecture 1:</label><input type="text" name="lecture" id="lecture"/></div><button type="button" id="add-lect" data-lect="1">Add New Lecture</button<br><br></div>'
section = '<div id="section-content-'+sect_id+'"><div id="secs"><label for="section">Section '+sect_id+':</label> <input type="text" name="section" id="section"/></div><div id="lects"><label for="lecture">Lecture 1:</label><input type="text" name="lecture" id="lecture"/></div><button type="button" id="add-lect" data-lect="1">Add New Lecture</button><br><br></div>'
$('#content').append(section);
});
When you have a lot of input fields with same name, like
<input type="text" name="section" id="section"/>
<input type="text" name="section" id="section"/>
<input type="text" name="section" id="section"/>
<input type="text" name="section" id="section"/>
only the last input field will be passed to server.
To pass arrays of similar data there's special notation for name attribute:
<input type="text" name="section[]"/>
<input type="text" name="section[]"/>
<input type="text" name="section[]"/>
Using this, on server side you will have $_POST['section'] as array, which you can iterate and get values.
I also removed id="section" attribute as id attribute must be unique on a page.
So you need to change names of your inputs, both in blade template and in javascript code.
Update:
In case of one-to-many relations you can extend your naming to:
<input type="text" name="section[1]"/>
<input type="text" name="lecture[1][]"/>
<input type="text" name="lecture[1][]"/>
<input type="text" name="section[2]"/>
<input type="text" name="lecture[2][]"/>
<input type="text" name="lecture[2][]"/>
<input type="text" name="lecture[2][]"/>
<input type="text" name="section[3]"/>
<input type="text" name="lecture[3][]"/>
<input type="text" name="lecture[3][]"/>
So, as you see - you can explicitly define index for names.
In above-mentioned case you can iterate over $_POST['section'] and get $_POST['lecture'] with same index as section.
I have the below form, and after the form the PHP requests a Curl which can take a while. Because of this they keep pressing the submit button thinking that nothing has happened. This causes multiple entries in the database. Could someone help me and let me know what to put in to stop this.
I tried the Javascript solution in the first answer but it stopped the PHP script that followed. Not what I wanted. Sorry
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css2/style.css" rel='stylesheet' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--webfonts-->
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text.css'/>
<!--//webfonts-->
<center><img class="displayed" src="images/logo.jpg" alt="Logo" style="width:128px;height:128px;"></center>
</head>
<body>
<div class="main">
<form action="" method="POST" enctype="multipart/form-data" id="contactform" >
<input type="hidden" name="action" value="submit">
<h1><span>Sign Up</span> <lable> The Brook on Sneydes</lable> </h1>
<div class="inset">
<p>
<center><label ><?php echo $text; ?></label></center>
<label for="first">First Name</label>
<input type="text" name="first" id="first" value="" placeholder="" required/>
</p>
<p>
<label for="last">Surname</label>
<input type="text" name="last" id="last" value="" placeholder="" required/>
</p>
<p>
<label for="mobile">Mobile Number</label>
<input type="text" name="mobile" id="mobile" value="" placeholder="" required/>
</p>
<p>
<label for="email">Email Address</label>
<input type="text" name="email" id="email" value="" placeholder="" required/>
</p>
</div>
<p class="p-container">
<input type="submit" name="submit" id="submit" value="Submit">
</p>
</form>
</div>
<!-----start-copyright---->
<div class="copy-right">
<p> © 2016 Spearhead Digital. All rights reserved.</p>
</div>
<!-----//end-copyright---->
</body>
</html>
<?php
if(isset($_POST['submit']) && !empty($_POST) ){
$first = $_POST['first'];
$last = $_POST['last'];
$mobile = $_POST['mobile'];
$email = $_POST['email'];
// Other Code
}
You can disable the submit button when submitting the form.
An example using jQuery:
<script type="text/javascript">
$(document).ready(function() {
$('#contactform').submit(function() {
$('input[type=submit]', this).prop("disabled", true);
});
});
</script>
I'm writing a little website for myself and I'm having trouble with what seems like a simple line of code:
form action="send.php" method="post"
Furthermore, even a simple line like form action="http://www.google.com"> isn't working. Here is my code:
<html>
<head>
<title>
AnonMail!
</title>
</head>
<body style="font-family:'Tahoma';>
<form action="send.php" method="post">
<label for="from">From: </label><input type="text" name="from" id="from"></input></br>
<label for="to">To: </label><input type="text" name="to" id="to"></input></br>
<label for="subj">Subject: </label><input type="text" name="subj" id="subj"></input></br>
<textarea rows=10 cols=100 name="message"></textarea></br>
<input type="submit" value="Send"/>
</form>
</body>
</html>
The error starts with your body tag.
You have not closed your double quotes in the style tag of your body.
Just close it properly and then run it.
I think that is only the problem.
Here's a form that should work:
<html>
<body>
<form action="contact.php" method="post">
<p><b>Your Name:</b> <input type="text" name="yourname" /><br />
<b>Subject:</b> <input type="text" name="subject" /><br />
<b>E-mail:</b> <input type="text" name="email" /><br />
Website: <input type="text" name="website"></p>
<p><input type="submit" value="Send it!"></p>
</form>
</body>
</html>
If you're still having troubles: http://myphpform.com/php-form-not-working.php
browsers show warnings when your action refers to an external source. Some browsers do not post form at all. This is unsafe for users.