I have around 600 Records in a table. These are the names of Items as displayed in the image. To issue Items to users, we at the Stationery first enter the Quantity of each Item to be issued and then submit the form.
What I want to do is this:
I want this form to be dynamic. We should enter the name of the Item (This I will do using Autocomplete). Then We want to enter the Quantity, and then Remarks. After finishing one such Record, I want to display a button Make another entry. And this button should generate three text boxes: Item, Quantity, and Remarks ... and again upon clicking the same button, one more such row should be generated...
Just like in Android mobile phone, a single contact can have many phone numbers. And upon entering one phone number, there comes a button which says Add another phone number. I want to do something like this.
Please help.
As of now, I am displaying all the records in the table in an HTML form using PHP loops, which is a tedious task and a bad design.
Can you please tell me if there is any way out.
Thanks in advance.
You can use jQuery to add the elements on click of a certain button.
As example:
html:
<html>
<head>
...
</head>
<body>
<div class="items">
<div class="item1">
<input type="text" name="...">
....
</div>
</div>
<button class="addElements">Add Item</button>
</body>
</html>
javascript/jquery:
$('button.addElements').on('click', function() {
$('<div class="item2>....</div>').appendTo('.items');
});
In each itemX div you will put your input's and everything you need for one item.
Related
I have a Post Text Item at the end of my text fields.
When I click on it, it shows a PopUp, that retrieves a key to insert in one of my tables. It is possible that after I close the PopUp, the Post Item disappear from the screen?
I call the popup this way:
<a href="javascript:callMyPopup(836,'P831_AC_KEY_1','P831_AC_KEY','P836_AC_KEY','P836_AC_KEY_1');">
<img src="/i/list.gif" title="Select Service" width="13" height="13" alt="Popup Lov" />
</a>
<div id = "msg1" style="color:red"><strong></strong></div>
Thanks in advance!
I figure a way to trick the user. The original field is shown with a server side condition, where item IS NOT NULL. When Item IS NULL, I hide the other. It is a workaround but it works. And the user will see like the button hides.
Maybe someone can find this "solution" easy or can come with a better idea.
Thanks anyway!
I have multiple reason codes (For ex: RC1, RC2...). For each of these reason codes, I want to give the user a text box in which they can enter some comments. Also give them the option of adding multiple text boxes for each reason code.
To allow the user to add a dynamic text box, I have a button which allows the user to do so. If there was only one reason code, I can easily just just append a text box to the pre-existing text box using jquery (Using something like this: JQuery adding class to cloned element).
However since I have multiple reason codes(over 200) it doesnt make sense of having button for each reason code in Jquery. Is there a way for me to search by a basic identifier.
I have pasted the contents of the HTML file generated by my JSP file.
<div id="Reasoncode1">
<div id="inputTextBox_Reasoncode1">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode1">
+</button>
</div>
</div>
<p>
Reason code2
</p>
<div id="Reasoncode2">
<div id="inputTextBox_Reasoncode2">
<input type="text" placeholder="Add some text"/><button class="button_Reasoncode2">
+</button>
</div>
</div>
My Jquery attempt is:
$(".button_Reasoncode1").click(function() {
$('#Reasoncode1').clone().insertAfter('#inputTextBox_Reasoncode1');
});
$(".button_Reasoncode2").click(function() {
$('#Reasoncode2').clone().insertAfter('#inputTextBox_Reasoncode2');
});
I dont want to do this for each and every reason code, i was wondering if there is a better approach to this.
My JSFiddle: https://jsfiddle.net/mvp71L61/
Assuming all buttons are statically added to the DOM,
$("button[class*='button_Reasoncode']").click(function() {
var rCode = $(this).attr('class').match(/\d+/g)[0];
$("div[id='Reasoncode'+rcode]").clone().insertAfter("input[id='inputTextBox_Reasoncode'+rcode]");
});
I have a HTML <div></div> table with 8 rows and 2 columns: Food and Calories. I want to use javascript to insert text into specific cells.
I have an html input text box where the user can enter a type of food (out of 8 choices).
Certain foods are always placed in certain rows. For example,
Apple = Row 1
Banana = Row 2
Blueberry = Row 3
etc...
The user's entry is always on Column 1. The calorie count automatically returned by the website is always on Column 2.
What I'd like to happen:
When the user enters the food, it should get placed into the appropriate row based on the food chosen (let's say the user chooses Apple, so that falls on Row 1 Column 1 for this example).
If Row 1 Column 1 is populated by the user's entry, then Row 1 Column 2 gets automatically populated with the number of calories (which will, for now, be manually inserted into the code).
When the user enters the next food, it gets placed into the appropriate row again. Let's say Row 4 Column 1. So then Row 4 Column 2 would be automatically populated with the calorie count.
I am unsure if JQuery is able to accomplish sorting text into specific rows/columns like this.
CSS:
div { display:table-cell; border:1px solid; }
HTML:
<div id=master>
one<br>two
</div>
<div>
three
</div>
Can anyone assist with what this code?
This is a brute-force approach. There are more efficient ways to create this for when you have 100's of rows, but this way is easier to read, especially if you have only 8 rows.
First create your grid using row and col classes.
HTML:
<input id="food-input" type="text" placeholder="ENTER A FOOD">
<input id="btn-submit" type="submit">
<div class="row-1">
<div class="col-1"></div>
<div class="col-2"></div>
</div>
<div class="row-2">
<div class="col-1"></div>
<div class="col-2"></div>
</div>
<!-- ...etc, etc. -->
Then, you can get the value of the input field when you click on the submit button on("click", callback) or whatever event you wish.
JavaScript
$("#btn-submit").on("click", function(){
var entry = $("#food-input").val();
switch(entry){
case "food-1":
$(".row-1 .col-1").html(entry);
$(".row-1 .col-2").html("380 calories");
break;
case "food-2":
$(".row-2 .col-1").html(entry);
$(".row-2 .col-2").html("125 calories");
break;
//... etc, etc
}
});
I don't recommend you use a text input field because the user could type millions of things that won't match your switch/case statement. You should consider a dropdown menu instead.
Edit: I added a submit button, so your code executes on the "click" event on that button.
I want to search multiple HTML files from a separate page, where I search for text from all the divs which has a specific id for each, whole id containing matched search term will be displayed on the search page in list.
The div list looks like this :
<body>
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
Please note that I want to perform search from different page and want to display results there with links to the searchable page.
For now I was searching like this :
HTML
<body>
<input type="text" id='search' />
<div class='vs'>
<div id='header 1'>content 1 here </div>
<div id='header 2'>another text </div>
<div id='header 3'>whatever </div>
</div>
</body>
JavaScript
$('#search').on('input', function () {
var text = $(this).val();
$('.vs div').show();
$('.vs div:not(:contains(' + text + '))').hide();
});
It is working on the fiddle here, but I don't want it to work like this, I want to do the search from a separate page remotely and display results there with link to this page.
Solution with jQuery and AJAX:
<form id="searchForm">
<input type="text" id="search"/>
<input type="submit" name="Search!" />
</form>
<div id="resultContainer">
</div>
<script type="text/javascript">
$("#searchForm").submit(function(e) {
e.preventDefault();
var results = $("#resultContainer");
var text = $("#search").val();
results.empty();
$.get("http://example.com/", function(data) {
results.append($(data).find("div:contains(" + text + ")"));
});
});
</script>
Fiddle (This fiddle enables you to search for content on the jsfiddle page, try for example JSFiddle as search term.)
Note however that this does not work cross-domain, because browsers will prevent cross-site scripting. You didn't describe your use-case clear enough for me to know whether you're okay with that.
You'll want to look at using PHP file_get_contents to retrieve the HTML contents of the external page, and from there analyze the data in the <div>s that you are interested in. Ultimately, you'll want to store each individual search term in a JavaScript array (you can create JavaScript arrays dynamically using PHP), and then create search functionality similar to example you posted to search all the elements in your array.
So on page load, you'll want to have a <div> in which you are going to list all the elements from the array. You can list these by looping through the array and displaying each individual element. From there, you will want to call a function every time the user enters or deletes a character in the <input> box. This function will update the <div> with an updated list of elements that match the string in the <input> box.
This is the theory behind what you are trying to accomplish. Hopefully it will give you some direction as to how to write your code.
Update:
If you're looking for a JavaScript only solution, check out a JavaScript equivalent of PHP's file_get_contents: http://phpjs.org/functions/file_get_contents/
From here, you can maybe look at using .split to break up the list. Ultimately, you're still trying to store each individual search term as an element in an array, it's just the method that you retrieve these terms is different (JavaScript as opposed to PHP).
Perhaps I was emphasizing too much on PHP, perhaps it's because it's the web development language I'm most familiar with. Hope this JavaScript-only solution is helpful.
What I am making is basically is a user profile that has a text box for description added by the user about himself/herself. Although I have a separate page where the user can edit the profile, but I want to provide a feature that when a user hovers over his description box then he sees an edit button.
If the user clicks that button, then he/she can edit the description field there itself, and the backend will be updated using Ajax. The ajax call and the backend processing is simple, but how can I replace the html with a textarea and submit button and again put back the original html using javascript.
Here is what my html look like
<div id="personalText" >
edit
<p id="descText">{{profile.desc}}</p>
</div>
When somebody clicks editButton I want to replace the html inside personalText with a textarea containing the original text in descText, and an update button. And when the user edits the text and click update, I will update the backend model and again put the <a> tag and the <p> tag.
Can anybody help. I seem to know how to do parts of it, but can't figure out how I will replace the original structure on update click.
Instead of creating/destroying DOM elements an option would be to have the edit <textarea/> hidden.
<div id="personalText" >
<div class="display">
edit
<p id="descText">{{profile.desc}}</p>
</div>
<div class="edit" style="display:none;">
<input type="submit" value="Update"/>
<textarea>{{profile.desc}}</textarea>
</div>
</div>
Then your jQuery can simply toggle the elements and handle your ajax post.
$("input[type='submit']").on("click", function() {
$.ajax({
url:"/your/url/"
}).success(function(){
$(".display, .edit").toggle();
$("#descText").html($("textarea").val());
});
return false;
});
Example on jsfiddle
$('#editButton').click(function(){
var text = $('descText').text();
var textArea = $('<textarea></textarea>');
textArea.value = text;
$('#personalText').replaceWith(textArea);
});