Autosuggest input preventing text from being copied to other input text field - javascript

I am trying to have text copy from one text input field to the other as a user types. I have been able to accomplish this thanks to everyone's help, but I ran into a problem.
If you visit the following page and type "Sub" in the "Car Manufacturer" text box, you will see it duplicate in the "TestField" text box. However, since it is an autosuggest text box, Subaru pops up.
So, if you only type "Sub" and "Subaru" is suggested and you select it, only "Sub" is duplicated over to the next box. You will notice also that once you select "Subaru" a checkbox is generated. Maybe it would be better to duplicate from the checkbox instead? But I have not been able to accomplish this unfortunately.
You can see the problem here (remember to only typ "sub" in the field and select "Subaru" to see what I'm talking about:
http://www.forzazone.com/forza-car-designs-and-paint-jobs/forza-motorsport-4-car-designs-and-paint-jobs/new-listing_c66/
Here is the code I'm currently using to perform the duplication:
<script>
(function($) {
$('.jr-page').on('keyup','.jrAutoSuggest',function(){
$('.jr_testfield').val($(this).val());
});
})(jQuery);
</script>
If you have any ideas on how to prevent this that would be great. One idea was to simply duplicate the text from the checkbox once "Subaru" is selected from the Autosuggest.
Thanks for your help with this!

You can easily extend the onclick method the tag you are using for displaying the suggestions:
inside the tag:
<a class="ui-corner-all" tabindex="-1" onclick="javascript:clickHandler(this)">Subaru</a>
Implement the clickHandler function and set the value of the link to the test field you have created.
Hope that helps.

Related

Assigning value to a specific input where input name isn't unique

I'm kinda new to js/php programming and have to jump into someone elses code. :/
I have a page with 2 different divs that contains each a table:
<div location="A"...><table location="A"...><input type="text" id="SomeID"...>
<div location="B"...><table location="B"...><input type="text" id="SomeID"...>
On a click of a btn, it uses Ajax to get values to populate these fields. Once I have the values, the following code updates the input box
$('#SomeID').val('Obtained value').trigger('change');
All this works kinda ok except for one thing... How can I specify which $('#SomeID') to update (the one from location A or location B)?
If you want the value of location, you can use :
$('#SomeID').attr('location').val();
Use attribute selector:
$('div[location="A"]').val('Obtained value').trigger('change');//for location A
and
$('div[location="A"]').val('Obtained value').trigger('change');//for location B
Please update your question if you didn't mean to ask this so that it can be more clear.
I hope it helps

custom css error class not applying for the fields jquery validator

I have a form which contains two file input and two check box and one submit button. With my current code when the user click submit button the jquery validation will work perfectly but the problem was the custom error class was not applying and not removing correctly for example if the user click the check box that particular errorClassshould be removed this was not happening. When i search through SO I got one use full information it was mentioned instead of using border red for the check box or if the upload any file that particular field errRed class should remove and I try using outline-color but this was also not working. It might be simple somewhere I am missing some bit of code
I tried giving $('.chk_requ').removeClass('errRed_chkb'); still no use
Here is the fiddle link
kindly please help me.
Thanks in Advnace
Instead of remove class you can add empty div with id="diverr" there and give it desplay:none;
$("#diverr").text("Please select Gender");
$("#diverr").css("display","list-item");
if condition is false then
$("#diverr").css("display","none");

How to change Angularjs xeditable text/textarea behavior?

I use angularjs and xeditable in my application. I would like to change the behaviour of editable textarea and editable text to allow the validation when the user click outside.
It will be better with an example :
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()">{{item.label.text}}</span>
With this code, we can't see the buttons to validate and to cancel our choice. Moroever the enter key doesn't validate, so it's impossible for the user to validate his choice.
What I want to do is changing the behaviour of the enter key to validate the new text. And I want to add the possibility for the user to change text and when he click outsite the textarea, the new text will be save.
The problem is I have no idea of how to do that even after reading all the documentation of xeditable and I didn't find the solution on any forum.
Do you have an idea of how can I do that ?
Thank you in advance
You can add the blur attribute with submit value and couple it with onbeforesave attribute:
<span editable-textarea="item.label.text" e-rows="2" e-cols="80" buttons="no" onshow="onShow()" onhide="onClose()" blur="submit" onbeforesave="validate($data)">{{item.label.text}}</span>
Example Fiddle: http://jsfiddle.net/NfPcH/8269/

How to create a selectlist which is also a input text box?

I want to create a select-list like one shows in google mail search. The special thing of that selectlist is when we click over the select list it becomes a input text box and when we click over the right-side down arrow of that selectlist it shows a drop-down form which contains search options to search a specific mail.
I just want to know how to create a selectlist which also behaves like a input text box if we click over the box area ?
Can anyone please give me an idea to achieve this?
I hope you are looking something like this
http://ivaynberg.github.com/select2/select-2.1.html
Check it out
You can use jquery-ui autocomplete plugin.
Autocomplete - Combobox
you can have the detailed documentation here..
A jQuery UI Combobox: Under the hood
Have a look at this http://jqueryui.com/autocomplete/#maxheight. this is using JQuery

getElementByTagName function needed

I need to create a text area in which the user will input the auto responder code. I hope everyone knows this. The auto responder code will have a full form code provided by most of the auto responder services like mailchimp, aweber etc.
I need to use getElementByTagName or anything else to extract all the input elements from the pasted code.
For example I will have 3 boxes below this text area, one will have Name field, 2nd will be email field and 3rd will be a box which will add all the hidden fields extracted from the above text area.
Yes, getElementsByTagName exists already.

Categories