i have problam idont know why bat i see all time "undefined" in all "field_input"
when i try to add from jquery .split
function field_include()
{
var form_id = $( ".form" ).val();
$.ajax({
url: 'ajax/field_include.php',
type: 'POST',
data: {
form_id : form_id
},
success: function(data) {
var fields = data;
var field = fields.split(";").filter(Boolean);
$.each(field, function(i, val){
var field_val = val.split(",");
$( ".addfromform" ).append('<div class="form-group"><label class="col-lg-2 control-label mt10">'+field_val[2]+'</label><div class="col-xs-10"><label for="'+field_val[1]+'" class="field prepend-icon"><input type="'+field_val[0]+'" name="'+field_val[1]+'" id="first_name" class="gui-input" placeholder="'+field_val[3]+'" autocomplete="off"><label for="'+field_val[1]+'" class="field-icon"><i class="fa fa-user"></i></label></label></div></div>').fadeIn('slow');
});
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
string from "field_include.php":
1,first_name,First Name:,First Name,1;1,last_name,Last Name:,Last Name,2;1,email,Email:,Email,3;1,job,Job title:,Job title,4;
how i can fix ?
Try chaining .filter(Boolean) to fields.split(";") to remove empty string "" at last index of field where character at last index of string is ";" which would return undefined at var field_input = val.split(','); as val would be empty string ""
var field = fields.split(";").filter(Boolean);
var fields = "1,first_name,First Name:,First Name,1;1,last_name,Last Name:,Last Name,2;1,email,Email:,Email,3;1,job,Job title:,Job title,4;";
var field1 = fields.split(";");
var field2 = fields.split(";").filter(Boolean);
$.each(field2, function(i, val) {
var field_val = val.split(",");
$("body").append('<div class="form-group"><label class="col-lg-2 control-label mt10">' + field_val[2] + '</label><div class="col-xs-10"><label for="' + field_val[1] + '" class="field prepend-icon"><input type="' + field_val[0] + '" name="' + field_val[1] + '" id="first_name" class="gui-input" placeholder="' + field_val[3] + '" autocomplete="off"><label for="' + field_val[1] + '" class="field-icon"><i class="fa fa-user"></i></label></label></div></div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
Related
I have set a code to generate dynamic tables to capture data, which will be used to send a message to the students regarding a timetable. Following generates the required user input form, so that the user can insert the data as required.
$(document).ready(function() {
var index = 1;
var tableindex = 0;
var daydd = '<select><option value="Saturday">Saturday</option><option value="Sunday">Sunday</option></select>';
$("#addRow").click(function() {
if (tableindex == 0) {
tableindex++;
$("#myTable").append("<tr data-day='" + tableindex + "'><td colspan=3>"+daydd+" " + tableindex + "</td><td><button class='dayclose' data-day='" + tableindex + "'>Close</button></td></tr>");
}
$("#myTable").append("<tr data-day='" + tableindex + "'><td>Day " + tableindex + "</td><td>row " + index + "</td><td><input type='text' data-clday='" + tableindex + "' data-subj='" + index + "' ></td><td><button class='subjclose' id='" + index + "'>Close</button></td></tr>");
index++;
});
$("#addtable").click(function() {
tableindex++;
$("#myTable").append("<tr data-day='" + tableindex + "'><td colspan=3>"+daydd+" " + tableindex + "</td><td><button class='dayclose' data-day='" + tableindex + "'>Close</button></td></tr><tr data-day='" + tableindex + "'><td>Day " + tableindex + "</td><td>row " + index + "</td><td><input type='text' data-clday='" + tableindex + "' data-subj='" + index + "' ></td><td><button class='subjclose' id='" + tableindex + "'>Close</button></td></tr>");
index++;
});
$('table').on('click', '.subjclose', function(e) {
e.preventDefault();
$(this).parents('tr').remove();
});
$('table').on('click', '.dayclose', function(e) {
e.preventDefault();
var closeday = $(this).attr("data-day");
$('tr[data-day="' + closeday + '"]').remove();
$(this).parents('tr').remove();
});
//$('.row-container[data="product_id"]').remove();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<table id="myTable">
</table>
<input type="button" id="addRow" value="add subject" />
<input type="button" id="addtable" value="add day" />
<input type="button" id="submit" value="Send Data" />
Now I am trying to capture data to be sent to a php script, so that it can send the message to a selected set of students. My message would be as follows; (consider rows 3,4,6,9 as deleted in this scenario)
Saturday Subjects
Row 1 data
Row 2 data
Sunday Subjects
Row 5 data
Row 7 data
Monday Subjects
Row 8 data
Row 10 data
I am trying to run a for each loop for this in my php script, but I do not have any idea how to achieve this with the data attributes.
How can I generate a multidimensional array to be sent to a php script using the data attributes of inputs so that it can be used to generate a foreach loop?
You can use the JQuery function like this
$.fn.onAddDefaultValue = function (options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
data: '',
profile_main_div_id: '',
server_div_id: '',
addi_id : '',
confirm_btn_id: ''
}, options);
$(settings.data).each(function(idx,obj){
var item_id = obj.item_id;
var item_title = obj.item_title;
// server pratik - 10112017 location widget interaction
var isLocationExist = false;
$("#"+settings.server_div_id).children().each(function () {
var child_div = $(this);
var localtion_value = child_div.find("span").text();
if (localtion_value == item_title) {
//child_div.find("span").css("border", "1px solid #f16262");
isLocationExist = true;
//return false;
}else {
//child_div.find("span").css("border", "0px solid #f16262");
}
});
if (!isLocationExist) {
var input_value = item_title;
var newTextBoxDiv = $(document.createElement('div'))
.attr({"class": 'customcheckbox',"style":'margin: 0px 0px 10px;'});
var chk_id = item_id;
newTextBoxDiv.after().html('<input type="checkbox" checked name="remember" id="'+chk_id+'" value="user_profile_remember_me-no">'+
'<input type="hidden" class="server_item_id" value="'+item_id+'" />'+
'<label style="float: right;position: relative;margin-right: 10px;border: 1px solid #000000;border-radius: 0px" for="'+chk_id+'">'+
'<div class="input-label"></div>'+
'</label>'+
'<span style="padding-left: 5px;" class="my-label1">'+input_value+'</span>');
newTextBoxDiv.appendTo("#"+settings.server_div_id);
//$("#"+settings.addi_id).slideUp();
//$(this).closest('#'+settings.profile_main_div_id).removeClass("additional-field-open");
// add new item
} else {
$('#'+settings.server_div_id).children().each(function () {
var child_div_appearance = $(this);
var title_v = $(this).find("span").text();
var status_v = $(this).find("input[type='checkbox']").prop("checked");
if((item_title == title_v) && (!status_v)){
$(this).find("input[type='checkbox']").click();//attr("checked",false)
// break loop
// return false;
}
});
}
$("#"+settings.confirm_btn_id).click();
//$("#"+settings.server_div_id).addClientNote({});
});
};
and remove added element like this
$.fn.removeDiagnosisValue = function (options) {
// This is the easiest way to have default options.
var settings = $.extend({
// These are the defaults.
title: ''
}, options);
$(this).children().each(function () {
var child_div = $(this);
var div_buttons = child_div.find("div");
var i = 0;
$(div_buttons).children().each(function () {
// delete icon
var child_span = $(this);
if (child_span.attr('name') == "delete") {
var img_delete = child_span.find("img");
img_delete.click(function () {
child_div.remove();
});
// break loop
return false;
}
});
});
};
I just want to ask how to get the selected value from appended select list using jquery. Please help me. Thanks in advance.
var wrapper1 = $(".column1");
array1 = ["sample1", "sample2", "sample3"];
var myRoot = window.location.origin + "/";
$.ajax({
url: myRoot + 'Payslip/GetDataFromAppend',
type: 'GET',
contentType: "application/json; charset=utf-8",
//data: JSON.stringify({ id: $this }),
async: true,
success: function (data) {
$(wrapper1).append(appendOption(data, array1[0]));
}
});
var appendOption = function (data, txtData) {
var appendfor = '<label class="col-sm-4 control-label"><label> ' + txtData + '...</label></label><div class="col-sm-7">' +
'<select class="form-control" asp-for="PayslipID" asp- items="ViewBag.PayslipID" data- val="true" data- val - required="The Payslip ID field is required." id= "PayslipID" >';
for (var i = 0; i < data.length; i++) {
console.log(data[i].value);
appendfor += '<option value="' + data[i].value + '">' + data[i].value + '</option>';
}
appendfor += '</select ></div >';
return appendfor;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group column1"></div>
The 'form-control' element is added to the page dynamically so you need to use event delegation, try this:
$(document).on('change', ".form-control", function(){
alert($(this).val())
});
'column1' should also work in place of 'document' assuming that it is a static element.
I generated elements and put them in MyDiv
$("#MyDiv").append('<input type=text class = "form-control" id=tb' + row.PropertyName + ' ' + 'value="Text' + row.PropertyName + '" />');
$("#MyDiv").append(' <input type="hidden" name="hid" value= "' + row.PropertyId + '">');
Now I need to extract the row.PropertyName and row.PropertyId
I need something like this:
var arrText = new Array();
$('#MyDiv > input[type = text]').each(function () {
var id = $(this).id.val();
var text = $(this).text.val();
var data = {
'id': id,
'text': text
}
I guess this is what you want.
$(function(){
var PropertyName = "pn1";
var PropertyId = "pn2";
$("#MyDiv").append('<input type="text" class = "form-control" id="tb"' + PropertyName + ' ' +
'value="Text' + PropertyName + '" />');
$("#MyDiv").append(' <input type="hidden" name="hid" value= "' + PropertyId + '">');
$('#MyDiv > input[type = "text"]').each(function(){
var id = $(this).val();
var text = $(this).next('input[type = "hidden"]').val();
var data = {
id: id,
text: text
}
alert(data.id + data.text);
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="MyDiv"></div>
var arrText = [];
$('#MyDiv > input[type=text]').each(function () {
arrText.push({
'id': this.id,
'text': this.value
});
});
console.log( arrText );
How can I add this javascript/html form to the database? I know only how to connect html/php with SQL...
here is the code that will allow the user to pick up the dates but its connected with javascript .. I need a way to save it into the database ..
HTML
<div id="hourForm">
<div id="Sunday" class="day"></div>
<div id="Monday" class="day"></div>
<div id="Tuesday" class="day"></div>
<div id="Wednesday" class="day"></div>
<div id="Thursday" class="day"></div>
<div id="Friday" class="day"></div>
<div id="Saturday" class="day"></div>
</div>
javascript
$('.day').each(function() {
var day = $(this).attr('id');
$(this).append('<div id="label">' + day + ': </div>');
$(this).append('<select name="' + day + 'FromH" class="hour from"></select>');
$(this).append('<select name="' + day + 'FromM" class="min from"></select>');
$(this).append('<select name="' + day + 'FromAP" class="ampm from"></select>');
$(this).append(' to <select name="' + day + 'ToH" class="hour to"></select>');
$(this).append('<select name="' + day + 'ToM" class="min to"></select>');
$(this).append('<select name="' + day + 'ToAP" class="ampm to"></select>');
$(this).append(' <input type="checkbox" name="closed" value="closed" class="closed"><span>Closed</span>');
});
$('.hour').each(function() {
for (var h = 1; h < 13; h++) {
$(this).append('<option value="' + h + '">' + h + '</option>');
}
$(this).filter('.from').val('9');
$(this).filter('.to').val('5');
});
$('.min').each(function() {
var min = [':00', ':15', ':30', ':45'];
for (var m = 0; m < min.length; m++) {
$(this).append('<option value="' + min[m] + '">' + min[m] + '</option>');
}
$(this).val(':00');
});
$('.ampm').each(function() {
$(this).append('<option value="AM">AM</option>');
$(this).append('<option value="PM">PM</option>');
$(this).filter('.from').val('AM');
$(this).filter('.to').val('PM');
});
$('input').change( function() {
if($(this).filter(':checked').val() == "closed") {
$(this).siblings('select').attr('disabled', true);
} else {
$(this).siblings('select').attr('disabled', false);
}
});
$('#Saturday .closed, #Sunday .closed').val(["closed"]).siblings('select').attr('disabled', true);
please give me a hint or a tutorial if you can't help..
You'll need to learn how to use AJAX, this will allow you to send and receive data from the database, usually you'll have some PHP which will display JSON and your AJAX will request this from the PHP page.
http://www.formget.com/submit-form-using-ajax-php-and-jquery/
Your AJAX will look something like this:
$.ajax({
method: "GET",
url: "test.php",
data: { param1 : "Bob", param2 : "Larry" },
dataType: "script"
});
This will call your PHP file "test" and pass in parameters param1 and param2
I have a JavaScript variable which should hold Razor code to be generated when a button clicked:
$("#addNewCatBtn").click(function(e){
e.preventDefault();
counter++;
var html = '<label class="col-md-2 control-label">İçerik Kategorisi</label><div class="col-md-3">'+
'#{ List<SelectListItem> modCatList = new List<SelectListItem>(); if (Model.CategoryList != null && Model.CategoryList.Count > 0) { foreach (var cat in Model.CategoryList) { modCatList.Add(new SelectListItem { Text = cat.CategoryName, Value = cat.ModCategoryId.ToString(), Selected = false }); } } else { modCatList.Add(new SelectListItem { Text = "Kategori Yok", Value = "0", Selected = true }); } } #Html.DropDownList("ModCategoryId_"+Html.Raw("counter"), modCatList, new { #class = "select2-select-00 col-md-12 full-width-fix required", #data_rule_required = "true", #data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY }) </div> '
+'<label class="col-md-2 control-label">Süreç Kategorisi</label> <div class="col-md-3"> '+
'#{ List<SelectListItem> flowCatList = new List<SelectListItem>(); if (Model.FlowCatList != null && Model.FlowCatList.Count > 0) { foreach (var cat in Model.FlowCatList) { flowCatList.Add(new SelectListItem { Text = cat.CategoryName, Value = cat.FlowCategoryId.ToString(), Selected = false }); } } else { flowCatList.Add(new SelectListItem { Text = "Kategori Yok", Value = "0", Selected = true }); } } #Html.DropDownList("FlowCatId_" +Html.Raw("counter"), flowCatList, new { #class = "select2-select-00 col-md-12 full-width-fix required", #data_rule_required = "true", #data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY, #multiple = "multiple", #size = "5" }) </div>';
$("#modFlowCatGroupDiv").html();
});
When it generates the list elements, the options come in new lines and it causes JavaScript to give Unterminated string constant error. How can I stop this?
In your code modCatList and flowCatList should be constructed outside of the JS.
If I remember correctly Html.DropDownList returns a MvcHtmlString so you could add the following in your JS:
var html = '<label class="col-md-2 control-label">İçerik Kategorisi</label><div class="col-md-3">'+
'#Html.DropDownList("ModCategoryId_"+Html.Raw("counter"), modCatList, new { #class = "select2-select-00 col-md-12 full-width-fix required", #data_rule_required = "true", #data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY }).ToHtmlString().Replace(Environment.NewLine, "") </div> '
+'<label class="col-md-2 control-label">Süreç Kategorisi</label> <div class="col-md-3"> '+
'#Html.DropDownList("FlowCatId_" +Html.Raw("counter"), flowCatList, new { #class = "select2-select-00 col-md-12 full-width-fix required", #data_rule_required = "true", #data_msg_required = ModerationWEB.ErrorMessages.NOTVALID_MODCAT_EMPTY, #multiple = "multiple", #size = "5" }).ToHtmlString().Replace(Environment.NewLine, "") </div>';
You may need to unescape the rendered code so,
$("#modFlowCatGroupDiv").html(unescape(html));
Eventually, I decided to try like below, and it worked:
var str =
'<div class="form-group"><label class="col-md-2 control-label">İçerik Kategorisi</label>' +
'<div class="col-md-3">' +
'<select class="select2-select-00 col-md-12 full-width-fix required select2-offscreen"'
+ ' data-msg-required="Moderasyon Kategorisi boş olamaz!" data-rule-required="true" data-val="true" data-val-number="The field ModCategoryId must be a number."'
+ ' data-val-required="The ModCategoryId field is required." id="ModCategoryId_' + counter + '" name="ModCategoryId_' + counter + '" tabindex="-1">' +
#{foreach(var item in modCatList)
{
#:'<option value="#item.Value">#item.Text</option>' +
}
}
'</select>'
+ '</div>'
+ '<label class="col-md-2 control-label">Süreç Kategorisi</label> '
+'<div class="col-md-3">' +
'<select class="select2-select-00 col-md-12 full-width-fix required select2-offscreen" data-msg-required="Moderasyon Kategorisi boş olamaz!"'
+ ' data-rule-required="true" id="FlowCatId_' + counter + '"name="FlowCatId_' + counter + '" tabindex="-1">' +
#{
foreach (var item in flowCatList)
{
#:'<option value="#item.Value">#item.Text</option>' +
}
}
'</select>'
+ '</div>' + '<div class="col-md-2"></div></div>';
$("#modFlowCatGroupDiv").append(str);