hiding an input element on cancel - javascript

Ι have a form where it has an input element where a user can enter the url-this happens when he clicks the edit button at which point the input fields appears.
If the user starts typing the url and clicks the cancel button what ever he was typing becomes null and the input field is hidden again from view(a class is added to the element with display:none).
And here is where the problem, appears:
If the user types something and clicks the save button the data(url) is sent to the server with an ajax request.That means the next time the forms loads the user will see the submitted url. If, at that point chooses to edit the form,and press the cancel button the submitted url is hidden from view...something not desirable of course because we are talking here about the submitted data.
How I can distinguish the one from the other,-submitted data and non-submitted data-on cancel.
Here is some code, first related to clicking the cancel button and secondly with the function which adds the classes to the input element:
$('#canceladrs').click(function() {
var urlcancel=$.trim($('input#wwwaddress').val());
save=2;
close_url(save,urlcancel);
closeaddress();
});
here is the close_url() function
function close_url(savearg,urlarg,cancelarg)
{
console.log(urlarg);
if(savearg===1)// save button clicking here
{ if(urlarg==='')
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
$('input#wwwaddress').val(null);
}
else if(urlarg!=='')
{
$('input#wwwaddress').removeClass('hideurl');
$('label[for=url]').removeClass('hideurl');
$('input#wwwaddress').val(urlarg);
}
}
else if(savearg===2)//cancel button clicking here
{if((urlarg!=='')||(urlarg===''))
{
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
}
}
}
As you see above I am trying to mark the clicking of the cancel button setting save=2.

Ok, based on your comment, you do not want to hide an input if it has text in it. In this case allow me to refer to a snippet of the code you provided:
if((urlarg!=='')||(urlarg==='')){
$('input#wwwaddress').addClass('hideurl');
$('label[for=url]').addClass('hideurl');
}
The logic here reads if urlarg has no value or if urlarg has a value add a class that hides the input and label.
Thus you are hiding the input and label in all cases.
If you do not want to hide input elements when they have content, do not add the urlarg !== '' condition.
I also recommend adding a separate event handler for cancel and save events, such that you do not have to send special signals such as save to your function.
Also, as I mentioned, jquery already has a hide, no need to do that yourself.
Finally, you may want to trim your urlarg string, because if a user enters just a space, that's essential no value, but your script will treat it as having a value.

Related

Save all edit on a form with button click

I have a form with multiple inputs, checkboxes, textarea, etc. On button click I want to execute a save values for any element that may have changed.
Due to my user base I can't always guarantee that they will press ENTER or TAB. So the button will be labeled SAVE CHANGES.
The problem is that without leaving an input element or pressing ENTER the new value is not actually written into the input, and therefore the SAVE BUTTON does not now the input value has changed.
So. How to implement code that scrubs all elements for any value changes. Something that forces all inputs to be updated with new values.
Remember that the user will edit a value and immediately select SAVE button without an ENTER or exit from the element.
You can execute your script that saves every event that occurs in the input as follows
Jquery
$("input").change(function(){
alert("The text has been changed.");
});
Javascript
object.addEventListener("change", myScript);
You could also review the documentation for keyup events so that it is saved every time the user changes the value or when the user presses a key. It could be useful in some cases.
My solution was to load all the records data retrieved into an array. Then, before exit collect all the current values on the form in another array.
When the user selects another record do a diff on the arrays and voila we have the pairs that need saving. I left the form on change as well for when the user edits a value and presses ENTER.
This way we hope to catch any changes. The new function called is also called on the Windows.beforeunload.

When there is an input box with validation in Angular, it requires two clicks to transfer control to radio button

I have an input box and a radio box. When I click on the input box and then click on the radio box, I suppose the control should transfer to the radio box immediately. Instead, the first time, it shows the error message and the second time, it transfers the control to the radio box.
You can find a plunker of the issue here: No transfer of control to the radio box except after the second click
Yes, that's because you're showing the error as a block, this shifting the radio button.
To image that, imagine that the error pops when the mouse button goes down, while the radio box is checked when the mouse button goes up.
It might be a split second, but it's enough for your user to be fooled.
I would recommend either displaying your error in another way / Findign another layout for your form, or just validate the form on submit.
To validate the form on submit, Use the second parameter of the FormBuilder.group call :
this.myForm = fb.group({...}, { updateOn: 'submit' });
Here is an example of a working form, because the error is blurred out instead of removed (hidden vs style.opacity) : https://next.plnkr.co/edit/QEEviTpocGJ7QHus?open=lib%2Fapp.ts&deferRun=1

jquery - Autocomplete how to force select from list or user can type value from list and Submit form

I have a form in which have one autocomplete text field and submit button. on Autocomplete text I have below code which uses change event which basically empty out the text field if value is not part of the list, and on button- onSubmit i check if field is null or not, if its null then it displays error saying it can not be null. All these work fine if I type in text and click somewhere else except submit button and then click on button. for eg. if I type xyzxyx (which is not part of select list) on textbox and I click on submit button then it accepts whatever value is typed and takes it to next screen. It seems like on OnSbumit event is firing first before onChange of Autocomplete field, how do i resolve this?
$(#testBox).autocomplete(
{
soruce: url,
change:function(event,ui){
if(ui.item=null)
{
$(#testBox).val('');
alert("entered item is not part of the list");
}
}
In your if you have to use a double "=":
if(ui.item==null)
Check Below Jquery Tutorial :
https://forum.jquery.com/topic/jquery-validation-on-jquery-autocomplete

Button's text is changed using javascript but when clicked, the button's text as received server-side is still unchanged

I have a textbox and a button (that says "Activate"). Once the value of the textbox is changed, the text on the button changes to "Search". In the code-behind, it checks whether the button's text says Search or Activate and has different course of actions to be executed for each. But when I click the button while it says "Search" on it, the action it still executes is for when it says "Activate".
This is the function I used which gets called by the textbox's OnKeyDown and OnPaste events:
function changeButtonText(){
var elem = document.getElementById("btnactivate");
if (elem.value=="Activate")
elem.value = "Search";}
I want to know why this happens. Clearly the button displays "Search" already. I don't get why the code-behind doesn't seem to recognize the change in the button's text. Btw, when I click the button again, it executes the action for "Search" then. I'm confused. Help!
Any http post back information only related to input types , label information are never posted. If you want to get them on the server side use the hidden fields In you javascript update the value of hidden field part of your FORM tag and then check its value on the server side and do what you want to do

Dynamically create new textbox when another is filled in

To illustrate: http://sas98.user.srcf.net/guestlist/
I want a new input field to be created when the user types something in the guest list field at the bottom.
Is it possible to do this as opposed to having to press a button with onClick?
you can add a blur event that gets fired when a first input box looses focus. THere can be an additional check to make sure someone put some text to the first input field, if there is a value add a new input field
$('#guest_list_input').blur(function() {
if($(this).val().length>0) {
$('#myPlaceWhereIWantToAddANewInputField').append('<input value='test' name='test' />');
}
});
You might want to append a new input after focus, blur or change events.
My choice would be to create a field on focus (so the user can switch to it by pressing Tab) and optionally remove the empty fields on blur events. Possibly with some fancy fadeIn/Out effects.

Categories

Resources