Set focus to input before validator span - javascript

I am displaying an input field followed by a br tag and a span for a validation message. There are three of these for a login form. I want to locate the first field with a visible validation message (span has a class assigned) and set focus to the input associated with the span.
My html looks like thus:
<div id="loginForm">
<label class="formLabel" for="Login_LastName">Your last name</label>
<input id="Login_LastName" name="Login_LastName" type="text" maxlength="31" style="width:200px;" /><br />
<span id="Login_LastName_validator"></span>
. . .
</div>
I am trying to use the following javascript but it's not finding the input:
$("#loginPanel").find("validationMsg:first").prev("input").focus();
I can locate the validation span it appears as I can alert the contents:
alert($("#loginPanel").find(".validationMsg:first").html());
I just cannot seem to locate the input object to set focus.
I am setting the validationMsg via javascript:
if(!$.trim($("#Login_LastName").val())) {
$("#Login_LastName_validator").html("Your last name is required<br /><br />")
.addClass("validationMsg");
loginFormValid = false;
}
else {
$("#Login_LastName_validator").html("")
.removeClass("validationMsg");
}

Found a solution. I think I had to get it past the break tag. Looks like prev() only checks the one element previous? It does not keep going?
$("#loginPanel").find(".validationMsg:first").prev().prev("input").focus();

Related

How do I make an html text input readonly but be able to update with a script?

I have these inputs that take the values of a from a in my table when I click on a row. I want to make it so that the user cannot change the input themselves but want to bring values into them when a user clicks a table row. I will be passing these inputs in as a form. I know that when the input is like this:
that it will not be updated. Is there any other way to do it with an input. Is there a different type of tag I can use that can be passed through a form?
Rather than a read-only <input>, I'd go with a combination of a display element and a hidden form element. Something like:
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="hidden" />
And in the code update both:
$('#my-display').text(yourValue);
$('#my-input').val(yourValue);
You can style the display to the user however you like and don't have to worry about whether or not it "de-activates" the form input.
If you really want it to be an inactive input, you can use the same approach:
<input class="my-input" type="text" disabled />
<input class="my-input" type="hidden" name="my-input" />
Which may even save you a line of code here, since both can now use .val():
$('.my-input').val(yourValue);
Try disabled keyword as here
<div id="my-display">This is a value</div>
<input id="my-input" name="my-input" type="text" disabled/>
You can change the value by javascript as below:
document.querySelector('#my-input').value = 'the value you want to enter by javascript';

Use javascript to replace input value into mailto

I have to email some information and I can't use PHP unfortunately. I've set up an input to get the email address of a user.
<form name="email-form">
<div class="email">
Enter your email:
<input type="email" name="email-value">
</div>
<a type="submit" class="email-link" value="Email Results"></a>
</form>
What I thought I could do is set up an onClick event like this and append the user input to the end of the mailto: part.
var emailAddy = $("email-value").val();
$(".email-link").on("click", function(){
$(".email-link").prop("href", "mailto:").append( emailAddy );
});
In don't get any errors running this code, but when the mail client comes up, the "to:" section is blank. Is this even possible?
There's a lot going on here.
$("email-value") doesn't match anything. You want $('input[name="email-value"]').
You're trying to capture the email address in a global variable on page load, before the user has an opportunity to enter anything, so it'll always be empty. Instead, you should capture that value inside the function that uses it.
.append adds a text node to the document. What you want is to concatenate the email address to the string "mailto:", so just use concatenation (+).
<a> tags don't have a value attribute. Use a text node inside the tag instead.
<a> tags don't have a type attribute, and aren't a submit button for a form. Fortunately, what you're doing is constructing a regular anchor link, so it doesn't need to be a submit button; the only use for the form is for the input field.
There's no href attribute on the anchor to begin with, so the browser won't style it as a link.
href is an attribute, not a prop: use .attr(). prop is for booleans such as checked or disabled.
You're altering the link's href during the same click event that would fire that link. That does seem to work -- somewhat unexpectedly -- but means the hover indicator on the link will be incorrect (since the href doesn't exist until the user clicks the link.) I'd use a change event on the input field instead (and ideally validate the email address before altering the link href.)
Here's a corrected version of your code:
$('input[name="email-value"]').on("change", function() {
var emailAddress = $(this).val();
// validate the address here
$(".email-link").attr("href", "mailto:" + emailAddress);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
<div class="email">
Enter your email:
<input type="email" name="email-value">
</div>
</form>
Email Results
You need to use attr instend of append to set attribut value
$(".email-link").on("click", function(){
var emailAddy = $("input[name='email-value']").val();
$(this).attr("href", "mailto:" + emailAddy);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form name="email-form">
<div class="email">
Enter your email:
<input type="email" name="email-value">
</div>
<a type="submit" class="email-link" value="Email Results">Submit</a>
</form>
Edit : your selector for the value was undefined, target by class, name, id, etc...

Creating a Text box dynamically

I have seen this functionality on multiple websites but not able to implement.
1) I have a text box.
2) I enter any E Mail ID into it.
3) If E Mail ID is valid ( validation done from database using AJAX) , a new textbox must be create dynamically on next line and this initial textbox must get converted into a non editable textbox with closing button in it. if I click on this closing button, the textbox must be removed.
Please help.
If you already know what textboxes you want after ajax success, why not just have them on the hidden on the page, then show them on your ajax success?
HTML
<div>
Name:<input type='text' id='name' onblur='checkValidEmail();'/>
</div>
<div id='emailSection'>
Email:<input type='text' id='email'/>
</div>
SCRIPT
function checkValidEmail()
{
//ajax here. On success, show our textbox
//since you're not asking about ajax, we will assume success
$('#emailSection').fadeIn();
}
CSS
#emailSection
{
display:none;
}
https://jsfiddle.net/t66b6ebL/2/
you can create any html element dynamically using javascript. And it is simple.
Example
<div id="container">
<input type="text" name="txt1" />
<!-- Here you want to insert a textbox dynamically -->
</div>
JQuery
var elementString = "<input type="text" name="txt2" />";
$('#container').append(elementString);

HTML: text input is not being submitted

I have an HTML form with many fields, including a text field, that is,
<input name="my_field" type="text"></input>
Now, this text field is being changed by tons of JavaScript, jQuery and CSS code. The result of all this interaction is that when the form is submitted, this particular text field simply gets ignored (it is like that field was not there). I am not saying it get submitted with empy text, it simply doesn't appear in the list of fields submitted...
Because there are tons of code affecting this particular text field, I don't know what is causing this weird behavior. So I was wondering if someone could tell me what kind of HTML attribute (or JavaScript code, or jQuery code, or ...) could result in a text field being ignored.
At the end of all this interaction, I get the following HTML code (retrieved using the "Inspect Element" from Chrome):
<input id="id_my_field" maxlength="200" name="my_field" type="text" class="tt-query" autocomplete="off" spellcheck="false" dir="auto" style="position: relative; vertical-align: top; background-color: transparent;" data-original-title="" title=""></input>
You should add a name attribute to the input:
<input type="text" name="myinput" />
Add the name attribute, like this:
<input name="myField" type="text"></input>

How to remove the values with jquery on deleting characters in textbox

I have this code
<input type="hidden" value="[{"value":1,"label":"Emmoia Boently"},{"value":6,"label":"John Smith"}]" name="group[users][]" id="users">
<input type="text" value="Emmoia--Boently, John--Smith, " name="autocompleter_group[users][]" id="autocompleter_userss" class="ui-autocomplete-input" autocomplete="off" role="textbox" aria-autocomplete="list" aria-haspopup="true">
Now my problem is the current javascript is adding the values from textbox to the hidden feilds.
But when i delete the text then it don't deletes from the hidden input fields.
So i want to do in jquery that when i start deleting the text in main textbox then the value gets deleted in the hidden input field as well.
just like we do in SO when we delete the tag characters in ask question page
$("#autocompleter_userss").on("keyup", function() {
$("#users").val($(this).val());
});
Fiddle
UPDATE: Seems like you're looking for a tag editor. See this post for exhaustive links :)
$('input#1').change(function(){
$('input#hidden').val($(this).val());
});
Additionally, you could try some data-binidng libaries like knockout.js among others.

Categories