Dependable textbox autocomplete method - javascript

page imageThis Images shows my page where i am facing a problem, i want my 'company' textbox get autocomplete by value fetched from database when i input a value in 'code'.
in a seperate page mysql queries will run to get company where code='*'
Both 'code' and 'company' are present in my databasedatabase image
Tried lots of techniques but failed to achieve anything.
Please help!!

Give us some code please.
You want to submit form and then, on new page - enter a value to new form with second textbox?
As you probably know - if you want to get data from database you must use classic SQL query in PHP file.
But - if you want do dynamicaly autocomplete second textbox without submit - you can use jQuery:
$('#your_textbox').on('input', function() {
/* This will be fired every time, when textbox's value changes. */
$('#your_second_textbox').val($('#yout_textbox').val(''));
} );

Related

Passing Variables to Bootstrap Modal and Passing Them BACK

The variable data passed to a Bootstrap modal is hard coded in HTML data-text element field using "data-text" (according to the Bootstrap examples). If the modal's purpose is to allow a user to change that, then how do I send that back to the raw HTML data-text to update it for next time?
JS newbie here. I got Bootstrap 4 modals working and updating back to the server by Ajax (with a lot of Googling of StackOverFlow thanks!). I have about 100 text elements on the page which all load the same modal for editing of the clicked text field. The field initial value is hard coded into the page HTML in the data-text field (following the Bootstrap modal example). This allows passing of the current text value to pre-populate the modal field with the existing text value for editing.
Next, the user edits the note field in the modal and clicks submit. I am able to get the value and pass it back to the server, and update the DOM with the new edited value on the page, and everything works and looks great! So far so good.
Now here's the problem. Since I have not been able to figure out how to change the data-text field (which is hard coded in the page HTML), the screen (DOM) updates with the new value after submit correctly, but the data-text field of the element does not update. It is still the old value. It means the NEXT time I click to edit the text, the OLD value of the text field is pre-populated in the modal for editing.
Question: how do I update html data-text field by JS?
I have researched this problem at great length and without Stack Overflow I would never be able to get it working, so much appreciate you guys. Dozens of questions about passing variable TO Modals, but very few about passing the data back, and NONE about setting data-text on submit by JS.
text element definition example. This is a slightly simplified example. The text field contains some data from the server database, HTML is generated by PHP/MySQL. (1 out of 100 elements on page):
<td id="note_12345678" data-toggle="modal" data-target="#noteModal" data-note="<some text from db>" class="note"><same text from server db></td>
Here is the JS on submit code. Everything works except for the last line where I am trying to change the "data-note" field of the element:
function note_submit(element) {
var note = document.getElementById('message-text').value;
ajaxcall("/ajaxclick.php" , { note:note } , null); // Simplified, all is working.
noteElement = document.getElementById('note_12345678');
noteElement.innerText = note ; // Updates the DOM with submitted note.
noteElement.data-note = note ; // <== trying to change data-note here but obviously a syntax error.
}
Everything is working fine up to that last step. Clicking the text field opens modal, pre-loads the text for editing, allows the user to edit, click submit sends to server by Ajax for update, DOM note on screen is updated by JS. if I RELOAD the page, it loads the new edited text value from server db. Everything working great. Lots of joy.
Problem is NEXT time I click on the text element to edit it, the modal loads the OLD value from data-note hard coded into HTML. How to update it upon submit by JS? Thanks a million for any assistance. So close.
Updated: page is loading jquery-3.3.1.js, and bootstrap/4.0.0/js/bootstrap.min.js. Browser is FF V66.

Insert textbox value based on logged in user?

Good day
I would like to do the following. I am using Joomla and RSForm Pro component.
I'd like to fill a textbox with a certain value based on who is logged in.
Something like this:
<?php
$user = JFactory::getUser();
if($user->id==42) { ?>
<script type="text/javascript">
$(document).ready(function(){
$("#Email1").value = "testmail#test.com";
});
</script>
}
?>
However, in RSForm pro there is 3 different PHP "areas". They are:
Script called on form display (HTML code of the form)
Script called on form process (POST Data)
Script called after form has been processed (Thank you Message)
They also mention to not include the "php" opening and closing tags, so I don't understand how I'm supposed to use the php tags when I want other scripts such as Javascript involved.
Basically, it must just set the value for 5 fields, textboxes #Email1 to #Email5, depending on the user which is logged in. When the form is submitted, the users will still receive the values.
RSForm!Pro has a hidden feature where you can assign dynamic values to textboxes. Essentially, you can add any PHP code to the field's default value and it will get executed, as long as it has the string inside it, and as long it doesn't have the PHP closing and ending tags. Check this comprehensive post on how to assign dynamic values to fields in RSForm!Pro.

jquery onchange not recognized

I'm trying to automate web form completion using visual basic. The data fields populate fine, except for one, which remains hidden. When data is put in the qualification field (which is a drop-down menu select), it is not recognized by the website as a "change," so the jquery function: "this.form.submit()" does not happen. If the person is qualified, then a hidden expiration date data field should appear.
Is there a way to trigger this "onchange" or "change" function using my VB code so the necessary data fields appear and form completion can proceed? Here's the code:
VB code to transfer data to web fields
Select Case Me.SubForm_D_P.Form.Qual.Value
Case "Qualified"
Me.Browser.Document.getElementById("ResultMenu:Result").focus
Me.Browser.Document.getElementById("ResultMenu:Result").Value = 2
'Call Delay(200)
Case "Unqualified"
Me.Browser.Document.getElementById("ResultMenu:Result").focus
Me.Browser.Document.getElementById("ResultMenu:Result").Value = 0
Case "Temporarily DQ"
Me.Browser.Document.getElementById("ResultMenu:Result").focus
Me.Browser.Document.getElementById("ResultMenu:Result").Value = 1
End Select
jquery web code: onchange=this.form.submit();

How to reload JSP with changed actionbean variable using Stripes

I am new to working with Stripes. I have a dropdown ("show ## recordrs per page") and a paginated table on the JSP page and I want to display as many records per page in this table, as the value selected in the dropdown.
The action bean has a variable "recordsPerPage" and I am not able to figure out a way to set the value of this variable and reload the table, so as to change the number of records that are displayed per page. Please help.
---- Additional Info -----
The table that I use is a displaytag table, which accepts a PaginatedList. This table is within a stripes form.
-- EDIT:
What I did is, I added a <stripes:hidden/> with the name "recordsPerPage" and set the value to be the number of records I want to display. I also added a <stripes:submit> to the same form. The "name" attribute of this submit button is the method name of the action bean I have to call. When I click on this button, I am able to do what I want. But now, I am unable to do it through javascript. Please help.
Due to some reason, calling Dom.get('submitButton').submit() or Dom.get('myFormId').submit() does not fulfill the intended purpose. Taking a clue from being able to do what I wanted from the submit button click, I made this submit button hidden and the called click() on this button from javascript. Thus Dom.get('submitButton').click() produces the intended result. If someone can give me the explanation of why the submit method did not result in expected behavior, that'll be great.

add new option to select drop down list using jsp

can anyone please suggest , how to add new option to drop down list (using select tag in html) so that user can enter the new value and on submit it should be appended to the existing list ..i am able to populate it's option list via DB dynamically and it's working properly
i am having 5 drop down mutually exclusive category lists in a single table row and i am providing them some initial options.Now i want that if the list contains user's required option then user can select from existing one ...else it should be able to add a new entry to that list & it should be simultaneously updated in DB on submit.
Follow this steps
As you are populating the drop down from databse . So its better to add the value in database only.
I think your user will be entering the value in a text box. So on submit call a method or servlet which can be used to add the value in the database field from which you are populating the drop down.
After updation make your servlet to return on the same page.
Now you can see your new option in the drop down.
Update on further problem explaination
For your problem do one thing
Give a text box in last option of each dropdown.
Select an event in which after the new value entered by user in that text box an java script function can be triggered line onmouseout.
In that function call get the text value .
Now call your servlet or method or whatever you are using to update the db with value value in the column corresponding to that drop down using Ajax or normally.
Refresh the page.
hiii,
finally it's done.
i used following function as-
function abc()
{
var myoption = document.createElement("option"); //works with both mozilla and IE
myoption.text ="mytext";
myoption.id="mytext";
myoption.name="mytext";
myoption.value ="mytext"; //Probably, the sID stuff
document.getElementById("drop_1").options.add(myoption);
}
& so on within loop.
thanks to all .

Categories

Resources