How to save several input data in single MySql column? - javascript

How to save several input data in single MySql column?
I have 3 input fields, with same name (name="type"). Now I want to
save these 3 input fields datas in one, single Mysql column. How can I
solve this?
<div class="form-column col-md-4">
<div class="form-group col-md-12">
<input type="text" class="form-control" name="type" id="height" placeholder="height (cm)">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" name="type" id="width" placeholder="width (cm)">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" name="type" id="length" placeholder="length (cm)">
</div>
</div>

HTML
<form >
<div class="form-column col-md-4">
<div class="form-group col-md-12">
<input type="text" class="form-control" name="type[width]" id="height" placeholder="height (cm)">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" name="type[height]" id="width" placeholder="width (cm)">
</div>
<div class="form-group col-md-12">
<input type="text" class="form-control" name="type[length]" id="length" placeholder="length (cm)">
</div>
Note when naming the variable in html use specifically name="type[width]". do not use the single or double quote inside with width like names
PHP
<pre>
<?php
$type = $_GET['type'];
print_r($type);
extract($type);
echo 'width:' . $width .'<br />';
echo 'height:' . $height .'<br />';
echo 'length:' . $length .'<br />';
//serialize before inserting
$mysql_value = serialize($type);
echo $mysql_value;
//retrive by unserialize
$unserialize_mysql_value = unserialize($mysql_value);
print_r($unserialize_mysql_value);
?></pre>
Documentation of extract function

I don't recommend it, but you could create an assoc array with the names and values and save it as a JSON string in the database using json_encode(). Then you can use json_decode() to get the array again and have access each field individually.

Change the name from name="type" to name="type[]" and the data will POST as an array.
When handling the request body, you can concatenate these however you'd like to be stored.
ex: $column_val = $request->type[0] . $request->type[1];
or: $column_val = implode('-', $request->type);

You can't use same name for multiple input, if you want to use same name then you can use name attribute like an array, something like:
name="type[]"
Now, you can use serialize() method in PHP to store all inputs in one single column something like:
$inputData = serialize($_POST['name']); // this will store your array as a string
After this, when you need to display this column then you can use unserialize() method like:
$fetchData = unserialize(your column name);
Here, $fetchData will return the original array, which you saved in your database.
Additional Point:
You can also store your input with associative array like:
name="type[width]" and name="type[height]" and name="type[length]"

Related

How to add dynamical form values from different names to same field in sql using php?

Creating a resume builder website in which there could be multiple or no values for fields like skills, education..etc. I have made a '+' sign which increments the name of the div tag by 1 (using javascript). so on pressing the '+' sign, the name becomes 'skills1'. There could be variable quantity for these. How to add all these skills (skill1,skill2,skill3......) into the same field in sql table (skill)
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute1" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute2" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute3" class="form-control">
</div>
The problem is that we dont know how many institutes are going to be added. What PHP code should be used here?
Tried to concatenate but to concatenate, the value should be there in the sql server.
you can use a loop to iterate through the form fields and concatenate the values to a single variable before inserting it into the database.
try this:
// Assuming the form field names are 'institute1', 'institute2', 'institute3', etc.
// You can use an array in the HTML name attribute like this: name="institute[]"
$institutes = '';
// Loop through the $_POST array to concatenate all the institute values
foreach ($_POST['institute'] as $value) {
$institutes .= $value . ', '; // Concatenate values with a separator
}
// Remove the trailing separator
$institutes = rtrim($institutes, ', ');
// Insert the concatenated value into the 'skill' field in the SQL table
$sql = "INSERT INTO table_name (skill) VALUES ('$institutes')";
// Execute the SQL query
In the HTML form, you can use an array in the name attribute for the institute fields, like this:
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute[]" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute[]" class="form-control">
</div>
<div class="mb-3">
<label for="exampleInputEmail1" class="form-label">School/College/University</label>
<input type="text" name="institute[]" class="form-control">
</div>

The checkbox function can only be used just on the first line in php

I have a modal and in this modal, I have a checkbox, The checkbox function can only be used on the first line table.
Code is like this, the checkbox function works but only on the first row of the table, henceforth the modal process doesn't work, I've tried adding
<?php echo $data['id_user']; ?>
to the ID but it still doesn't work.
<div class="form-group">
<label for="ubah_password">Ubah Password</label>
<div class="form-group">
<input type="checkbox" id="ubah_password" name="ubah_password" value="1">
<label class="prevent-select" for="ubah_password"> Ya, saya ingin mengubah password</label>
</div>
</div>
<div id="form_password" style="display: none;">
<div class="form-group">
<label for="editPassAdmin">Password Baru</label>
<input type="password" class="form-control form-control-sm" id="editPassAdmin" name="editPassAdmin" placeholder="Masukkan password baru">
</div>
<div class="form-group">
<label for="password_confirm">Konfirmasi Password</label>
<input type="password" class="form-control form-control-sm" id="password_confirm" name="password_confirm" placeholder="Masukkan kembali password baru">
</div>
</div>
<script>
var checkbox = document.getElementById("ubah_password");
var formPassword = document.getElementById("form_password");
checkbox.addEventListener("change", function() {
if (this.checked) {
formPassword.style.display = "block";
} else {
formPassword.style.display = "none";
}
});
</script>
The HTML ID attribute is designed to be unique, so even if you repeat it, you need to select them all, then individually in your JavaScript to load the modal.
Also, the name attributes should probably be unique enough for your form PHP code to tell which password you are changing.
For example, you could change the ID attributes to something like:
id="ubah_password[<?php echo $data['id_user']; ?>]"

Form in HTML with button assigns the value of the last button, no matter which one was selected

I want to create a form with HTML with different types of inputs (such as name, surname, dates, and radio-button options), and when I want to print the object with the data inputted in the form on the console, the value from the radio-buttons is not stored correctly.
First of all, this is my first project on this area and also my first posted question on stackoverflow, so I would appreciate some suggestions on how to pose the question better if I'm forgetting some crucial data.
I have been following help from different resources (mostly youtube videos such as: https://www.youtube.com/watch?v=GrycH6F-ksY ) to create this form and submit the data with AJAX, and the code of my javascript application comes mainly from that video.
All the data is stored correctly and I can see it in the console, except from the data comming from the radio-buttons. No matter what option is selected (either "male" or "female"), the console always shows the value of the last button, which in this case is "female". I suppose I am doing something wrong when defining these buttons, and why they are not being "selected" (I suppose that's what is happening since the data shown is always the last default value) but I haven't been able to find out where I am doing something wrong.
I'm including the part of the code that I think might be relevant
<form action="ajax/contact.php" method="post" class="ajax">
<div class="form-row">
<div class="form-group col-md-6">
<label>Name</label>
<input type="text" class="form-control" name="inputName" required>
</div>
<div class="form-group col-md-6">
<label>Surname</label>
<input type="text" class="form-control" name="inputSurname" required>
</div>
</div>
<div class="form-group">
<label>Date of birth</label>
<input type="date" class="form-control" name="inputDate">
</div>
<div class="form-group">
<label>Email</label>
<input type="email" class="form-control" name="inputEmail" required>
</div>
<div class="form-row">
<div class="form-group col-md-4">
<label>Gender</label>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="male">Male</div>
</div>
<div class="form-group col-md-4">
<div class="radio-inline"><input type="radio" name="inputGender"
value="female">Female</div>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6">
<label>Number of children</label>
</div>
<div class="form-group col-md-6">
<input type="number" class="form-control" name="inputNumber">
</div>
</div>
<div class="text-center">
<button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
Javascript function
$('form.ajax').on('submit', function() {
var that = $(this),
url = that.attr('action'),
method = that.attr('method'),
data = {};
that.find('[name]').each(function(index, value) {
var that = $(this),
name = that.attr('name'),
value = that.val();
data[name] = value;
});
console.log(data);
return false;
});
PHP file
<?php
if (isset($_POST['inputName'],$_POST['inputSurname'],$_POST['inputDate'],$_POST['inputEmail'],$_POST['inputGender'],$_POST['inputNumber'])) {
print_r($_POST);
}
In the console I'm getting this:
${inputName: "myName", inputSurname: "mySurname", inputDate: "2019-12-13",
$inputEmail: "myMail#gmail.com", inputGender: "female", …}
$inputDate: "2019-12-13"
$inputEmail: "myMail#gmail.com"
$inputGender: "female"
$inputName: "myName"
$inputNumber: "1"
$inputSurname: "mySurname"
$_proto_: Object
but I thought it would be showing:
$...
$inputGender: "male"
$...
when the male option is selected.
Thank you very much
The problem is in your JS. You're looping through everything with a name attribute, in order, and adding its value to your submit data. In the case of radio buttons, you have to check if they're selected and only add if so, otherwise, the last one always wins, as you're seeing.
And since you appear to be using jQuery, you can probably just let its serialize helper do this work for you.

Mustache loop duplicate div

I have mustache :
my mustache
after I render, there are 4 divs (which are the same 2 div).
html
I want to display only 2 div or remove duplicate div, can someone help me?
code :
{{#bya_jsa}}
{{#jasa}}
{{#bya_jsa}}
{{#no}}
<div id="divbiayapekerjaan" form-no="{{no}}">
{{/no}}
{{/bya_jsa}}
<div class="form-group">
<label><b>Jasa</b></label>
<input type="text" name="bya_js[][jasa]" value="{{jasa}}" class="form-control" placeholder="Masukkan jasa yang ada" required="required">
</div>
{{/jasa}}
{{#by_mulai}}
<div class="form-group">
<label><b>Dimulai</b></label>
<input type="text" name="bya_js[][by_mulai]" value="{{by_mulai}}" class="form-control uang" placeholder="Contoh; Rp 10.000.000" required="required">
</div>
{{/by_mulai}}
{{#by_sampai}}
<div class="form-group">
<label><b>Sampai</b></label>
<input type="text" name="bya_js[][by_sampai]" value="{{by_sampai}}" class="form-control uang" placeholder="Contoh; Rp 60.000.000" required="required">
</div>
<hr>
<br>
{{#bya_jsa}}
{{#no}}
</div>
{{/no}}
{{/bya_jsa}}
{{/by_sampai}}
{{/bya_jsa}}
I think one potential answer you are looking for is found here, a way to handle if/else statements.
OR:
Refactor to include a dynamic "by" value:
...
<div class="form-group">
<label><b>{{by_name}}</b></label>
<input type="text" name="bya_js[][{{by_val}}]" value="{{by_val}}" class="form-control" placeholder="{{placeholder}}" required="required">
</div>
...
I chose by_name as the formatted name, by_val as the value that was more system-looking, and placeholder as that related value. This would allow you to only create one form instead of several. You would need to set by_name and by_val a little differently ahead of time.

white space occur in textarea

I am trying to update query using php and database and display the textarea in a page. Here is my code,problem is i get the text area with some whitespace. Please help.
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=$_POST["id"];
$title=$_POST["events"];
$description=$_POST["description"];
}
HTML
<form action="hotel1_galery_eventedit.php" method="post" class="col-sm-4" enctype="multipart/form-data">
<input type="hidden" name="id" value="<?php echo $val->event_id;?>">
<div class="form-group has-info">
<label class="control-label" for="inputSuccess">Event title</label>
<input type="text" class="form-control" name="events" value="<?php echo $val->event_title;?>">
</div>
<div class="form-group has-info">
<label class="control-label" >Event Description</label>
<textarea name="description" class="form-control text-left" rows="3">
<?php echo $val->event_description;?>
</textarea>
</div>
</form>
Have you tried trim() function. use like this
<textarea name="description" class="form-control text-left" rows="3">
<?php echo trim($val->event_description);?>
</textarea>
hope this will help you.
use trim();
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=$_POST["id"];
$title=trim($_POST["events"]);
$description= trim($_POST["description"]);
}
if (isset($_POST["events"])&&isset($_POST["description"]))
{
$id=mysql_real_escape_string(trim($_POST["id"]));
$title=mysql_real_escape_string(trim($_POST["events"]));
$description=mysql_real_escape_string(trim($_POST["description"]));
}
It's a secure method to protect our db from unexpected problems and you can also show data without any extra space...
Keep your textarea code in same line, the enter inside text area is causing this issue.
<textarea name="description" class="form-control text-left" rows="3"><?php echo $val->event_description;?></textarea>
The enter which you have added before echoing the value is the reason for this.
Use trim() with conditions, if value will be blank in text area then it will be treated as NULL or you can use ''
if(isset($_POST["events"])&&isset($_POST["description"])){
$id=$_POST["id"];
$title=$_POST["events"];
$description= ($_POST["description"] == '') ? NULL : trim($_POST["description"]);
}

Categories

Resources