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.
Related
I'm trying to add user input to a JSON file of multidimensional array using $_POST and I've got it to write it into the JSON file, however it just displays:
{"title":null,"organiser":null,"date":null,"time":null,"type":null,"location":null,"contact":null} I have no idea where the issue is located, pls help :(
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Submit</title>
</head>
<link rel ="stylesheet" type="text/css" href="submit.css">
<script type="text/javascript"></script>
<script src ="events.json"></script>
<body class="container">
<form method="POST" action="events.json" enctype="application/json">
<h1>Submit an Event</h1>
Event Title:
<br>
<input type="text" name="title" placeholder="Enter Event Title" required>
<br>
Event Organiser(s):
<br>
<input type="text" size= "30" class="form-control" name="organiser" placeholder="Enter Name of Event Organiser(s)" required>
<br>
Event Date:
<br>
<input type="date" size= "30" class="form-control" name="date" placeholder="Enter Event Date" required>
<br>
Event Time:
<br>
<input type="time" class="form-control" name="time" placeholder="Enter Event Time" required>
<br>
Event Type:
<br>
<select class="form-control" name="type" required>
<option>Sports Event</option>
<option>Guest Lecture </option>
<option>Conference</option>
<option>SU Event</option>
<option>Other</option>
<br>
<ul class="">
<input type="text" class="form-control" name="other" placeholder="If other please specify">
</select>
<br>
Event Location:
<br>
<select class="form-control" name="location" required>
<option>Keele SU</option>
<option>K2</option>
<option>Keele Hall</option>
<option>Westminster Theatre</option>
<option>David Weatherall Building</option>
<option>Other</option>
<br>
<ul class="">
<input type="text" class="form-control" name="other" placeholder="If other please specify">
</ul>
</select>
<br>
Contact Details:
<br>
<input type="text" size="30" class="form-control" name="contact" placeholder="Please Enter a Contact Email" required>
<br>
<button type="submit" class="btn-primary">Submit</button>
<button type="reset" class="btn-primary">Reset</button>
</form>
<script>
<?php
$items = array(
"title" => $_POST['title'], "organiser" => $_POST['organiser'],
"date" => $_POST['date'], "time" => $_POST['time'], "type" => $_POST["type"],
"location" => $_POST['location'], "contact" => $_POST['contact']);
$text = json_encode($items);
$file = "events.json";
$current = file_get_contents($file); //stores events.json as a string
$decode = json_decode($current, true); //decodes events.json, associative array
array_push($decode, $items);
$data = json_encode($decode);
file_put_contents("events.json", $data);
?>
</script>
</body>
</html>
Hi it looks like your form action is incorrect it should be this php filename, also you should check for $_POST to be set before trying to update your json file, what you are doing here is when you load the page it will update your json
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 want to add stock, then it will sum with the database stock
the field for the total sum(jumlahtotal) didn't work
anyway, i already put js at the header template
<div class="content-wrapper">
<div class="panel-body">
<form action="" method="POST">
<?php echo validation_errors(); ?>
<input type="hidden" name="id" value="<?= $buku['id'];?>">
<input type="hidden" name="judul" value="<?= $buku['judul'];?>">
<input type="hidden" name="pengarang" value="<?= $buku['pengarang'];?>">
<input type="hidden" name="penerbit" value="<?= $buku['penerbit'];?>">
<input type="hidden" name="tahun_terbit" value="<?= $buku['tahun_terbit'];?>">
<input type="hidden" name="isbn" value="<?= $buku['isbn'];?>">
<input type="hidden" name="rak" value="<?= $buku['rak'];?>">
<input type="hidden" name="tgl_input" value="<?= $buku['tgl_input'];?>">
<div class="form-group">
<label for="jumlah">Jumlah Masuk</label>
<input type="number" class="form-control" id="masuk" name="jumlah" value="0">
<?= form_error('masuk','<small class="text-danger">','</small>') ?>
</div>
<div class="form-group">
<label>Jumlah Total</label>
<input type="number" class="form-control" id="jumlah" name="jumlah" value="<?= $buku['jumlah_buku']?>" readonly>
<?= form_error('jumlah','<small class="text-danger">','</small>') ?>
</div>
<div class="form-group">
<input type="number" id="jumlahtotal">
</div>
<button type="submit" name="ubah" class="btn btn-primary">Update Data</button>
</form>
</div>
</div>
<script>
$(document).ready(function() {
$('input').change(function () {
var total = 0;
$('input[name=jumlah]').each(function(){
total = total+parseInt($(this).val());
})
$('input[id=jumlahtotal]').html(total);
})
})
</script>
i already checked the js is running
You are trying to set the innerHTML of an input tag in your code
$('input[id=jumlahtotal]').html(total);
In HTML, input tag is an unpaired tag. It means you don't put anything inside <input> and </input>. It's just <input>. What you are trying is to put <input> someValue </input> but via jquery.
I think you want to do this instead
$('input[id=jumlahtotal]').val(total);
This just sets the value attribute of the input element. And it's the correct way to set the value to an input element.
The user is making a coin submission and when they go to do that I want the date to load into a input field that I'm using to track the time the submission was made. That date will be recorded in a mySQL database. The cut off date is set as the coming bimonthly Friday (eg cut off dates are Jun 14 and Jun 28. if the submission is done today, then cut off date is Jun 28. if the submission is done on Jun 30, the cut off date would be Jul 12. I included the entire form so you could get a bigger picture. Feel free to make adjustments. Thanks any help is greatly appreciated.
I'm able to call a javascript function and have the user select the date from a calendar, but that's not what I need. Javascript - get a date from an HTML input but I'm not sure how to concatenate the +14 days for the next cut off date.
CoinSubmission.html
<form action="AdminCoinSub_Code.php" method="POST">
<h1 id="litheader">Coin Submission</h1>
<div class="inset">
<input type="text" list="Store" name="Store" placeholder="Store">
<datalist id="store">
<option value="Causeway Bay">
<option value="Wan Chai">
<option value="Lai Chi Kok">
<option value="Tai Po">
</datalist>
<input type="text" list="Position" name="Position" placeholder="Position">
<datalist id="position">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
</datalist>
<p>
<input type="text" name="Nickame" id="Nickname" placeholder="Nickname">
</p>
<p>
<input type="text" name="Contact" id="Contact" placeholder="Contact">
</p>
<p>
<input type="text" name="MachineCount" id="Machine Count" placeholder="Machine Count">
</p>
<p>
<input type="text" name="CutOffDate" id="CutOffDate" placeholder="Cut Off Date">
</p>
<p>
<input type="text" name="Coins" id="Coins" placeholder="Coins">
</p>
<p>
<input type="file" type="text" name="location" accept="image/*">
<div class="btnConfirm">
<input class="loginLoginValue" type="hidden" name="" value="" />
</div>
</div>
<div class="btnConfirm">
<input type="submit" onclick="location.href='CoinSubmission.php';" name="Submit" value="Confirm">
</div><br><br>
<div class="wrapper2">
<nav>
<ul>
<li>SUBMISSION</li>
<li>OCCUPANCY</li>
<li>ANALYTICS</li>
<li>SEARCH</li>
</ul>
</nav>
</div>
</form>
AdminCoinSub_Code.php
<?php {
$servername = "localhost";
$username = "root";
$password = "password";
$dbname = "administrator_logins";
try {
$conn = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
// set the PDO error mode to exception
$conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
// prepare sql and bind parameters
$stmt = $conn->prepare("INSERT INTO admincoinsubmission (Store, Position, Nickname, Contact, MachineCount, CutOffDate, Coins, location)
VALUES ('$_POST[Store]','$_POST[Position]','$_POST[Nickame]','$_POST[Contact]','$_POST[MachineCount]','$_POST[CutOffDate]','$_POST[Coins]','$_POST[location]')");
$stmt->bindParam(':Store', $Store);
$stmt->bindParam(':Position', $Position);
$stmt->bindParam(':Nickname', $Nickname);
$stmt->bindParam(':Contact', $Contact);
$stmt->bindParam(':MachineCount', $MachineCount);
$stmt->bindParam(':CutOffDate', $CutOffDate);
$stmt->bindParam(':Coins', $Coins);
$stmt->bindParam(':location', $location);
$stmt->execute();
echo "Success";
}
catch(PDOException $e)
{
echo "Error: " . $e->getMessage();
}
$conn = null;
}
?>
When the page loads the date row in the coin submission form should display the cutoffdate.
date = (current date + cutoffdate)
You can achieve the following task using similar code -
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Date +14 days</title>
</head>
<body>
<input type="date" name="date1" id="date1" value="" />
<input type="text" name="date2" id="date2" value="" />
<script type="text/javascript">
var date1 = document.getElementById("date1");
date1.addEventListener('change', function(){
tempDate = new Date(date1.value);
finalDate = tempDate.setDate(tempDate.getDate() + 14);
console.log(new Date(finalDate));
});
</script>
</body>
</html>
To achieve expected result, use below option of add time with getTime() method and add 14 days
var currentDate = new Date(new Date().getTime()+(14*24*3600000))
document.getElementById('CutOffDate').value = (currentDate.getDate()) +'/' + (currentDate.getMonth()+1) +'/'+ currentDate.getFullYear()
Working code sample for reference
var currentDate = new Date(new Date().getTime()+(14*24*3600000))
document.getElementById('CutOffDate').value = (currentDate.getDate()) +'/' + (currentDate.getMonth()+1) +'/'+ currentDate.getFullYear()
<form action="AdminCoinSub_Code.php" method="POST">
<h1 id="litheader">Coin Submission</h1>
<div class="inset">
<input type="text" list="Store" name="Store" placeholder="Store">
<datalist id="store">
<option value="Causeway Bay">
<option value="Wan Chai">
<option value="Lai Chi Kok">
<option value="Tai Po">
</datalist>
<input type="text" list="Position" name="Position" placeholder="Position">
<datalist id="position">
<option value="1">
<option value="2">
<option value="3">
<option value="4">
</datalist>
<p>
<input type="text" name="Nickame" id="Nickname" placeholder="Nickname">
</p>
<p>
<input type="text" name="Contact" id="Contact" placeholder="Contact">
</p>
<p>
<input type="text" name="MachineCount" id="Machine Count" placeholder="Machine Count">
</p>
<p>
<input type="text" name="CutOffDate" id="CutOffDate" placeholder="Cut Off Date">
</p>
<p>
<input type="text" name="Coins" id="Coins" placeholder="Coins">
</p>
<p>
<input type="file" type="text" name="location" accept="image/*">
<div class="btnConfirm">
<input class="loginLoginValue" type="hidden" name="" value="" />
</div>
</div>
<div class="btnConfirm">
<input type="submit" onclick="location.href='CoinSubmission.php';" name="Submit" value="Confirm">
</div><br><br>
<div class="wrapper2">
<nav>
<ul>
<li>SUBMISSION</li>
<li>OCCUPANCY</li>
<li>ANALYTICS</li>
<li>SEARCH</li>
</ul>
</nav>
</div>
</form>
codepen - https://codepen.io/nagasai/pen/VJWmNE?editors=1010
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/