I want to start by saying I am not a coder but I am trying to edit code in Zendesk to auto fill and hide the required subject and description fields. Here is the code I put in the script.js at the top:
$(document).ready(function() {
$('#request_subject').val("vaccine request");
$('.request_subject').hide();
$('#request_description').val("vaccine");
$('.request_description').hide();
$('.form-field label:contains("Attachments")').hide();
$('#upload-dropzone').hide();
});
The request subject auto fills on the form but the request description will not populate. Once the form is submitted it returns an error that description cannot be blank. If anyone has any suggestions I would be most grateful. We are trying to launch this today to start pushing out vaccines next week but I cannot get this to work.
I'm sure I've made a simple mistake because I don't know enough about coding but after spending hours trying to decipher the problem I am taking a chance that someone on here can help. Thank you in advance for any assistance.
We need more information to answer your question, mainly a chunk of HTML with the form you are trying to manipulate.
$(document).ready(function() {
$('#request_subject').val("vaccine request");
$('.request_subject').hide();
$('#request_description').val("vaccine");
$('.request_description').hide();
$('.form-field label:contains("Attachments")').hide();
$('#upload-dropzone').hide();
});
In your code snippet, you have $('#request_subject').val("...") which would imply that there is a form element, probably something like this:
<input id="request_subject" type="text" value=""></input>
Right after that you have $('.request_subject').hide() which implies a different element. One with a class. Maybe this is intentional?
<div class="request_subject">
<input id="request_subject" type="text" value=""></input>
</div>
It's hard to know.
If the selectors are correct, then your code should work. Here is a Stack Overflow question about setting the values of text areas.
Based on the information in the question, this is pure speculation, though.
Related
I've encounter a very strange situation. In my troubleshooting, I have added value="test" in the text field and added console.log($('input[name*="name"]').val()); so the whole code looks like this:
$('body').on('click', 'input[type="button"][name*="review"]', function() {
console.log($('input[name*="name"]').val());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="text" name="textfield-name" placeholder="Required" value="test" >
<input type="button" name="review" value="Review" />
In the console, it will now say "test" as expected. But if I remove "test" from the text field's value and type in something random like "dsa", it will say... nothing at all! Just a blank row in the console! If I add text after test it will only show "test" and not the text I've typed in.
The code I use, is exactly the same as the code above and it worked perfectly the day before yesterday. I have not edited or added anything else during the time between 2 days ago till now, since I was on a one day long trip yesterday.
If I run the code in jsFiddle, it will execute everything as normal.
I also have tested to remove everything in my JavaScript file and only leaved the code above within $(document).ready(function() { ... }. The result is the same as mentioned. This applies also when I tested to remove everything in the HTML file and only kept the input.
I have also tested to replace .val() with .prop('value') but the result is the same.
In short, all text that I type in to the text field, are completely ignored by the website!
Excuse my language, but what the h*** is going one here?! Is this some sort of bug or what?
The problem is now solved, thanks to Rory McCrossan!
The problem was that multiple text fields with the same name, existed on the same page. I added the post ID into a data properties (data="1") and the problem was after that gone.
Many thanks for opening my eyes, Rory!
I have a multi-part form, and I was hoping to have an external next/prev navigation for it. However, I need to be able to validate each part of the form when I navigate to next.
I have the following sample form definition:
<form layout="column" name="nProfileForm1">
<md-input-container>
<label>City</label>
<input ng-model="profile.city" required="" name="nCity">
<div ng-messages="nProfileForm1.nCity.$error" ng-if="nProfileForm1.nCity.$touched&&!nProfileForm1.nCity.$valid">
<div ng-message="required">City is required.</div>
</div>
</md-input-container>
</form>
If the field is interacted with,then validation is working find and error text is correctly shown. However, I cant figure out a way to trigger the validation of all the form fields if external event takes place. It seems somewhat wrong to add own submit button to every form part. What I am looking for is something similar to what schema-form does:
$scope.$broadcast('schemaFormValidate')
Any ideas would be appreciated.
Essentially, int he following example I want the field to light up with red once I press next:
http://codepen.io/Vladimir_M/pen/OWEjOd
UPDATE: updated codePen to include one solution that I've found.
After some attempts I've found one way to achieve the effect I was after with minimal code. Getting the form's scope and setting the form's $submitted property to true does the trick. It evaluates the entire form.
$scope.doSubmit = function(){
var formScope = angular.element(nProfileForm1).scope();
formScope.nProfileForm1.$submitted = true;
}
Feel free to suggest better ways.
I am trying to solve the following problem, off course unsuccessfully.
On my website I have form with DataTextField where user put date.
When user confirms (AjaxButton) the form I need to find out the date and if the date is from "future" I need to call javascript(confirmation dialog).
The question is How to call js when condition is done?
I am helpless and appraise some help.
Without any code fragments it's hard to tell you what goes wrong but basically:
onSubmit(AjaxRequestTarget target)
{
target.appendJavaScript("if(confirm('Date in future!')){}; return;");
}
I need to find a away to insert/add a <select> (dropdown) box on click of a button. I want each click of the button to keep adding a new <select>.
Tested out some javascript/jquery functions and as I don't have much background in it, I'm having no luck!
Edit:
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
You can create a <select> element (or any other element) with $("<select/>");
The append function can be used to append html into an item.
Combining them yields:
$("#buttonToAddDD").click(function () {
var newDD = $("<select/>");
$(newDD).append("<option>New Option 1</option>");
$(newDD).append("<option>New Option 2</option>");
$("#whereYouWantToAddNewDD").append(newDD);
});
<div id="whereYouWantToAddNewDD"></div>
<input type="button" id="buttonToAddDD" value="Add DD" />
Sorry just kinda answered my own question with help from other questions to anyone wandering just view source code on this.
http://jsbin.com/ufuxuq/
that was pretty much what I wanted, but had to implement some php within the list so I had extra trouble with that, but it's all good now.
Thanks
Dynamically creating/removing a html code is easy with JQuery as explained above by Adam. However keep caution to provide users with facility to remove them as well.
Best way would be adding a id to the select box and provide a span/div with a close 'X' on clicking which either it could be removed completely
$(document).ready(function(){
{
$("#close").click({function(){
$("#selectid").remove(); // to remove the select
$("#selectid").hide(); //this would hide it but when submitted, the default/selected option shall still be submitted
$("#close").remove();
}):
});
I made a form using Javascript and HTML and have a "send" button on it that sends the results of the form to a pre-set email. In a previous form I made using just HTML, the results I received in the email were neat, each field on it's own line like this:
<br>date=
<br>time=
<br>place=
But the results from the JavaScript and HTML form run together like this:
date= time= place=
How can I get it to be neat like the pure HTML form?
Try adding <br/> at the end of each 'line'.
If you are sending a plain text email, try /n after each one to start a newline. Otherwise you need to set the type of the email to text/html and then put the <br /> after them.
I am sooo sorry about this. Turns out it wasn't the code, it was a weird thing Outlook was doing to the received email. Outlook was "removing extra line breaks" from the received email and all I ended up having to do was click the option to "restore line breaks". Thanks to Corey, Replete, Gerrat, and Ash for taking the time to help me! Again, soooo sorry to waste all you guys' time! >_<