How to use loop with array in laravel - php

I have a student registration form, when you enroll your'e child you fill up the form then inside the form has information about the father like name, occupation,email and etc.. then inside the form also you can put your'e child's name, age gender etc .. now if you have multiple child you can click the + button to add another row for the second child then once you submit the form the two child you key-in will have the same father's information.
Question: how do i construct it into my Controller? and how do i loop the parent's information. Currently with my code i can only save array of child information i can't loop the father's information in each child.
Controller:
public function store(Request $request)
{
//dd($request->all());
$this->validate($request, [
'student_name.*'=>'required|max:50',
'age.*'=>'required|integer',
//Roles Goes Here
]);
$input = $request->all();
if (count($input['student_name']) > 0) {
for ($i = 0 ; $i < count($input['student_name']) ; $i++) {
$leads = new Lead();
$leads->student_name = $input['student_name'][$i];
$leads->gender = $input['gender'][$i];
$leads->age = $input['age'][$i];
$leads->father_name=$request->father_name;
$leads->father_contact1=$request->father_contact1;
$leads->father_email=$request->father_email;
$leads->father_occupation=$request>father_occupation;
$leads->father_religion=$request->father_religion;
$leads->save();
}
VIEW:
<form action="{{route('leads.store')}}" method="POST">
{{csrf_field()}}
<div class="col-sm-12">
<h3 class="well">Parent's Information</h3>
<div class="row">
<div class="col-sm-4 form-group">
<label>FATHER'S NAME</label>
<input class="form-control" id="txtuppercase1" type="text" name="father_name" value="{{old('father_name')}}" placeholder="Enter FATHER NAME.." >
</div>
<div class="col-sm-4 form-group">
<label>CONTACT</label>
<input type="text" id="txtuppercase2" name="father_contact1" value="{{old('father_contact1')}}" placeholder="Enter CONTACT.." class="form-control" >
</div>
<div class="col-sm-4 form-group">
<label>EMAIL ADDRESS</label>
<input type="text" name="father_email" value="{{old('father_email')}}" placeholder="Enter EMAIL ADDRESS.." class="form-control" >
</div>
<div class="col-sm-4 form-group">
<label>OCCUPATION</label>
<input type="text" name="father_occupation" value="{{old('father_occupation')}}" placeholder="Enter OCCUPATION.." class="form-control" >
</div>
<div class="col-sm-4 form-group">
<label>RELIGION</label>
<input type="text" name="father_religion" value="{{old('father_religion')}}" placeholder="Enter RELIGION.." class="form-control" >
</div>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div data-role="dynamic-fields">
<div class="form-inline">
<div class="form-group">
<label class="sr-only" for="student_name">NAME</label>
<input type="text" class="form-control" id="student_name" name="student_name[]" placeholder="STUDENT NAME">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="age">AGE</label>
<input type="text" class="form-control" id="age" name="age[]" placeholder="AGE">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="gender">GENDER</label>
<input type="text" class="form-control" id="gender" name="gender[]" placeholder="GENDER">
</div>
<span>-</span>
<div class="form-group">
<label class="sr-only" for="school">SCHOOL</label>
<input type="text" class="form-control" id="last_school_attended" name="last_school_attended[]" placeholder="SCHOOL">
</div>
<button class="btn btn-danger" data-role="remove">
<span class="glyphicon glyphicon-remove"></span>
</button>
<button class="btn btn-primary" data-role="add">
<span class="glyphicon glyphicon-plus"></span>
</button>
</div> <!-- /div.form-inline -->
</div> <!-- /div[data-role="dynamic-fields"] -->
</div> <!-- /div.col-md-12 -->
</div> <!-- /div.row -->
<br>
<div>
<button type="submit" class="btn btn-success">SUBMIT</button>
CANCEL
</div>
</form>

You don't need to loop the parent's information. You can directly access the parent's information through $input['father_name'];

Related

Cannot insert when clicking a button in Mysql using PHP

I am a beginner in web development, I used have an html elements, like textbox and other type of elements, I want to use them as my object and when they have a value and click a button, it will save the value of all the elements in mysql.
I have a code like this, but it cannot be inserted and anything does not happen when clicking a button.
Please help.
PHP:
<?php
define('DB_SERVER', 'localhost');
define('DB_USERNAME', 'root');
define('DB_PASSWORD', '');
define('DB_DATABASE', 'ytp');
$db = mysqli_connect(DB_SERVER,DB_USERNAME,DB_PASSWORD,DB_DATABASE);
if(!$db ) {
die('Could not connect: ' . mysqli_error());
}
$fname = "";
$mname = "";
$lname = "";
$funame = "";
$cnum = "";
$bday = "";
$age = "";
$add = "";
if (isset($_POST['submit'])){
$fname = $_POST['fName'];
$mname = $_POST['mName'];
$lname = $_POST['lName'];
$funame = $_POST['fuName'];
$cnum = $_POST['Cnumber'];
$bday = $_POST['bday'];
$age = $_POST['age'];
$add = $_POST["address"];
}
$sql = "INSERT INTO employee ".
"(fName,mName,lName,fuName,cNumber,bDay,Age,Address) ".
"VALUES ('$fname','$mname','$lname','$funame','$cnum','$bday','$age','$add' )";
if (! mysqli_query($db , $sql)){
echo 'Cannot Insert';
}
else{
echo 'Success';
}
?>
HTML:
<div class="content">
<div class="row">
<div class="col-md-10">
<div class="card">
<div class="card-header">
<h5 class="title">Add User Information</h5>
</div>
<div class="card-body">
<form method="POST" action="php_functions\saveEmployee.php" name="INSERT">
<div class="row">
<div class="col-md-5 pr-md-1">
<div class="form-group">
<label>Company (disabled)</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Benchmark Valuer's Inc.">
</div>
</div>
<div class="col-md-3 px-md-1">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" placeholder="User ID" value="" id="id" name ="id" disabled>
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="s.sample#gmail.com" id="email" name ="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-md-1">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" placeholder="First Name" id="fName" name ="fName">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Middle Name</label>
<input type="text" class="form-control" placeholder="Middle Name" id="mName" name ="mName">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" id="lName" name ="lName">
</div>
</div>
<div class="col-md-4 pl-md-1" hidden>
<div class="form-group">
<label>Fullname</label>
<input type="text" class="form-control" placeholder="Full Name" id="fuName" name ="fuName">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-md-1">
<div class="form-group">
<label>Contact Number</label>
<input type="tel" class="form-control" placeholder="Contact Number" id="Cnumber" name="Cnumber">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Age</label>
<input type="number" class="form-control" placeholder="Age" id="age" name="age">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Birthday</label>
<input type="date" class="form-control" placeholder="Birthday" id="bday" name="bday">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Home Address" id="address" name ="address">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-md-1">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" placeholder="Username" id="uName">
</div>
</div>
<div class="col-md-4 px-md-1">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" id="pWord">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>UserType</label>
<input type="number" class="form-control" placeholder="0" id="uType">
</div>
</div>
</div>
<div class="row" hidden>
<div class="col-md-12">
<div class="form-group">
<label>Image Path:</label>
<input type="text" class="form-control" placeholder="C:\\" id="imageURL">
</div>
</div>
</div>
</form>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-fill btn-primary" id="submit" name="submit">Save</button>
<button class="btn btn-fill btn-success" id="btnBrowse">Browse</button>
<button class="btn btn-fill btn-danger" id="btnCancel">Cancel</button>
</div>
</div>
</div>
</div>
</div>
Your HTML form is closing before submit button. You should close that after submit button and also need to manage hierarchy of opening form tag as below:
<form method="POST" action="php_functions\saveEmployee.php" name="INSERT">
<div class="card-body">
<div class="row">
<div class="col-md-5 pr-md-1">
<div class="form-group">
<label>Company (disabled)</label>
<input type="text" class="form-control" disabled="" placeholder="Company" value="Benchmark Valuer's Inc.">
</div>
</div>
<div class="col-md-3 px-md-1">
<div class="form-group">
<label>ID</label>
<input type="text" class="form-control" placeholder="User ID" value="" id="id" name ="id" disabled>
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="s.sample#gmail.com" id="email" name ="email">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-md-1">
<div class="form-group">
<label>First Name</label>
<input type="text" class="form-control" placeholder="First Name" id="fName" name ="fName">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Middle Name</label>
<input type="text" class="form-control" placeholder="Middle Name" id="mName" name ="mName">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Last Name</label>
<input type="text" class="form-control" placeholder="Last Name" id="lName" name ="lName">
</div>
</div>
<div class="col-md-4 pl-md-1" hidden>
<div class="form-group">
<label>Fullname</label>
<input type="text" class="form-control" placeholder="Full Name" id="fuName" name ="fuName">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-md-1">
<div class="form-group">
<label>Contact Number</label>
<input type="tel" class="form-control" placeholder="Contact Number" id="Cnumber" name="Cnumber">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Age</label>
<input type="number" class="form-control" placeholder="Age" id="age" name="age">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>Birthday</label>
<input type="date" class="form-control" placeholder="Birthday" id="bday" name="bday">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<input type="text" class="form-control" placeholder="Home Address" id="address" name ="address">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4 pr-md-1">
<div class="form-group">
<label>Username</label>
<input type="text" class="form-control" placeholder="Username" id="uName">
</div>
</div>
<div class="col-md-4 px-md-1">
<div class="form-group">
<label>Password</label>
<input type="password" class="form-control" placeholder="Password" id="pWord">
</div>
</div>
<div class="col-md-4 pl-md-1">
<div class="form-group">
<label>UserType</label>
<input type="number" class="form-control" placeholder="0" id="uType">
</div>
</div>
</div>
<div class="row" hidden>
<div class="col-md-12">
<div class="form-group">
<label>Image Path:</label>
<input type="text" class="form-control" placeholder="C:\\" id="imageURL">
</div>
</div>
</div>
</div>
<div class="card-footer">
<button type="submit" class="btn btn-fill btn-primary" id="submit" name="submit">Save</button>
<button class="btn btn-fill btn-success" id="btnBrowse">Browse</button>
<button class="btn btn-fill btn-danger" id="btnCancel">Cancel</button>
</div>
</form>
Hope it helps you.
the form has been closed before the submit button.
the </form> tag should be placed after the <div class="card-footer">...</div>.
please try it. hope it will help.

How to correctly fetch String values from the database in Laravel

For my website, when this particular page is clicked I want the form to be populated with data from the database. Here is the code for the form:
<form class="form-horizontal" role="form" method="post" action="{{url('/company-profile/update')}}">
{{ csrf_field() }}
#foreach($getAllDetails as $list)
<div class="form-group">
<div class="col-sm-10">
<label for="companyname" class="control-label">Company Name</label>
<input type="text" class="form-control" id="companyname" name="companyname" placeholder="Enter Company Name" value={{$list->companyName}}>
</div>
</div>
<div class="form-group">
<div class="col-xs-5 col-sm-4 col-md-3">
<label for="shortCode" class="control-label">Short Code</label>
<input class="form-control" id="shortCode" name="shortCode" placeholder="Short Code" value={{$list->shortCode}}>
</div>
<div class="col-xs-7 col-sm-6 col-md-7">
<label for="telnum" class="control-label">Telephone Number</label>
<input type="tel" class="form-control" id="telnum" name="telnum" placeholder="Tel. number" value={{$list->phoneNo}}>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label for="emailid" class="control-label">Email</label>
<input type="email" class="form-control" id="emailid" name="emailid" placeholder="Email" value={{$list->emailAddress}}>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label for="logoPath" class="control-label">Logo Path</label>
<input type="" class="form-control" id="logoPath" name="logoPath" placeholder="Enter Logo Path" value={{$list->logoPath}}>
</div>
</div>
<div class="form-group">
<div class="col-sm-10">
<label for="feedback" class="control-label">Contact Address</label>
<textarea class="form-control" id="address" name="address" rows="2" value={{$list->contactAddress}}></textarea>
</div>
</div>
#endforeach
<div class="form-group">
<div class="col-sm-10">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
This issue is:
For example, if I want to fetch the company name {{$list->companyName}} only the first word gets displayed. For example, If the company's name is National Film Institute, only National gets displayed.
Here is code the for my index function in the controller:
public function index()
{
$data['getAllDetails']= DB::table('tblcompany')->get();
return view('companyProfile.companyProfile', $data);
}
Change
value={{$list->your_field}}
to
value="{{$list->your_field}}"

How to get values of a two contact forms which is in two separate tabs in php?

I have a contact form in php which has has two tabs containing two different contact forms. I want to get all the values of both the forms and send it as an email. I have coded it for one of the tab, but i am not getting the values of each of the field in the contact form in that tab. Can anyone tell how to do this ? My code is shown below for one of the tab:
<form name="contactForm" id='contact_form' method="post" action=''>
<div tab-id="1" class="tab active">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="name" >
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputName" placeholder="Country" >
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage" placeholder="message" ></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-xs-8 padd">
<div class="g-recaptcha" data-sitekey="6LcJqyITAAAAABks5hnD6U_2ptu09RiXYOHvNNud"></div>
</div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="send" class="btn btn-lg costom-btn" value="send">
</div>
</div>
<div tab-id="2" class="tab">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="full name" >
</div>
<div class="form-group col-sm-6 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="Email">
</div>
<div class="form-group col-sm-6 pad">
<input type="text" class="form-control" name="telephone" placeholder="Phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about your project in your own words ?" >
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about you or your company" >
</div>
<div class="form-group col-sm-12 padd">
<p>Which services are you interested in ?</p>
<p>
<input type="checkbox" id="test1" />
<label for="test1"></label>
</p>
<p>
<input type="checkbox" id="test2"/>
<label for="test2"></label>
</p>
<p>
<input type="checkbox" id="test3"/>
<label for="test3"></label>
</p>
<p>
<input type="checkbox" id="test4"/>
<label for="test4"></label>
</p>
<p>
<input type="checkbox" id="test5"/>
<label for="test5"></label>
</p>
<p>
<input type="checkbox" id="test6"/>
<label for="test6"></label>
</p>
</div>
</div>
<div class="form-group col-xs-12">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-sm-12" id='submit'>
<input type="submit" id='send_message' class="btn btn-lg costom-btn" value="send">
</div>
</div>
</form>
Please try with this code.
<form name="contactForm" id='contact_form' method="post" action='php/email.php'>
//This is the first tab
<div tab-id="1" class="tab active">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="name" >
</div>
<div class="form-group col-sm-12 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="email address">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="telephone" placeholder="phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="Country" id="exampleInputName" placeholder="Country" >
</div>
<div class="form-group col-sm-12 padd">
<textarea class="form-control" name="message" rows="3" id="exampleInputMessage" placeholder="message" ></textarea>
</div>
</div>
<div class="form-group col-xs-12 padd">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-xs-8 padd">
<div class="g-recaptcha" data-sitekey="6LcJqyITAAAAABks5hnD6U_2ptu09RiXYOHvNNud"></div>
</div>
<div class="form-group col-sm-4 padd" id='submit'>
<input type="submit" id='send_message' name="send" class="btn btn-lg costom-btn" value="send">
</div>
</div>
//This is the Second tab
<div tab-id="2" class="tab">
<div class="form-inline">
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="name" id="exampleInputName" placeholder="full name" >
</div>
<div class="form-group col-sm-6 padd">
<input type="email" class="form-control" name="email" id="exampleInputEmail" placeholder="Email">
</div>
<div class="form-group col-sm-6 pad">
<input type="text" class="form-control" name="telephone" placeholder="Phone">
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about your project in your own words ?" >
</div>
<div class="form-group col-sm-12 padd">
<input type="text" class="form-control" name="subject" id="exampleInputSubject" placeholder="Tell us about you or your company" >
</div>
<div class="form-group col-sm-12 padd">
<p>Which services are you interested in ?</p>
<form action="#">
<p>
<input type="checkbox" id="test1" />
<label for="test1">Web Design & development</label>
</p>
<p>
<input type="checkbox" id="test2"/>
<label for="test2">E-Commerce Solutions</label>
</p>
<p>
<input type="checkbox" id="test3"/>
<label for="test3">Digital Marketing</label>
</p>
<p>
<input type="checkbox" id="test4"/>
<label for="test4">SEO Solutions</label>
</p>
<p>
<input type="checkbox" id="test5"/>
<label for="test5">2D&3D Animation</label>
</p>
<p>
<input type="checkbox" id="test6"/>
<label for="test6">Game development</label>
</p>
</div>
</div>
<div class="form-group col-xs-12">
<div id='mail_success' class='success' style="display:none;">Your message has been sent successfully.
</div><!-- success message -->
<div id='mail_fail' class='error' style="display:none;"> Sorry, error occured this time sending your message.
</div><!-- error message -->
</div>
<div class="form-group col-sm-12" id='submit'>
<input type="submit" id='send_message' class="btn btn-lg costom-btn" value="send">
</div>
</form>
</div>
Assuming the following form-tab html structure:
<form name="contactForm" id='contact_form' method="post" action=''>
<div tab-id="1" class="tab active">
...
<input name="field1" value="" class="form-control" />
<input name="field2" value="" class="form-control" />
</div>
<div tab-id="2" class="tab">
...
<input name="field1" value="" class="form-control" />
<input name="field2" value="" class="form-control" />
</div>
</form>
As your div tabs have not attribute called id, and the class attribute you assigned is the same for every tab, it is not clear to see how to define the jquery selector for the inputs within those tabs you created.
You can access the values of each tab, using jquery as follows:
var fields = {}
fields.tab1 = {}
fields.tab1.field1 = $('div[tab-id=1] input[name=field1]').val()
fields.tab1.field2 = $('div[tab-id=1] input[name=field2]').val()
fields.tab2 = {}
fields.tab2.field1 = $('div[tab-id=2] input[name=field1]').val()
fields.tab2.field2 = $('div[tab-id=2] input[name=field2]').val()
Here is the fiddle of the working example.
var datastring = $("#contact_form").serialize();
alert(datastring);
try this in jquery after , you wiil get all the elements values between the
...
here data strings gives output as below
name=tj&email=tj#gmail.com&telephone=8888888888&Country=ind&message=msdfdf&name=tj&email=tj#gmail.com&telephone=12345689&subject=sub&subject=sub

Multiple forms on page with a Bootstrap 3 Modal

I'm having an issue getting my second of two forms on a single html to process data. I'm using Bootstrap 3 framework and have a form in a modal that processes correctly i.e. a user clicks the submit button and the form is processed correctly.
There is another form on the page which does not process correctly. When a user clicks the submit button, the form is supposed to be processed and bring the user to a new page (goodsub.html) but when the submit button is clicked, nothing happens. Is there something wrong with my HTML?
I am very new to PHP so I used some pre-made PHP documents that seem to work fine for the first form on the page. Note that when I comment out the form within the modal, my "second" form processes correctly and sends the user to goodsub.html.
Page in question can be viewed at http://josephsamora.com/contact.html
Here is my code for the working:
<!--modal-->
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">I look forward to hearing from you.</h3>
</div>
<div class="modal-body">
<form id="personalform" name="personalform" action="mail_form.php" method="post" class="form-horizontal col-sm-12">
<div class="form-group"><input class="form-control required" placeholder="Your name*" data-placement="top" data-trigger="manual" data-content="Must be at least 3 characters long, and must only contain letters." type="text" name="Name"></div>
<div class="form-group"><textarea name="Message" class="form-control" placeholder="Your message here..*" data-placement="top" data-trigger="manual"></textarea></div>
<div class="form-group"><input name="email" class="form-control email" placeholder="email#you.com (so that I can contact you)*" data-placement="top" data-trigger="manual" data-content="Must be a valid e-mail address (user#gmail.com)" type="text"></div>
<div class="form-group"><input type="hidden" name="recipients"
value="walshv10#gmail.com" />
<input type="hidden" name="good_url" value="goodsub.html" />
<input type="hidden" name="bad_url" value="badsub.html" /></div>
<div class="form-group"><input Name="Phone Number" class="form-control phone" placeholder="Phone Number: 999-999-9999" data-placement="top" data-trigger="manual" data-content="Must be a valid phone number (999-999-9999)" type="text"></div>
<div class="form-group"><button type="submit" name="Sendit" value="Sendit" class="btn btn-success pull-right">Send It!</button> <p class="help-block pull-left text-danger hide" id="form-error"> The form is not valid. </p></div>
</form>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
</div>
</div>
And the non-working form:
<div class="row">
<div class="col-md-4 col-md-offset-4">
<form id="fullform" name="fullform" action="mail_form.php" method="post" class="form-horizontal" role="form">
<!--Hidden Section-->
<div class="form-group"><input type="hidden" name="recipients"
value="walshv10#gmail.com"/>
<input type="hidden" name="good_url" value="goodsub.html" />
<input type="hidden" name="bad_url" value="badsub.html" /></div>
<!-- Form Section Name -->
<h3>Name & Email</h3>
<hr>
<!-- Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">First Name*</label>
<div class="col-sm-9">
<input type="text" placeholder="First Name" class="form-control" data-placement="top" data-trigger="manual" name="First Name" required="">
</div>
</div>
<!-- Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Last Name*</label>
<div class="col-sm-9">
<input type="text" placeholder="Last Name" class="form-control" data-placement="top" data-trigger="manual" name="Last Name" required="">
</div>
</div>
<!-- Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Email*</label>
<div class="col-sm-9">
<input type="text" placeholder="Email" class="form-control" data-placement="top" data-trigger="manual" name="Email" required="">
</div>
</div>
<!-- Form Section Name -->
<h3>Address Details</h3>
<hr>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">Line 1</label>
<div class="col-sm-10">
<input type="text" placeholder="Address Line 1" class="form-control" data-placement="top" data-trigger="manual" name="Address Line 1">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">Line 2</label>
<div class="col-sm-10">
<input type="text" placeholder="Address Line 2" class="form-control" data-placement="top" data-trigger="manual" name="Address Line 2">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">City</label>
<div class="col-sm-10">
<input type="text" placeholder="City" class="form-control" data-placement="top" data-trigger="manual" name="City">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">State</label>
<div class="col-sm-4">
<input type="text" placeholder="State" class="form-control" data-placement="top" data-trigger="manual" name="State">
</div>
<label class="col-sm-2 control-label">Postcode</label>
<div class="col-sm-4">
<input type="text" placeholder="Post Code" class="form-control" data-placement="top" data-trigger="manual" name="Post code">
</div>
</div>
<!-- Text input-->
<div class="form-group">
<label class="col-sm-2 control-label">Country</label>
<div class="col-sm-10">
<input type="text" placeholder="Country" class="form-control" data-placement="top" data-trigger="manual" name="Country">
</div>
</div>
<!-- Form Section Name -->
<h3>Other Contact Info</h3>
<hr>
<!--Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Phone Number</label>
<div class="col-sm-9">
<input type="text" placeholder="Phone Number" class="form-control" data-placement="top" data-trigger="manual" name="Phone Number">
</div>
</div>
<!--Text Input -->
<div class="form-group">
<label class="col-sm-3 control-label">Organization</label>
<div class="col-sm-9">
<input type="text" placeholder="Organization" class="form-control" data-placement="top" data-trigger="manual" name="Organization">
</div>
</div>
<!-- Form Section Name -->
<h3>Message</h3>
<hr>
<!--Text Input -->
<div class="form-group">
<label class="col-sm-2 control-label">Subject</label>
<div class="col-sm-10">
<input type="text" placeholder="Subject" class="form-control" data-placement="top" data-trigger="manual" name="Subject">
</div>
</div>
<!-- Textarea -->
<div class="form-group">
<label class="col-sm-2 control-label" for="Message">Message*</label>
<div class="col-sm-10">
<textarea class="form-control" id="Message" name="Message" placeholder="Message" required data-placement="top" data-trigger="manual"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<div class="pull-right">
<div class="form-group"><button type="submit" name="submit" value="submit" class="btn btn-success pull-right">Submit</button></div>
</div>
</div>
</div>
</form>
</div>
</div>
I also have the following PHP above the head tag:
<?php
if (!empty($_POST['submit'])) {
//send to submit;
}
if (!empty($_POST['Sendit'])) {
//send to Sendit;
}
?>
Thanks!
remove this section from your non working form
<!--Hidden Section-->
<div class="form-group"><input type="hidden" name="recipients"
value="walshv10#gmail.com"/>
<input type="hidden" name="good_url" value="goodsub.html" />
<input type="hidden" name="bad_url" value="badsub.html" /></div>

Populate ng-model - Value not working AngularJS

I have an AngularJS front end for a new internal web portal I am building. Using value={{data.Param}} I have successfully gotten my get and create requests to work via Slim PHP. Now however I am trying to create a PUT request and I am running into an issue.
This is the current code for my "Update /PUT" page.
request-edit.html
<div class="jumbotron text-center">
<form class="form-horizontal" role="form">
<div class="form-group">
<div class="text-center">
<h1>{{ header }}</h1>
<br/>
<h3>{{ request.Header }}</h3>
<br/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Id:</label>
<div class="col-sm-3">
<input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
</div>
<label class="col-sm-3 control-label">Date:</label>
<div class="col-sm-3">
<input type="text" class="form-control" value="{{ request.Date_Submitted }}" disabled/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Change Initiator:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{request.Change_Initiator}}" ng-model="request.changeInitiator"/>
</div>
<label class="col-sm-3 control-label">Risk Level:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Risk_Level }}" ng-model="request.riskLevel" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">CI Details:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Change_Initiator_id }}" ng-model="request.changeInitiatorId" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Requestor:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Requestor }}" ng-model="request.requestor" />
</div>
<label class="col-sm-3 control-label">Systems Affected:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Systems_Affected }}" ng-model="request.systemsAffected" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Implemented By:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Implemented_By }}" ng-model="request.implementationBy" />
</div>
<label class="col-sm-3 control-label">Implementation Date:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Implementation_Date }}" ng-model="request.implementationDate" bs-datepicker/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Close Date:</label>
<div class="col-sm-3">
<input type="text" class="form-control" placeholder="{{ request.Close_Date }}" ng-model="request.closeDate" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Work to be Performed:</label>
<div class="col-sm-3">
<textarea name="request.description" ng-model="request.workToBePerformed" placeholder="{{ request.Work_to_be_performed }}" ></textarea>
</div>
<label class="col-sm-3 control-label">Backout Plan:</label>
<div class="col-sm-3">
<textarea name="request.description" ng-model="request.backoutPlan" placeholder="{{ request.Backout_Plan }}" ></textarea>
</div>
</div>
<div class="form-group">
<button class="update" ng:click="updateRequest()">Save Edits</button>
<button class="approve" ng:click="approveRequest()">Approve</button>
</div>
</form>
<div class="form-group">
<a href="#/requests" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>
My confusion in with ng-model, value and placeholders. Currently all my data populates in the form, but when the user goes to update the page they have to re-fill out every box or else blank data will be pushed. I understand the Placeholder does not actually fill in the data - however I have been un-able to use both ng-model and value on the same input field.
My top two fields populate using value just fine, but I do not want people to edit the date or ID. My other fields show the correct data in a temp form using placeholder but do not populate using ng-model. Additionally when my user goes to make the update the ng-model DOES function.
So in short my current issue is that ng-model does not display the original data- but does push it correctly. This causes my users to have to re-type all the data everytime or else the record will be updated with null values.
Below is the rest of my logic for review.
app.js
var app = angular.module('changeControlApp', [
'ngRoute',
'ngResource'
]);
//This configures the routes and associates each route with a view and a controller
app.config(function($routeProvider, $locationProvider) {
//$locationProvider.html5Mode(true);
$routeProvider
.when('/', {templateUrl: 'app/partials/request-list.html', controller: 'viewController' })
.when('/requests', {templateUrl: 'app/partials/request-list.html', controller: 'viewController' })
.when('/requests/create', {templateUrl: 'app/partials/request-create.html', controller: 'createRequestController' })
.when('/settings', {templateUrl: 'app/partials/settings.html', controller: 'settingsController'})
.when('/requests/:id', {templateUrl: 'app/partials/request-view.html', controller: 'viewRequestController' })
.when('/requests/edit/:id', {templateUrl: 'app/partials/request-edit.html', controller: 'editRequestController' })
.otherwise({ redirectTo: '/' });
});
app.controller('editRequestController', function($scope, $location, $route, $routeParams, $resource) {
$scope.header = 'Edit Change Request';
// Update User details
var request_Id = $routeParams.id;
if (request_Id) {
var Request = $resource(('http://pdgrosit02v/changeRequest/app/api/requests/'+ request_Id));
$scope.request = Request.get();
}
$scope.updateRequest = function() {
var RequestPut = $resource(('http://pdgrosit02v/changeRequest/app/api/requests/'+ request_Id), {}, { update: { method: 'PUT'}} );
RequestPut.update($scope.request, function() {
// success
$location.path('/requests');
}, function() {
// error
console.log(error);
});
}
});
And the Slim file
index.php
<?php
require 'Slim/Slim.php';
\Slim\Slim::registerAutoloader();
use Slim\Slim;
$app = new Slim();
//$paramValue = $app->request->params('paramName');
$app->get('/requests', 'getRequests');
$app->get('/requests/:id', 'getRequest');
$app->post('/requests/create', 'addRequest');
$app->put('/requests/:id', 'updateRequest');
$app->run();
function updateRequest($id) {
$request = Slim::getInstance()->request()->getBody();
$data = json_decode($request, true);
$sql = "UPDATE change_request SET Change_Initiator=:changeInitiator, Change_Initiator_id=:changeInitiatorId, Risk_Level=:riskLevel, Requestor=:requestor, Work_to_be_performed=:workToBePerformed, Backout_Plan=:backoutPlan, Backout_Time=:backoutTime, Implementation_Date=:implementationDate, Header=:title, Systems_Affected=:systemsAffected, Implemented_By=:implementationBy WHERE ID=$id";
//$sql = "UPDATE change_request SET Change_Initiator=:changeInitiator WHERE ID=$id";
try {
$db = getConnection();
$stmt = $db->prepare($sql);
$stmt->bindValue(":changeInitiator", $data['changeInitiator']);
$stmt->bindParam(":changeInitiatorId", $data['changeInitiatorId']);
$stmt->bindParam(":riskLevel", $data['riskLevel']);
$stmt->bindParam(":requestor", $data['requestor']);
$stmt->bindParam(":workToBePerformed", $data['workToBePerformed']);
$stmt->bindParam(":backoutPlan", $data['backoutPlan']);
$stmt->bindParam(":backoutTime", $data['backoutTime']);
$stmt->bindParam(":implementationDate", $data['implementationDate']);
$stmt->bindParam(":title", $data['title']);
$stmt->bindParam(":systemsAffected", $data['systemsAffected']);
$stmt->bindParam(":implementationBy", $data['implementationBy']);
$stmt->execute();
$db = null;
echo json_encode($data);
} catch(PDOException $e) {
echo '{"error":{"text":'. $e->getMessage() .'}}';
}
}
I figured out the issue, turns out Value and ng-model conflict and I had to modify my form to get the data correctly.
I removed all value commands and replaced them with ng-model="data.keyvalue". I was confused before as I thought you needed to use {{}} when referencing things off the scope.
I also added form validation for updating - new code below
request-edit.html
<div class="jumbotron text-center">
<form class="form-horizontal" role="form" name="requestEditForm" ng-submit="updateRequest()">
<div class="form-group">
<div class="text-center">
<h1>{{ header }}</h1>
<br/>
<h3>Title of request:</h3>
<input name="title" id="title" class="form-control" type="text" ng-model="request.Header" />
<br/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Id:</label>
<div class="col-sm-3">
<input name="id" class="form-control" type="text" value="{{request.ID}}" disabled />
</div>
<label class="col-sm-3 control-label">Date Submitted:</label>
<div class="col-sm-3">
<input type="text" class="form-control" value="{{ request.Date_Submitted }}" disabled/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Change Initiator:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Change_Initiator" name="changeInitiator" id="changeInitiator" />
<span class="error" ng-show="requestEditForm.changeInitiator.$error.required && requestEditForm.changeInitiator.$dirty">Title is required</span>
</div>
<label class="col-sm-3 control-label">Risk Level:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Risk_Level" name="riskLevel" id="riskLevel" required/>
<span class="error" ng-show="requestEditForm.riskLevel.$error.required && requestEditForm.riskLevel.$dirty">Risk Level is required</span>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">CI Details:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Change_Initiator_id" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Requestor:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Requestor" />
</div>
<label class="col-sm-3 control-label">Systems Affected:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Systems_Affected" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Implemented By:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Implemented_By" />
</div>
<label class="col-sm-3 control-label">Implementation Date:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Implementation_Date" bs-datepicker/>
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Close Date:</label>
<div class="col-sm-3">
<input type="text" class="form-control" ng-model="request.Close_Date" />
</div>
</div>
<div class="form-group">
<label class="col-sm-3 control-label">Work to be Performed:</label>
<div class="col-sm-3">
<textarea name="request.description" ng-model="request.Work_to_be_performed"></textarea>
</div>
<label class="col-sm-3 control-label">Backout Plan:</label>
<div class="col-sm-3">
<textarea name="request.description" ng-model="request.Backout_Plan"></textarea>
</div>
</div>
<div class="form-group">
<button class="submit">Save Edits</button>
<button class="approve" ng:click="approveRequest()">Approve</button>
</div>
</form>
<div class="form-group">
<a href="#/requests" class="btn btn-default pull-right">
<span class="glyphicon glyphicon-arrow-left"></span> Back
</a>
</div>
</div>

Categories