With the jquery plugin "jquery-mentions-input", how could I make it so that when I choose the username that I want from the dropdown, the "#" remains in the textarea?
Right now if I type in "#UserN" and then click "username", the textarea will autocomplete to "username" but I want it to autocomplete to "#username".
Here's an example of this,
Before clicking the username:
after clicking the username:
In this case I would like the text in the textarea to be "#admin", not "admin".
How could this be done?
In jquery.mentionsInput.js, line 222:
I changed
var updatedMessageText = start + mention.value + ' ' + end;
to
var updatedMessageText = start + "#" + mention.value + ' ' + end;
This did the trick.
Related
Using the ninja forms plugin in WordPress, I currently have Name, Email, Phone as the form fields. I would like it so the Name is required, and either email OR phone be filled out for the form to submit without an error. Is this possible?
I don't see anything on their docs that mention this anywhere, I am also considering using jQuery for this if its not possible via the plugin options.
Since there were no replies on this I decided to use jQuery. Took me a while to figure out you need to run your function on nfFormReady.
It checks to see if field 1 OR field 2 has a value, if so then it enables the submit button, if not the submit button is disabled. It's not the most elegant solution but is working for what I need. Also beyond the below code, I added in an asterisk's and remove it on the other conditionally required field when one is being filled out.
$(document).on( 'nfFormReady', function() { // this is important
// settings: for 2 dynamic-required fields
var formID = '2'; // form ID
var fieldID1 = '9'; // field ID one
var fieldID2 = '12'; // field ID two
var submitID = '11'; // Submit button ID
$('#nf-form-' + formID + '-cont #nf-field-' + submitID + '-wrap input').attr('disabled', true).css({"background": "#cccccc", "cursor": "default"}); // disable submit button
// on keypress/change enable submit button
$('#nf-form-' + formID + '-cont input').on('keyup keypress focusout change', function() {
if(($('#nf-form-' + formID + '-cont #nf-field-' + fieldID1 + '-wrap input').val()) || ($('#nf-form-' + formID + '-cont #nf-field-' + fieldID2 + '-wrap input').val())){
$('#nf-form-' + formID + '-cont #nf-field-' + submitID + '-wrap input').attr('disabled', false).css({"background": "", "cursor": "pointer"}); // enable submit button
}else{
$('#nf-form-' + formID + '-cont #nf-field-' + submitID + '-wrap input').attr('disabled', true).css({"background": "#cccccc", "cursor": "default"}); // disable submit button
};
});
});
I have four radio buttons, the last being an option for "other." Clicking this radio button reveals a hidden text field so the user can explain further. This is part of a larger form that creates an email based on the options the user chose. Basically, the four radio buttons/other field need to be combined so the user's answer to that section shows up in the email, whether they pick a radio button or type in their own response. Here's my HTML:
<h1>Reason</h1>
<input type="radio" name="reason" class="reason" value="Customer requesting escalation" onclick="document.getElementById('hiddenOtherField').style.display='none'" checked>Customer requesting escalation<br>
<input type="radio" name="reason" class="reason" value="Workaround lost" onclick="document.getElementById('hiddenOtherField').style.display='none'">Workaround lost<br>
<input type="radio" name="reason" class="reason" value="Resolution overdue" onclick="document.getElementById('hiddenOtherField').style.display='none'">Resolution overdue<br>
<input type="radio" name="reason" class="reason" id="otherRadioBtn" onclick="document.getElementById('hiddenOtherField').style.display='block'">Other...<br>
<div id="hiddenOtherField" style="display: none">
<input type="text" name="reason" id="otherFreeTextField" placeholder="Please explain...">
</div><br>
I'm getting the selected value of this "Reason" section from jQuery:
$(".reason:checked").val()
But when "Other" is checked, the value of $(."reason") is "on" instead of whatever they typed. I have no idea why or how or where the word "on" comes from (it's nowhere in my code). I know I'm missing something but I don't know what. How would I make it so if the user selects the "other" radio button, whatever they type into the text field becomes the value for "reason"? I've tried a bunch of different if statements, but it's been hours and nothing is working. Please help! Thanks!
Edit - here is the Javascript code I'm using to display my values. Again, this is all a custom HTML form used to create an email based on the options the user chose. All of the other things here I'm getting the values of are working because they're straightforward.
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = $("#ticketNumber").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0ACustomer Contact Information: " + $("#contactInformation").val() + "%0A%0ARequested Action: " + $(".requestedAction:checked").val() + "%0A%0AReason: " + $(".reason:checked").val() + "%0A%0AWorkaround Available? " + $(".workaround:checked").val();
location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
};
I'm using a button at the end of my form to generate the email:
<input type="submit" value="Generate email" onclick="generateEmail()">
If you want to get the input value that the user typed you need to use :
$("#otherFreeTextField").val()
So you have to add a check if the other is checked then the reason will be the value of the input :
var reason = $(".reason:checked").val();
if( $('#otherRadioBtn').is(':checked') ) {
reason = $("#otherFreeTextField").val();
}
As a shortcut you could use :
$('#otherRadioBtn').is(':checked')?$("#otherFreeTextField").val():$(".reason:checked").val();
In you context the condition should be injected like :
function generateEmail() {
var emailTo = $("#teamName").val();
var emailCC = $("#CC").val();
var emailSubject = $("#ticketNumber").val();
var reason = $('#otherRadioBtn').is(':checked')?$("#otherFreeTextField").val():$(".reason:checked").val();
var emailBody = "Issue: " + $("#issue").val() + "%0A%0ACustomer Contact Information: " + $("#contactInformation").val() + "%0A%0ARequested Action: " + $(".requestedAction:checked").val() + "%0A%0AReason: " + reason + "%0A%0AWorkaround Available? " + $(".workaround:checked").val();
location.href = "mailto:" + emailTo + "?cc=" + emailCC + "&subject=" + emailSubject + "&body=" + emailBody;
};
This is happening because you are checking the status of textbox if visible or not.$(".reason:checked").val(). That's why it's giving on cause it's visible.
Try: $(‘.reason:textbox’).val()
I would like to convert my ng-model to a link.
I have an input binding a value. This value is a link.
Basically, I want to when you click on the text in the input (on not when you click on the textbox), it opens a link.
Here what I am trying to do:
html :
<input name="mytext"type="text" ng-model="field.savedValue" />
js:
field.savedValue = "<a href="" + $scope.baseUrl + "?etn=" + field.Values[0] + "&pagetype=entityrecord&id=" + field.lookupGuid + "">" + field.value + "<⁄a>";
but in this case, it just display me the whole content as a string (can't click on it...).
Thanks for your help !
I'm getting an extremely weird error. My radio button gets unchecked after doing the following operations:
var $page = $('[data-shortcode-page="' + shortcode + '"]', $webrock).html();
//CHECKED
console.log($('[data-shortcode-page="' + shortcode + '"] :checked', $webrock).length)
$('.webrock-page-content', $addPage).replaceWith($page);
//UNCHECKED
console.log($('[data-shortcode-page="' + shortcode + '"] :checked', $webrock).length)
Does anyone know why this is happening? Here's a jsFiddle: http://jsfiddle.net/mVB2q/1/
Thank you very much!
You are cloning a radio group with the same name. You need to update the name of the cloned radio group. Here is a simple solution where I am hardcoding in "test1" for the new group name, but you may want to modify it to fit your needs:
var shortcode = 'object';
var $page = $('[data-shortcode-page="' + shortcode + '"]');
console.log($('[data-shortcode-page="' + shortcode + '"] :checked').length);
//after cloning the radio buttons, find radio buttons and update the name attribute.
$('.webrock-page-content').html($page.clone().find("input[type='radio']").attr("name", "test1").end().html());
console.log($('[data-shortcode-page="' + shortcode + '"] :checked').length);
Updated fiddle.
I have this HTML code for radios:
<input type='radio' name='a_27' value='Yes' id='a_27_0' />
<input type='radio' name='a_27' value='No' id='a_27_1' />
I'm trying to set the selected value of the radio using this code:
var field="a_" + this.id;
$('[name="' + field + '"]').val(this.value);
console.log("name is " + field + ", val is " + this.value);
However it doesn't work, nothing happens when this runs. Here's the output from Firebug's console which occurs after the 3rd line:
name is a_27, val is Yes
Any ideas?
I would prefer a method which would also work on <select>s, so I wouldn't need to write additional/seperate code for radios and selects.
Edit: A weird problem I've noticed that although my html code gives a different value (yes/no), in firebug it shows both radios as having the value 'yes'. If I select no and click save, the javascript function still receives 'yes' instead of no. Am I doing something wrong?
Edit 2: The full function:
function processMultiOptAnswers()
{
$.each(multiOpts,function()
{
var field="a_" + this.id;
console.log("name is " + field + ", val is " + this.value);
$('[name="' + field + '"]').val(this.value);
}
);
}
your log should be if this.value is different.
$('[name="' + field + '"]').val(this.value);
console.log("name is " + field + ", val is " + $('[name="' + field + '"]').val());
To make it selected
$('[name="' + field + '"]').attr("checked", "checked");
I haven't tested this, but you might have to remove that attribute from the other ones.