input content value is not showing on front end - html

I have this code that I receive from database a formated data of a social security number.
<div class="col-md-3">
<h5>Social Security #:<span class="text-danger">*</span></h5>
<div class="controls">
<div id="show-create">
<input type="number" id="social-security" name="social-security" class="form-control" value="123-45-6789">
</div>
</div>
</div>
When I check Element on Chrome, I have the value="123-45-6789", but is not showing on front end.

You have an <input type="number">, which is used only for numbers. But "123-45-6789" is not a number:
<input type="number" value="123-45-6789">
Since you're trying to display a text value, use an <input type="text"> instead:
<input type="text" value="123-45-6789">
Basically, just because text contains number characters does not mean that it is a number. Social security numbers, phone numbers, address components, etc.

HTML input with type='number' only allow numeric values such as 50, -10, or -45.3. Since your input value 123-45-6789 contains a dash in the middle, it's not a numeric value but a string. Change the input type from number to text, and it will work.
From
type="number"
To
type="text"
Full code
<div class="col-md-3">
<h5>Social Security #:<span class="text-danger">*</span></h5>
<div class="controls">
<div id="show-create">
<?php foreach ($peoples as $row) { ?>
<input type="text" id="social-security" name="social-security" class="form-control" value="<?php echo htmlspecialchars ($row['social-security'])?>">
<?php } ?>
</div>
</div>
</div>

Related

how to avoid autosuggest by browser when the focus is on a field?

I'm typing to disable/avoid the autosuggest on specific field.
The html snippet is this:
<div class="form-group">
<h4 class="whitish" for="name-of-car-id">Name of car (max length 30 chars)</h4>
<input type="input" class="form-control" placeholder="" id="name-of-car-id" autocomplete="off">
<span id='remainingC'></span>
<small class="form-text text-muted">You will identify your group of IDs by this name</small>
<div id='name-of-car-error' style='color:red; font-size: 18px;'></div>
</div>
note that I added the autocomplete='off' and yet, the browser still provide a suggestion.
Try to replace input type="input" with type="text"

Button to submit form data to another URL containing #

This is my HTML:
<form action="http://example.com/rezervari/index.html#/hotelbooking" method="get">
<input type="hidden" name="hotel" value="<?= $hotel ?>" class="form-control">
<input type="hidden" name="roomtypegroups" value="<?= $roomtypegroups ?>" class="form-control">
<div class="form-row">
<div class="col">
<div class="form-group">
<label>Sosire</label>
<div class="input-group mb-3">
<input id="from" type="text" name="from" value="<?= $arrival == 'CURRENT' ? date('Y-m-d') : $arrival ?>" class="form-control datepicker1">
<div class="input-group-append datepicker1-h">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
<div class="col">
<div class="form-group">
<label>Plecare</label>
<div class="input-group mb-3">
<input id="to" type="text" name="to" value="<?= $arrival == 'CURRENT' ? date('Y-m-d', strtotime(date('Y-m-d') . ' ' . $departure . ' day')) : date('Y-m-d', strtotime($arrival . ' ' . $departure . ' day')) ?>" class="form-control datepicker2">
<div class="input-group-append datepicker2-h">
<span class="input-group-text" id="basic-addon2"><i class="fa fa-calendar-times-o" aria-hidden="true"></i></span>
</div>
</div>
</div>
</div>
</div>
When I submit the form, the URL loses the "#" and messes it up, and that's no good because the query doesn't work on the secondary website, as it becomes:
http://example.com/rezervari/index.html?hotel=14315&roomtypegroups=44332&from=2020-11-23&to=2020-11-24&roomscount=1&adult=1#/hotelbooking
Instead, it should be:
http://example.com/rezervari/index.html#/hotelbooking?hotel=14315&roomtypegroups=44332&from=2020-09-91&to=2020-09-14&adult=1&numchild1=1&numchild2=1&numchild3=1
How can I pass on the link without the "#" getting removed and the whole URL messed up? Thanks!
Fragment IDs are supposed to link to a specific part of a webpage and are resolved client-side.
Consequently they must go after the query string.
When you submit a GET method form, it will replace everything after the start of the query string in the action with the newly generated query string.
If you have some kind of hack which reads the fragment ID client-side, and you need to put the query string inside the fragment ID so that that code can read it, you can't use the standard form submission logic.
You'll need to add a submit event handler to the form with JavaScript, prevent the default action, build the URL yourself and then navigate to it (e.g. by assigning it to location).

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.

phone according to the format number

i would like to ask how to make my phone according to this format :
+6012-1234 567
below are the code that i have done ...when i run it it say press match the request format ... so what wrong with my code ??
<div class="rTableRow">
<div class="rTableCell"><label for="Phone">Phone :</label>
</div>
<div class="rTableHead">
<input type="phone" class="form-control" id="phone" pattern="\d{3}[\-]\d{3}
[\-]\d{4}" tittle="Malaysia phone format only" placeholder="+6015-123-4567"
phone="phone">
</div>
</div>
<input type="number" /> or <input type="tel" /> you have added type="phone"
HTML5 Input Types
color
date
datetime-local
email
month
number
range
search
tel
time
url
week

HTML Text label misplaced when in line validation appears

I have a simple form with a date validation which works fine:
The problem is that when the validation kicks in, the "End Date" label gets misplaced as you can see (is above the date field box/calendar):
The code related is the following (it's just a form):
<form name="senstageaddform">
<div class="form-element">
<label for="ed_senStartDate" class="text-label">
{{i18n "EDUCATION_SEN_START_DATE"}} <span class="required">*</span>
</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senStartDate" name="startDate"/>
</div>
<div class="form-element">
<label for="ed_senEndDate" class="text-label">{{i18n "EDUCATION_SEN_END_DATE"}}</label>
<input type="text" class="date standard-text-field" maxlength="16" id="ed_senEndDate" name="endDate"/>
</div>
</form>
Is there any way to "pack" the form or any way to stop this happening?
Any hint please?
Thanks everyone