I have a form with multiple inputs that user can append. I am able to get all the value from the inputs using jquery ajax. My issue is how to store the array on mysql? I have read about php serialize and unserialize but not quite sure to do it on my case. Below are the codes.
Form
<form>
<input type="text" name="name" class="name" placeholder="Name">
<input type="text" name="age" class="age" placeholder="Age">
<input type="text" name="gender" class="gender" placeholder="Gender">
</form>
<button type="submit" id="store" value="store">Submit</button>
<button type="button">Cancel</button>
jQuery
$('#add').click(function(){
$('#append > ul').append(
'<li style="list-style: none;">'
+ '<input type="text" name="name" class="name" placeholder="Name">'
+ '<input type="text" name="age" class="age" placeholder="Age">'
+ '<input type="text" name="gender" class="gender" placeholder="Gender">'
+ '</li>';
);
});
$('#remove').click(function(){
$('li:last-child').detach();
});
function store_siblings(e){
e.preventDefault();
var arr = [];
var submit = $('#store').val(),
$('input.nama').each(function(){
arr.push($(this).val());
});
$('input.age').each(function(){
arr.push($(this).val());
});
$('input.gender').each(function(){
arr.push($(this).val());
});
$.post('../upd-siblings.php',
{
submit : submit,
arr : arr
}, function(data){
$('#result').html(data)
});
}
$("#store").click(store_siblings);
After I make the serialization and echo I get:
a:6:
{
i:0;s:7:"MY WIFE";
i:1;s:6:"MY SON";
i:2;s:2:"27";
i:3;s:1:"2";
i:4;s:4:"WIFE";
i:5;s:3:"SON";
}
Below are the table siblings That I create on mysql:
siblings
- id
- name
- age
- gender
Can I use mysqli INSERT using the serialize values?
Checkout this link: Description, Quite good and easy to understand explanation of serialization in PHP, if you still get stuck somewhere, just comment and i'll try to clear it up.
Related
I have the following HTML to start with :
<div id="p_scents">
<p>
<label for="p_scnts">Friend n°1</label>
<input type="text" id="p_scnt" size="20" name="name_0" class="form-control" placeholder="Name of your friend" />
<input type="text" id="p_scnt address-input-0" class="form-control" name="address_0" placeholder="Their location"/>
</p>
</div>
<button id="addScnt" type="button">Add a friend</button>
I want to add some extra inputs with jQuery, which I succeed to do thanks to the following script:
$(function() {
var scntDiv = $('#p_scents');
var i = $('#p_scents p').length + 1;
$('#addScnt').click(function() {
$('<p><label for="p_scnts">Friend n°' + i +'</label><input type="text" id="p_scnt" size="20" name="name_' + (i-1) +'" class="form-control" placeholder="Name of your friend" /><input type="text" id="p_scnt address-input-' + (i-1) +'" class="form-control" name="address_' + (i-1) +'" placeholder="Their location"/> <button id="remScnt" type="button">Remove friend</button>').appendTo(scntDiv);
i++;
console.log(i);
return false;
});
$('#remScnt').click(function() {
if( i > 2 ) {
$(this).parent('p').remove();
i--;
}
return false;
});
});
My first piece of code, that checks the click on the #addScnt element and appends a new element on the div, works like a charm.
However, my second piece of code, that checks the click on the #remScnt element and should remove its parent <p> element, doesn't work at all and I can't figure out why. I tried debugging with console.log() but I fail... Any clue would be so much appreciated!
Since remScnt is dynamic you need to delegate click, replace this line:
$('#remScnt').click(function() {
With this one:
$(document).on('click','.remScnt',function() {
BTW, ids has to be unique, make sure to replace id with class instead.
<button class="remScnt"
I have this function:
function AddRowToForm(row){
$("#orderedProductsTblBody tr").each(function(){
// find the first td in the row
arr.push($(this).find("td:first").text());
});
for (i=0;i<arr.length;i++)
// display the value in input field
document.getElementById("message").innerHTML = (arr[i] + "<br >");
});
}
The problem is that I have to retrieve the array in an input field into a form. The input field is the last one (id="message")
fieldset class="pure-group">
<label for="date">Data: </label>
<input id="date" name="date" type="text"/>
</fieldset>
<fieldset class="pure-group">
<label for="time">Ora: </label>
<input id="time" name="time" />
</fieldset>
<fieldset class="pure-group">
<label for="pax">Numero di Persone: </label>
<input id="pax" name="pax" />
</fieldset>
<fieldset class="pure-group">
<label for="message">Esperienze: </label>
<input id="message" name="message" rows="5"></input>
</fieldset>
The problem is that the function doesn't work. I tried with document.write (instead of innerHTML and it works but it cancel everything. Any help? Thank you in advance!:
SO you have a couple of issues. You set the text of an input with value. You are also not appending, you are just overriding the value. For a textarea, you need to use \n for new lines.
$("#orderedProductsTblBody tr").each(function(){
arr.push($(this).find("td:first").text());
});
for (var i=0;i<arr.length;i++)
// display the value in input field
document.getElementById("message").value += arr[i] + "\n");
});
Now how would I do it? Just use join.
document.getElementById("message").value = arr.join("\n");
I'm currently working on a project for which I have to develop a WordPress plugin allowing to manipulate tables in databases. My work is based on this plugin, which I'm improving and editing to match the requirements of my company : https://wordpress.org/plugins/create-db-tables/
My problem however doesn't concern MySQL, but html, Php and jQuery (especially jQuery, which I'm not familiar with, at all). It's about dynamically generating a form, itself depending on a dynamically generated form (yeah...).
With the following code, the plugin user is able to dynamically add rows to the table he's creating. I would like him to be able to add "sub-rows" (I know how to handle it server-side, my problem here is only the interface), like that :
http://i.imgur.com/XHwI54W.png
When the user clicks "Add subrows", a zone appears where he can fill out a form, etc. It works perfectly (at least the interface) for the first row, but after that, whenever I click another "Add subrows" button, nothing happens.
I'd appreciate very much if someone could take time to tell me where I'm doing something wrong. Thank you so much ! :)
Here is my code :
(the first jQuery script seemingly works, I'm not the one who developed it. I duplicated it and tried to adapt the second one to my "sub-row" requirement)
<form id="create-table" method="post" action="<?php echo admin_url('admin-post.php'); ?>">
<input type="hidden" name="action" value="add_table">
<fieldset class="table-fieldset">
<label id="table-name">Table Name:</label> <br />
<span style="position: relative; top: 2px;"><?php echo "Choose prefix (by default wp_ ) : " ?></span><input type="text" class="prefix-name" name="prefix_name" size="4" id="prefix-name"><br />
<span style="position: relative; top: 2px;"><?php echo "Choose table name :" ?></span><input type="text" class="table-name" name="table_name" size="30" id="table-name">
<span>(Alphanumeric only, no special characters.)</span> <br/> <br/>
<span><font color="blue"><strong>Will this table be used for user authentication ? </strong></font></span><input type="checkbox" class="is-user-auth" name="is_user_auth" id="is-user-auth"><br/>
<span><strong>/!\ Only one table at a time can be used for user authentication : if a current table is used for this purpose, it won't be anymore.</strong></span><br/><br/>
</fieldset>
<div id="rows">
<fieldset class="row-fieldset" id="row-fieldset" value="1"><label id="row-label">Row:</label><input type="text" class="name-input" name="name[]" placeholder="Name" size="20"><input type="text" class="type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20"><span id="null-label">Null</span><input type="checkbox" class="null-input" name="null[]"><input type="text" class="default-input" name="default[]" placeholder="Default Value" size="20"><span id="unique-label">Unique</span><input type="checkbox" class="unique-input" name="unique[]"><button type="button" class="row-dynamic" style="background-color: #E3F6CE">Add subrows</button><div id="subrows1" value="1"></div></fieldset>
</div>
<div id="add-row">
<button type="button" class="add-row button-secondary">Add Row</button>
</div>
<fieldset>
<input type="hidden" id="items" name="items" value="1" />
</fieldset>
<fieldset>
<input type="hidden" id="subrowitems" name="subrowitems" value="101" />
</fieldset>
<fieldset>
<button type="submit" class="button button-primary button-large">Create Table</button>
</fieldset>
</form>
<!-- Script to add rows -->
<script>
jQuery(function($) {
$('.add-row').click(function () {
$('#items').val(function(i, val) { return +val+1 });
var val_2=$('#items').attr('value');
var subrow_name = 'subrows'+val_2;
var rowHTML = '<fieldset class="row-fieldset" id="row-fieldset" value=\"'+val_2+'\"><label id="row-label">Row:</label><input type="text" class="name-input" name="name[]" placeholder="Name" size="20"><input type="text" class="type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20"><span id="null-label">Null</span><input type="checkbox" class="null-input" name="null[]"><input type="text" class="default-input" name="default[]" placeholder="Default Value" size="20"><span id="unique-label">Unique</span><input type="checkbox" class="unique-input" name="unique[]"><button type="button" class="row-dynamic" style="background-color: #E3F6CE">Add subrows</button><div id=\"'+subrow_name+'\" value=' + val_2 + '></div></fieldset>';
$('#rows').append(rowHTML);
});
$("input.name-input").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
$("input.table-name").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
});
</script>
<!-- Script to add subrows -->
<script>
jQuery(function($) {
$('.row-dynamic').click(function () {
$('#subrowitems').val(function(i, val) { return +val+1 });
var val_3=$('#subrowitems').attr('value');
var subrowHTML = '<fieldset class="subrow-fieldset" value=\"' +val_3+ '\"><label id="subrow-label">Subrow:</label><input type="text" class="subrow-name-input" name="name[]" placeholder="Name" size="20" style="background-color: #E3F6CE"><input type="text" class="subrow-type-input" name="type[]" placeholder="Type [Ex: bigint(20)]" size="20" style="background-color: #E3F6CE"><span id="subrow-null-label">Null</span><input type="checkbox" class="subrow-null-input" name="null[]" style="background-color: #E3F6CE"><input type="text" class="subrow-default-input" name="default[]" placeholder="Default Value" size="20" style="background-color: #E3F6CE"><span id="subrow-unique-label">Unique</span><input type="checkbox" class="subrow-unique-input" name="unique[]" style="background-color: #E3F6CE"></fieldset>';
var subrow_val = '#subrows'+$('#row-fieldset').attr('value');
$(subrow_val).append(subrowHTML);
});
$("input.subrow-name-input").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
$("input.table-name").on({
keydown: function(e) {
if (e.which === 32)
return false;
},
change: function() {
this.value = this.value.replace(/\s/g, "");
}
});
});
</script>
You had some duplicated id's on your HTML sintax (e.g. #row-fieldset)
If you check your HTML code you initializes a fieldset tag with the row-fieldset id
<fieldset class="row-fieldset" id="row-fieldset" value="1">
and later you create a new one with the same id
var rowHTML = '<fieldset class="row-fieldset" id="row-fieldset" value=\"'+val_2+'\
So when JQuery tries to find the proper id, only find the first one.
I added to the Add subrows button a value for locate the correct row
Also you did not provide any jQuery version so I used 2.2.0
Check this fiddle to see it running
Hope it helps
I am using three dynamic textboxes in a form ,my problem is that when the form validation fails then i have to keep the user in that form ,Now my problem is that i have to hold the values and those textbox also in the form ,how this is possible ?? i am giving a fiddle please suggest what can be done,
DEMO FIDDLE
Here is the fiddle
function GetDynamicTextBox(value) {
return '<input class="txt1" name="DynamicTextBox" type="text" value="' + value + '" /> <input class="txt2 time" id="myPicker" class="time" type="text" /> <input name="phoneNum1" id="phoneNum1" class="time txt3" type="text" /><input type="button" value="Remove" class="remove" />';
}
This is the code which is responsible for the creating dynamic textboxes
So i am having the next input trough and ajax call:
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ",
}
I have several text inputs with the associated name of each JSON object as follows:
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
What i want to have a value to each input. Like this:
<input type="text" name="id_u" value="1">
<input type="text" name="nombre_usuario" value="jesus">
<input type="text" name="apellido_paterno_usuario" value="diaz">
I know that i can do with jQuery with jQuery function:
$("[name=]").val();
The problem is that i have a lot of fields to complete. Si i would like to do it faster.
Any ideas?
Thanks
Try this.
<input type="text" name="id_u">
<input type="text" name="nombre_usuario">
<input type="text" name="apellido_paterno_usuario">
<script>
var json = {
"id_u":"1",
"nombre_usuario":"JESUS",
"apellido_paterno_usuario":"DIAZ"
};
for (var key in json) {
if (json.hasOwnProperty(key)) {
$("[name=" + key + "]").val(json[key]);
}
}
</script>
http://jsfiddle.net/GCy2a/