I have multiple div's with text box want to get the each div input box value and display it into that div itself
HTML :
<div id="product_data" class="ui-sortable">
<div class="clonedInput" id="add_attribute" style="display: block;">
<div id="add_attributes">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_2" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="clonedInput" id="add_attribute_3" style="display: block;">
<div id="add_attributes" class="woocommerce_attribute wc-metabox ">
<div id="accordion1">
<h3>
<input type="button" value="Remove" class="btnDel remove_row button" name="btnDelete1">
<strong class="attribute_name"></strong> </h3>
<table cellspacing="0" cellpadding="0" id="attribute_data" class="">
<tbody>
<tr>
<td class="attribute_name"><label>Name:</label>
<input type="text" id="attribute_name" class="attribute_name" name="attribute_names[]">
</td>
<td rowspan="3"><label>Value(s):</label>
<textarea name="attribute_values[]" cols="5" rows="5" placeholder="Enter some text, or some attributes"></textarea>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
I'm trying to get the input field value "id = attribute_name" and display the value into the " " on blur function and this was dynamic text box
$( "input" ).blur(function() {
var string = $(this).val();
$(this).parent().append(string);
});
This will append the text on removing the cursor from the input . Style it as your requirement. Atleast it should give you an idea of what to do.
http://jsfiddle.net/L4UQJ/
try this..
$("input[type='text']").on('blur', function () {
alert($(this).val());
});
Finally It's working :)
$( "input" ).blur(function() {
var string = $(this).val();
$(this).closest('div').find('h3 > strong').html(string);
});
DEMO
Since those HTML elements are generated dynamically, use this below approach.
$(document).on('blur', '#attribute_name', function () {
console.log($(this).val()); //To get the value of the textbox
$(this).val(' ');
});
Related
When you click on the buttons + Добавить место работы and + Добавить учебное заведение this object should be copied and appear for information input. 1 click = 1 clone. But I get a lot of clones. What was I wrong about? http://test.bikstart.ru/niz-vac/index2.html
$('.add-study').on('click', function() {
$('.table-vac--study').clone([true]).appendTo(".form__item__study");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form__item form__item__study">
<div class="form__item__wrap">
<img src="img/numer-quest.png" alt="">
<!--<span>1</span>-->
<div class="form__wrap">
<h2 class="h2-quest">Образование</h2>
<span>Укажите учебные заведения, в которых Вы учились или учитесь</span>
</div>
</div>
<table class='table-vac table-vac--study table-vac-none'>
<tr class='tr-vac'>
<td class='td-vac quest-title'>Учебное заведение</td>
<td class='td-vac'><input type="text" placeholder="Учебное заведение" required id="study"></td>
</tr>
<tr class='tr-vac'>
<td class='td-vac quest-title'><span class='star'>*</span> Специальность</td>
<td class='td-vac'><input type="text" placeholder="Специальность" required id="specialty"></td>
</tr>
<tr class='tr-vac'>
<td class='td-vac quest-title'><span class='star'>*</span> Год окончания</td>
<td class='td-vac'><input type="number" required id="year-ending"></td>
</tr>
<tr class='tr-vac'>
<td></td>
<td class="add-study">+ Добавить учебное заведение</td>
</tr>
</table>
<div class="pseudo-table">
<div class="pseudo-table__item">
<pseudo-table-title>Учебное заведение</pseudo-table-title>
<input type="text" placeholder="Учебное заведение" required id="study1">
</div>
<div class="pseudo-table__item">
<pseudo-table-title><span class='star'>*</span> Специальность</pseudo-table-title>
<input type="text" placeholder="Специальность" required id="specialty1">
</div>
<div class="pseudo-table__item">
<pseudo-table-title><span class='star'>*</span> Год окончания</pseudo-table-title>
<input type="number" required id="year-ending1">
</div>
</div>
<!--<span class="add-study">+ Добавить учебное заведение</span>-->
</div>
Your problem is that you have multiple elements with the class table-vac--study after you have added the first clone to the DOM:
$('.table-vac--study') //this gets all elements with the class
If you only want one element with the class, you need to specify what element in the class you want.
If you want to the closest element with the class table-vac--study, you can use DOM traversal:
$(this).closest('.table-vac--study').clone([true]).appendTo(".form__item__study");
If you always want the first element with the class:
$('.table-vac--study:first').clone([true]).appendTo(".form__item__study");
I have this code snippet from an html page:
<td class="alltablergt ">
<div class="allocsz">
<table class="table-allocsz">
<tbody>
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span>
<input class="size-quantity" type="tel" value="" name="" >
<div class="available yes"><i aria-hidden="true" class="availablespot"></i></div>
</div>
I am in the input element "size-quantity" and I would reach the "alltablergt" element.
If $this is the size-quantity element, I thought the way to reach the "alltablergt" element was:
$(this).parentsUntil(".alltablergt")
but this doesen't work.
How can I reach it?
You could use closest().
$('.size-quantity').closest(".alltablergt").addClass('highlight');
.highlight {
background: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="alltablergt ">
<div class="allocsz">
<table class="table-allocsz">
<tbody>
<tr>
<td>
<div class="sigle-sz">
<span class="label-sz">36</span>
<input class="size-quantity" type="tel" value="" name="">
<div class="available yes"><i aria-hidden="true" class="availablespot"></i>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
I have a simple filesector i have made (with links as the file names). When i click a filename the following javascript is run:
<script>
$(function () {
$(".fileSelect").click(function () {
var name = $(this).text(); //gets the name of the clicked file
var id = $(this).attr("id");// gets the id of the clicked file
$("#filehiddenid").val(id); // sets the file id, but wrongly appends
$("#fileDisplayText").val(name); //sets the display name
$("#mySelectFile").modal("hide"); //hides the modal file dialog
});
})
</script>
The value being set in the hidden field is the internal id of my file (database id), and the filename is for display.
My problem is that when i repeatedly select a new file, post the form and then selct and post then form etc. etc. Then the value from the file select is appended to the forms collection, so that when i post the form i get something like: 176, 178, 179,
as the values, instead of just 176 which is the latest value I have selected.
*edit: markup added *
This is the markup, please ignore the Razor variables, i named the id's of the input fields to match the javascript, in my code they are generated server side:
<div class="templateSetting">
<div>
<span>
<strong>
#setting.SettingData.Name
</strong>
</span> <br />
<span>#setting.SettingData.Description</span>
<input type="hidden" id="filehiddenid" name="setting_#setting.SettingData.Alias" value="#setting.Value" />
</div>
<div>
<div style="float: left; width: 40%;">
<input type="text" style="width:545px;" id="fileDisplayText" name="meta_setting_#setting.SettingData.Alias" value="#fileName" class="form-control" /></div>
<div style="width: 60%;">
Select File
</div>
<div class="templatealias">#setting.SettingData.Alias</div>
<div style="clear:both;"></div>
</div>
</div>
edit: This the entire markup, rendered:
<form action="/InteractiveApplications/EditApplication/23" id="editform" method="post" name="editform">
<section id="container">
<div id="wrapping" class="clearfix" style="padding-left:10px;width:100%;">
<div id="WorkContent">
<div class="validation-summary-valid" data-valmsg-summary="true">
<ul>
<li style="display:none"></li>
</ul>
</div>
<input data-val="true" data-val-number="The field CurrentFolderId must be a number." data-val-required="Feltet CurrentFolderId skal udfyldes." id="CurrentFolderId" name="CurrentFolderId" type="hidden" value="0">
<input data-val="true" data-val-number="The field ApplicationId must be a number." data-val-required="Feltet ApplicationId skal udfyldes." id="ApplicationId" name="ApplicationId" type="hidden" value="23">
<table style="width: 50%;padding-left: 20px;" class="tablelist">
<tbody>
<tr>
<td valign="top">
<table width="100%">
<tbody>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Name">Name</label>:
</td>
<td>
<input class="form-control" id="Name" name="Name" type="text" value="Afstemning">
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Description">Description</label>:
</td>
<td>
<textarea class="form-control" cols="20" id="Description" name="Description" rows="2">This is a poll to take when entering the library</textarea>
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="Templates">Template</label>:
</td>
<td>
Simple Poll Template
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="ApplicationData">Path</label>:
</td>
<td>
<input class="form-control" id="ApplicationData" name="ApplicationData" type="text" value="http://10.0.0.44:81/">
</td>
</tr>
<tr>
<td style="width:120px;vertical-align:top;">
<label for="BlockHostExit">Block host exit</label>:
</td>
<td>
<input checked="checked" data-val="true" data-val-required="Feltet Block host exit skal udfyldes." id="BlockHostExit" name="BlockHostExit" type="checkbox" value="true"><input name="BlockHostExit" type="hidden" value="false">
</td>
</tr>
</tbody>
</table>
</td>
<td valign="top" style="padding-left: 20px">
<img src="/InteractiveImages/689a492e-7e01-49cc-b0b3-57e23b621706.jpg" width="100%" style="text-align: center;max-width: 200px;"><br>
<input id="ImagePath" name="ImagePath" type="hidden" value="/InteractiveImages/689a492e-7e01-49cc-b0b3-57e23b621706.jpg"> <a style="color: gray" href="/InteractiveApplications/ChangePicture/23">
Change Picture
</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<div class="titleBar" style="padding-left:-10px;height:30px;border-bottom:1px solid #307AAB">
<h2> Application configuration</h2>
</div>
<div style="padding: 10px">
<div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Submit Text
</strong><br>
This is the text for the submit button
</div>
<div class="templateSettingInput">
<div style="width:50%;float:left;"> <input type="text" name="setting_submittext" value="qwer" class="form-control"></div>
<div class="templatealias">submittext</div>
<div style="clear:both;"></div>
</div>
</div>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Multiple choice
</strong><br>
This determines if the poll has multiple right answers
</div>
<div class="templateSettingInput">
<input type="hidden" id="setting_ismultiplechoice" name="setting_ismultiplechoice" value="off">
<input id="ismultiplechoice" type="checkbox" name="setting_ismultiplechoice">
<div class="templatealias">
ismultiplechoice
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#checkbox_ismultiplechoice").click(function () {
var settingId = "#setting_ismultiplechoice";
var currentVal = $(settingId).val();
if (currentVal == "off") {
$(settingId).val("on");
}
else {
$(settingId).val("off");
}
});
});
</script>
</div>
<div id="templateSettings" class="templateSettings">
<script type="text/javascript">
var answerCounter = 1;
var trueFalseCounter = 0;
$(document).ready(function () {
$("#addbutton").click(function () {
answerCounter += 1;
trueFalseCounter += 1;
$("#questioninput_question").append("<div id='answer_" + answerCounter + "'>Answer: <input type='text' name='setting_question:" + answerCounter + "' value='' class='form-control' /><input type='checkbox' name='answer_setting_question:" + answerCounter + "' />This is the correct answer <input type='button' value='Delete' class='deleteButton btn btn-warning btn-xs' id='deletebutton_" + answerCounter + "'/></div>");
});
$(".templateSettingInput").on("click", ".deleteButton", function () {
if(confirm("Are you sure you want to delete this answer?"))
{
$(this).parent().remove();
}
});
});
</script>
<div class="templateSetting">
<div class="templateSettingLeading">
<strong> Question</strong>
This is the question and the answers for the poll
</div>
<div class="templatealias">
question
</div>
<div class="templateSettingInput" id="questioninput_question" style="width:50%;">
<textarea cols="40" rows="4" name="setting_question" class="form-control">werwe</textarea>
<input style="vertical-align: top" type="button" id="addbutton" value="Add answer" class="addbutton btn btn-info btn-xs navbar-btn"><br>
<div id="answer_1">
Answer:
<input type="text" name="setting_question:1" value="wer" class="form-control">
<!--<input type='checkbox' name='answer_setting_question:1' />This
is the correct answer-->
<input type="button" value="Delete" id="deletebutton_1" class="deleteButton btn btn-warning btn-xs">
</div>
</div>
</div>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div class="templateSettingLeading">
<strong>
Show Answer to user
</strong><br>
determines if the user should see answers
</div>
<div class="templateSettingInput">
<input type="hidden" id="setting_showanswer" name="setting_showanswer" value="off">
<input id="showanswer" checked="'checked'" type="checkbox" name="setting_showanswer">
<div class="templatealias">
showanswer
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#checkbox_showanswer").click(function () {
var settingId = "#setting_showanswer";
var currentVal = $(settingId).val();
if (currentVal == "off") {
$(settingId).val("on");
}
else {
$(settingId).val("off");
}
});
});
</script>
</div>
<div id="templateSettings" class="templateSettings">
<div class="templateSetting">
<div>
<span>
<strong>
Background
</strong>
</span> <br>
<span>Please select a background image</span>
<input type="hidden" id="id_background" name="setting_background" value="172,201,173,175,172,178,178,,">
</div>
<div>
<div style="float: left; width: 40%;"><input type="text" style="width:545px;" id="text_background" name="meta_setting_background" value="611a756c4c3d338fc4ffcebf8b1979d6.png" class="form-control"></div>
<div style="width: 60%;">
Select File
</div>
<div class="templatealias">background</div>
<div style="clear:both;"></div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="mySelectFile" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Select file</h4>
</div>
<div class="modal-body">
<div class="foldertree">
<ul>
<li id="0" class="folder">
All
<ul>
<li id="173" class="file">iStock_000032787140Large.jpg</li>
<li id="174" class="file">52_fordele.jpg</li>
<li id="175" class="file">11376047043_a06bed34bd_o.jpg</li>
<li id="177" class="file">DigitalSignage.png</li>
<li id="178" class="file">mediawall_search_br.jpg</li>
</ul>
</li>
<ul>
<li id="59" class="folder">
Test interactive folder
<ul>
<li id="172" class="file">611a756c4c3d338fc4ffcebf8b1979d6.png</li>
</ul>
</li>
</ul>
</ul>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<div class="templateSettingInput">
<input type="text" name="setting_background" value="172,201,173,175,172,178,178,," class="form-control">
<div class="templatealias">background sdhsdsd</div>
</div>
</div>
<script>
$(function () {
$(".fileSelect").click(function () {
var name = $(this).text();
var id = $(this).attr("id");
var elementId = 'id_background';
var elementText = 'text_background';
$("#" + elementId).val(id);
$("#" + elementText).val(name);
$("#mySelectFile").modal("hide");
});
})
</script>
</div>
</div>
</div>
</div>
</form>
Make sure there aren't other hidden inputs on the page with the same id and view the html in your browser and verify that the value on the element is correct before jquery modifies it.
The jquery id selector (http://api.jquery.com/id-selector/) will only select the first element in the DOM that has that id.
If there are multiple hidden input elements with the same name on the form, they will all get posted to the server.
I have create one HTML with the help of AngularJS.
<form name="target" ng-submit="createAllKeywordsJSON(codeMasterList)"><!-- createAllKeywordsJSON() -->
<input type="submit" value="Save" class="myButton" name="submit" style="margin: 0px;float:right;">
<div class="category-placer2" style="width:100%">
<div class="category-header-keywords">
<div class="icon-add"><img src="images/icon-add.png" alt="Add" border="0" title="Add phone Number" /></div>
<div class="category-header-text" ><span ng-bind="dispName"></span></div>
</div>
<div class="category-base">
<div class="keywordplacer">
<table width="99%" border="0" align="center" cellpadding="0" cellspacing="0" class="keywordsList">
<tr>
<th width="60%" colspan="2">Code Master Name</th>
<th width="30%" colspan="2">Status</th>
</tr>
<tr ng-repeat="type in codeMasterList">
<td width="1%" class="">
<input type="hidden" name="codeMasterId" value="{{type.codeMasterId}}" />
</td>
<td width="60%" class="">
<input type="text" name="keywordName" value="{{type.name}}" alt="Name of Keyword" size="60" >
</td>
<td width="30%" class="">
<input type="radio" value="1" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 1) && ('true') || ('false')}}" />Active
<input type="radio" value="0" name="{{type.codeMasterId}}" alt="Name of Keyword" ng-checked="{{(type.activeInd == 0) && ('true') || ('false')}}" style="margin-left:50px;" />Inactive
</td>
</tr>
</table>
</div>
<center>
<hr style=" background-color: #ABBFC6; height: 2px; width: 90%;">
<input type="submit" value="Save" class="myButton" style="margin: 0px;"/>
</center>
<!-- <div class="table-index">P - Primary</div> -->
</div>
</div>
</form>
It will show value in editable mode.
I want to save all the list at a single click on save button. how can i do such thing using angularjs ?
Can you please help me to generate JSON data for the name as well as for radio button value ?
below is my controller:
keywordModule.controller('keywordTypeController',['$scope', '$http', 'keywordService',
function($scope, $http, keywordService) {
$scope.createAllKeywordsJSON = function() {
//alert($scope.codeMasterList.codeMasterId);
var tempItemList = [];
angular.foreach($scope.codeMasterList,function(item,index){
tempItemList.push(item);
});
alert(tempItemList);
/*keywordService.createAllKeywordsJSON().query(codeMasterList,
//Success Handler handler
function(data) {
},
//Failure handler
function(error) {
}
);*/
//alert(codeMasterList);
};
}
]);
$scope.codeMasterList would be the JSON data for your list.
You can update the value of the form fields by using ng-model instead of value. This also will bind the input values right back to the item in the list. So then you can just save $scope.codeMasterList
HTML Sample
<input type="text" ng-model="type.name" alt="Name of Keyword" size="60" >
Working Fiddle
why ajax call $.load not working when i click on <td> tag?
here is the script by the way
$("body").on("click", ".license-table td", function(){
console.log('ehhh')
var pane = $(this).parent('.license-table').data("pane");
var url = $(this).parent('tr').data("href");
$(pane).load(url, function(){
$(".table-content").css({
height: '500px'
}).jScrollPane({
autoReinitialise: true,
hideFocus: true
});
});
});
and here is the Mark up.
<div class="tab-pane" id="license">
<div class="row content-tools">
<div class="col-md-3">
<div class="options enabled">
Allocate Licenses
</div>
</div>
<div class="col-md-3">
<div class="options enabled">
Unallocate Licenses
</div>
</div>
<div class="col-md-3"> </div>
<div class="col-md-3">
<form action="">
<input type="text" name="q" class="col-md-12 search"/>
</form>
</div>
</div>
<div class="row" style="margin:0">
<div class="table-content col-md-12">
<div class="inner table-responsive pade-content-big">
<table class="table dtable license-table" data-pane="#license">
<tr>
<td width="30%"> </td>
<td width="10%">Total</td>
<td width="10%">Distributed</td>
</tr>
<tr data-href="license-details.html">
<td>Product Name</td>
<td>200</td>
<td>50</td>
</tr>
<tr data-href="license-details.html">
<td>Product Name</td>
<td>200</td>
<td>120</td>
</tr>
</table>
</div>
</div>
</div>
</div>
the console.log("ehhh") is show up in my console window, but the XHR request doesnt show up. what's wrong? :(
The .parent() function gets the immediate parent element. When you provide a selector argument, it filters the result; it does not go up the ancestor chain until it finds a matching ancestor. To do that, you should use the .closest() function:
var pane = $(this).closest('.license-table').data("pane");