HTML Form naming conventions - html

If I have an HTML form with two inputs that would insert/modify a columns with the same name in two tables in a database.
What would be the best way to name my input elements?
<div class="form-group">
<input type="text" class="form-control" id="mothers_name" name="name" placeholder="Enter Mothers Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="childs_name" name="name" placeholder="Enter Child's Name">
</div>
db-
--table1
---name
--table2
--name
I am trying to save these information using laravels create(request->all())
I see that the request object contains the last input value.

I would name the inputs the same way you have named the ids. (Or something similar.)
<div class="form-group">
<input type="text" class="form-control" id="mothers_name" name="mothers_name" placeholder="Enter Mother's Name">
</div>
<div class="form-group">
<input type="text" class="form-control" id="childs_name" name="childs_name" placeholder="Enter Child's Name">
</div>
Within your Controller, you could do something like this:
public function storeNameTable1(Request $request) {
$store_name = new Table1;
$store_name->name = $request->mothers_name;
$store_name->save();
}
public function storeNameTable2(Request $request) {
$store_name = new Table2;
$store_name->name = $request->childs_name;
$store_name->save();
}

Related

Can you use <input> without a server?

I want to use ‹input› without PHP because my code editor (Glitch.com) doesn't work well with PHP. Is there a way to use ‹input› without server-side code? Example: Somehow stores the input as a variable. This is incorrect, I know but can I do something like this?
<form>
<label for="FirstName">First name:</label>
var input = <input type="text" id="fname" name="fname">
</form>
Then like use a getElementById and replace the text with the input variable.
I know I can use prompt(), but I don't want a window popping up, but something like this:
<form>
<label for="Username">Enter New Name:</label>
<input type="text" id="fname" name="fname"><br><br>
<input type="Submit" value="Submit">
</form>
If you can help,
Thanks!
Update:
What I am trying to accomplish is I am making a scorekeeper, and I want the user to be able to rename themselves. Sorry if I wasn't clear.
You can definetely achieve this using Javascript:
const firstName = document.querySelector('#fname');
const lastName = document.querySelector('#lname');
const submit_button = document.querySelector('input[type="button"]');
const heading = document.querySelector('h1')
submit_button.addEventListener('click', () => {
heading.textContent = "Last Name: " + lastName.value;
})
<h1 class="display-first-name"></h1>
<form>
<label for="FirstName">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="LastName">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="button" value="Submit">
</form>

how to get form data in angular 9 with array of objects[Updated question on July-29-2020]

This is my angular 9 form code. but it not works. how to handle this ? ERROR TypeError: Cannot read property 'mobile_number' of undefined. help me to solve this.
<form (ngSubmit)="processForm()">
<section *ngFor="let user of users;let i=index">
<div class="form group">
<input type="text" name="id" class="form-control" [(ngModel)]="user.id">
</div>
<div class="form group">
<label for="fname">First Name</label>
<input type="text" name="fname" class="form-control" [(ngModel)]="user.fname">
</div>
<div class="form group">
<label for="lname">Last Name</label>
<input type="text" name="lname" class="form-control" [(ngModel)]="user.lname">
</div>
<div class="form group">
<label for="age">Age</label>
<input type="text" name="age" class="form-control" [(ngModel)]="user.age">
</div>
<div class="form group">
<label for="mobile_number">Mobile_Number</label>
<input type="text" name="mobile_number" class="form-control" [(ngModel)]="user.phone && user.phone[0].mobile_number">
</div>
<input type="submit" value="save" class="btn btn-success">
</section>
</form>
I had created classes something like this:
export class User {
constructor(
public id:Number,
public age:Number,
public fname:string,
public lname:string,
public phone:Phone[]){}
}
export class Phone{
constructor(
public pid:Number,
public mobile_number:Number){}
}
How can i assign ngModel for input filed with these type of classes
(Below answer I had seen it from stackoverflow how to get form data in angular 4 with array of objects answers but it is throwing error like mobile_number is undefined)
<input type="text" name="mobile_number"
class="form-control"
[(ngModel)]="user.phone && user.phone[0].mobile_number">
Can someone help me with this?
My typescript file:
users:User[]=[new User(null,null,null,null,[])];
You are trying to edit only one phone number? No need for an array.
If you want to edit multiple phone numbers you could try something like this:
<div class="form group" *ngFor="let phone of user.phone; index as i;">
<label for="mobile_number">Mobile_Number {{i+1}}</label>
<input type="text" name="mobile_number" class="form-control" [(ngModel)]="phone.mobile_number">
</div>
Add an "add" button and fill the phone array with an new phone object.
Create an interface for your User type
export interface Phone{
pid:Number;
mobile_number:Number;
}
export interface User {
id:Number;
age:Number;
fname:string;
lname:string;
phone:Phone[];
}
And create an object of type User to hold the values
public user = {} as User;
CheckThis

how to auto fill like #gmail.com in html form

i have a form where every email is registered with #scoops.com but every time i have to enter #scoops.com i want that user just enter email name and #scoops.com auto fill and it will also show at the end of input field ? here it is my code
<div class="form-group" autocomplete="off">
<label>Email <span style="opacity: 0.5; font-style: italic;">(Required)</span></label>
<input autocomplete="nope" type="text" name="email" id="email" class="form-control input-lg"
placeholder="Enter Email" name="name" required=""/>
<span id="error_email"></span>
#if($errors->has('email'))
<div class="alert alert-danger">
{{ $errors->first('email') }}
</div>
#endif
</div>
i want something like this
Since you use Bootstrap: Try to wrap your mail input into an Inputgroup.
And then append the mail ending(by grouping your inputs). Also im not sure if 'autocomplete="nope"' is a state for this attribute. You should consider "off" if nope means no.
<div class="input-group">
<input autocomplete="off" type="text" name="email" id="email" class="form-control input-lg" placeholder="Enter Email" name="name" required=""/>
<div class="input-group-append">
<span class="input-group-text">#scoops.com</span>
</div>
</div>
Adding to what´s been said above, you can do something like the code below to submit the user-typed value appended with whatever text you want:
<input id="myInput">
<button onclick="submit(document.getElementById('myInput').value)"></button>
<script>
function submit(inputValue) {
const email = inputValue + "#scoops.com"
// insert here the code (like a POST request) to send the 'email' constant to wherever you want
}
</script>

is there any way i could make the first row as mandatory before going to second row in codeigniter?

My view:
<div class="col-md-3">
<div class="form-group">
<label>Employee Id</label>
<input type="text" class="form-control" placeholder="Enter employee id" name="empid">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Employee Name</label>
<input type="text" class="form-control" placeholder="Enter employee name" name="empname">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Order Number</label>
<input type="number" class="form-control" placeholder="Enter order number" name="ordernumber" value="<?php echo $order_number;?>">
</div></div>
<div class="col-md-3">
<div class="form-group">
<label></label>
<a onclick="myFunctionfirst()" class="form-control">Proceed to order Create</a>
</div></div>
Once you click on 'proceed to order create' the second row is created. I want this to happen only when the first 3 fields in first row are filled. Please suggest on this
And this is my controller:
public function index()
{
$empid = $_POST['empid'];
If ($empid == ""){
$this->load->model('invoice_model');
$data['stat']= $this->invoice_model->get_stationary();
$data['order_numbers']= $this->invoice_model->get_countnumber();
$data['order_number']= $data['order_numbers'][0]->count+1;
$data['page']='invoice/invoice_view';
$this->load->view("template",$data);
}
}
And it's throwing an error undefined index empid
Welcome to stackoverflow. what you can do is save the input as a variable Store input from a text field in a PHP variable
this method is however a bit unsafe. to secure the input you can use https://www.w3schools.com/php/func_string_htmlspecialchars.asp
https://www.php.net/manual/en/function.htmlspecialchars.php
and once you have the variables just simply check if the variable is empty or not
public function index()
{
$firstname = $_POST['firstname'];
If ($firstname != ""){
$this->load->model('invoice_model');
$data['stat']= $this->invoice_model->get_stationary();
$data['order_numbers']= $this->invoice_model->get_countnumber();
$data['order_number']= $data['order_numbers'][0]->count+1;
$data['page']='invoice/invoice_view';
$this->load->view("template",$data);
}
}
$_POST is how the data is being send. here they explain the difference between POST and GET https://www.quora.com/What-is-the-difference-between-PHPs-get-method-post-method
'firstname' is the name of the input. in your case its <input type="text" class="form-control" placeholder="Enter employee id" name="empid"> so it should be $_POST['empid']
the data is being send with the submit button. instead of using the <a> tag you should use the <button type="submit"> tag also, wrap the inputs in a form tag.

How to get the value from another table under same DB in LARAVEL?

I want to ask how to call the value from another table under same database ?
Database table name: bit_app_policy_category
Under the database I have these columns:
ID
code
description
parent_id
status
Another Database Table name under same database : company_policy
Under the database i have these columns:
ID
policy_category_id
policy_title
version_no
policy_details
expiry_date
file_path
As for now I want to link the table bit_app_policy_category and get the columns of id's value into company_policy - policy_category_id. I don't know how to write the code.
Here is my current code :
<form method="post" action="{{route('policy.store')}}">
{{csrf_field()}}
#csrf
<div class="form-group">
<label for="bit_app_policy_category_parent">Parent Category</label>
<select id="bit_app_policy_category_parent" name="parent_id" class="form-control">
<option value=" {{"$parents->id"}} </option>n>
</select>
</div>
<div class="form-group">
<label for="company_policy_policy_title">Policy Title<span class="required">*</span></label>
<input id="company_policy_policy_title" type="text" name="policy_title" class="form-control" placeholder="Please Enter the policy title" />
</div>
<div class="form-group">
<label for="company_policy_version-no">Version-no<span class="required">*</span></label>
<input id="company_policy_version-no" type="text" name="version_no" class="form-control" placeholder="Please Enter the Version-no" />
</div>
<div class="form-group">
<label for="company_policy_policy_details">Policy Details<span class="required">*</span></label>
<input id="company_policy_policy_details" type="text" name="policy_details" class="form-control" placeholder="Please Enter the Policy Details" />
</div>
<div class="form-group">
<label for="company_policy_expiry_date">Expiry Date<span class="required">*</span></label>
<input id="company_policy_expiry_date" type="datetime-local" name="expiry_date" class="form-control" placeholder="Please Enter the Expiry Date time" />
</div>
<div class="form-group">
<label for="company_policy_file_path">Policy File Path<span class="required">*</span></label>
<input id="company_policy_file_path" type="text" name="file_path" class="form-control" placeholder="Please Enter the file path" />
</div>
<div class="form-group">
<input type="submit" class="btn btn btn-primary" />
Back</span>
Back to home</span>
</div>
</form>
</div>
</div>
#endsection
First create two model
1. PolicyCategory and put the code in model
public function companyPolicies()
{
return $this->hasMany('App\CompanyPolicy');
}
2.CompanyPolicy
public function policyCategory()
{
return $this->belongsTo('App\PolicyCategory',policy_category_id);
}
and in you controller then you can get all the info of related table. Like say, you have one/two company under the policy_category which id is 1. Now you can get all the companies info like below
$policy_category = PolicyCategory::find(1);
dd($policy_category->companyPolicies);
try this and let me know is this really you want or not