Targeting document.getElementById to sub templates? - javascript

I cannot get certain fields in a form to unlock. I have a javascript file that works on certain pages, but not on others.
I am using document.getElementById to target form fields to disable or enable them depending on certain inputs. It works fine on one page but not another. I have double checked all my ids and they are correct. Here is the javascript:
var pass2 = document.getElementById("password").value;
if (pass1 == pass2) {
//start profile
document.getElementById("premium-text").innerHTML = "Congratulations! You have unlocked the premium fields!";
document.getElementById("premium").style.background = "#d1fdd3";
document.getElementById("premium").style.borderColor = "#019408";
document.getElementById("description").disabled = false;
document.getElementById("fax-number").disabled = false;
document.getElementById("facebook-url").disabled = false;
document.getElementById("twitter-url").disabled = false;
document.getElementById("google-plus-url").disabled = false;
document.getElementById("linkedin-url").disabled = false;
document.getElementById("type").disabled = false;
document.getElementById("city").disabled = false;
document.getElementById("status").disabled = false;
document.getElementById("price").disabled = false;
document.getElementById("bedrooms").disabled = false;
document.getElementById("bathrooms").disabled = false;
document.getElementById("size").disabled = false;
document.getElementById("property-id").disabled = false;
document.getElementById("video-url").disabled = false;
document.getElementById("featured").disabled = false;
The only difference in the pages is one has the form fields in the template (form ids are directly in edit-profile.php) and the other page pulls in the form fields from a sub template that has the ids in it (submit-property.php pulls form fields from a sub template partials/templates/submit-form.php).
What do I need to do to target the fields that are pulled in from the sub-template? The id gets pulled into the page source code so I assumed the document.getElementById would work fine, but it is not for some reason.
On this page the javascript is working but not on this page. You have to create an account to have access to these pages. The user is test1 and pass is testpass.
The password to unlock the form fields is QuL7eD

Make sure you don't have same multiple ids. If you can post your code I'll be able to assist you better.

I split the Javascript into two seperate files and that seemed to work. I can only assume this had something to do with the fact that there were different field ids on each page and when the document.getElementById ran and didn't find all the ids (since some were on a different page) that is why it wasn't working.

Related

Trying to collect parameters from URL and submit into CRM with form

I have a multi page form.
Page One has a few fields that get passed into the second form, via GET method, and it auto fills the first four fields of the second part of the form.
Page two has a few more questions, and when you submit it, it submits into our CRM(vanillaSoft), and leads to a thank you page.
My current issue:
I want to be able to take an affiliate link, such as:
http://something.com/step-one.html?AFFILIATE_ID=#affid#&SUB_ID=#s1#
I need to dynamically populate the AFFILIATE_ID parameter with a unique transaction ID, and the SUB_ID with a unique ID as well.
I currently have two fields on my first page with hidden fields, ex:
<input type="hidden" name="SUB_ID">
<input type="hidden" name="AFFILIATE_ID">
But that isn't working. I need this date to be sent into the CRM I use.
Any advice?
Thanks!!!
Your current setup will work if you set your form submit method to GET. You probably have it set to POST.
Setting your form method to GET will put those hidden fields in the URL, like you are expecting.
On the last form, set that one to POST (to POST to the server).
You can grab the Query string with JavaScript, like this:
var getParamValue = (function() {
var params;
var resetParams = function() {
var query = window.location.search;
var regex = /[?&;](.+?)=([^&;]+)/g;
var match;
params = {};
if (query) {
while (match = regex.exec(query)) {
params[match[1]] = decodeURIComponent(match[2]);
}
}
};
window.addEventListener
&& window.addEventListener('popstate', resetParams);
resetParams();
return function(param) {
return params.hasOwnProperty(param) ? params[param] : null;
}
})();​
How can I get query string values in JavaScript?
You could also send both POST and GET methods. But POST can be done only on server side, where JavaScript is Client-side scripting language.
<form method="POST" action="form.php?a=1&b=2&c=3">
PHP -> Send both POST and GET in a form
How to read the post request parameters using javascript

Custom validation script on submit for PDF - Can't get it working

I'm working on designing a new process for internal job submission for work which now involves javascript for it to work effectively.
Scripting is not my forte but that hasn't deterred me, I've been able to find three different pieces of code to insert into the various buttons and fields and they've done what they should do. My problem is I need to combine some of these for an extra validation on submit. This is where I fall short.
The process:
There is a required field in the form which currently runs a custom validation script to check a certain format specific to the code needed for a job. This runs well and I was even able to add an alert and hint images that show when incorrect and a little tick when correct. Beautiful.
The second major part of the form is in the submit button. I hacked together a code which not only emails the submitted form with fields as the subject line but also makes all fields read only before doing so. Brilliant.
Here's the messy part. A user can enter a correct or incorrect required code and the validator does its bit but that doesn't stop them from still submitting the form. Fine. I can fix that by running the validator again on the submit button so it not only gives user feedback on blur of the required field but again validates on submit so if the field is incorrect the submit stops until the user has the correct value in the field. This is where my knowledge stops like a cliff edge and I can't seem to build a bridge.
I've tried numerous ways of calling the field value then just running the same validation script with some if and else statements but it just doesn't work.
Can anyone help? Current code for submission button below but keep in mind that the validation section of this code is also attached to the required field directly (this affects it?):
function OR_Stuff() {
var ProjectTitle = getField("ProjectTitle").value;
var Brand = getField("Brand").value;
var Name = getField("Name").value;
var Noosh = getField("INT_NooshCode").value;
for (var i = 0 ; i < this.numFields ; i++) {
var f = this.getField(this.getNthFieldName(i));
if (f.type != "Submit") // Change f.type to button name in form that the action is applied to
{
f.readonly = true;
}
}
this.mailDoc({
cTo: "email",
cBcc: "email",
cSubject: "NEW JOB: "+Brand+" - "+ProjectTitle+" - "+Noosh,
cMsg: "Thanks "+Name+" for sending through this job."
});
}
var re = /^\d{5}[A-Z]\d{2}$/
if (re.test(INT_NooshCode.value) == false) {
this.getField("RequiredAlert").display = display.visible;
this.getField("NooshTick").display = display.hidden;
app.alert("Sorry, we can't start a project without a Noosh code. \n\nPlease enter a valid Noosh code EG: 34256P02");
}
else {
OR_Stuff();
}

basic javascript validation for two identical forms on one page

The site I'm building requires two identical forms on each page that sends the data to the same place, one form in the sidebar, and the other form in the footer. All I am trying for is light weight javascript that will kick out an error message if the user tries to submit the form when any or all of the required fields are left blank. Here's my issue:
Everything works as I intended for the sidebar form, however the javascript isn't treating the form placed in the footer as it does the sidebar form. When all form requirements are satisfied within form #2, it doesn't process the data and only shows the error message because I'm assuming it thinks the form is blank since the other form is blank.
I understand that there's likely a conflict of interest going on and the javascript engine is confused due to the input id's being exactly the same (they nned to be for this project since it involves salesforce). I already have bullet proof spam protection built into the php file that processes the form data, I just need some basic client-side validation to prevent the user from submitting the forms with any missing 'required' data. Like I said, everything works as I want it to with the first form, but not at all with the second. Can anyone help me with this because I don't really know where to start. I'm still relatively new to working with javascript so I apologize if what I have written is mess.
form #1 (in the sidebar)
$("#messageSent").hide();
$("#form1").submit(function(ev){
ev.preventDefault();
var fname = $('#first_name').val();
var lname = $('#last_name').val();
var phone = $('#phone').val();
var email = $('#email').val();
var condition = $('#condition').val();
var relationship = $('#relationship').val();
var inquiry = $('#inquiry').val();
if(fname && lname && phone && email && condition && relationship && inquiry){
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $("#form1").serialize(), // serializes the form's elements.
success: function(data)
{
data = $("#messageSent").fadeIn(),
$("#form1").fadeOut()
}
});
} else {
alert("You must complete the required fields before submitting the form.")
return false;
}
});
form #2 (in the footer section)
$('#messageSent-bottom').hide();
$("#form2").submit(function(ev){
ev.preventDefault();
var fname = $('#first_name').val();
var lname = $('#last_name').val();
var phone = $('#phone').val();
var email = $('#email').val();
var condition = $('#condition').val();
var relationship = $('#relationship').val();
var inquiry = $('#inquiry').val();
if(fname && lname && phone && email && condition && relationship && inquiry){
$.ajax({
type: "POST",
url: $(this).attr('action'),
data: $("#form2").serialize(), // serializes the form's elements.
success: function(data){
data = $("#messageSent-bottom").fadeIn(),
$("#form2").fadeOut()
}
});
} else {
alert("You must complete the required fields before submitting the form.")
return false;
}
});
When you use $('#the-id'), it only grabs the first one on the page (since you really shouldn't have multiple elements with the same id).
You could try adding something like the following:
var fname = $(this).find('#first_name').val();
This will keep it in the context of the current form. Though I would probably just prefix the ids since you already have separate submit functions.

Validating drop down menu JavaScript

I'm working on an existing site with a contact form that's using JavaScript to validate the fields. The original developer wrote the JavaScript and it isn't validating one of the fields correctly. the Field is a dropdown list and it has a default value that they don't want to be selectable, so I need it to return an invalid response if the default option is selected to force the user to make a selection.
Any help would be greatly appreciated.
// Check to make sure Area of Interest is Valid
var areaVal = $("#req_area").val();
var areaRegexObj = /^\s*[\w\s]*\s*$/;
if (areaRegexObj.test(areaVal)) {
isValid = (isValid == false) ? false : true;
} else {
$("#req_area").val("Please specify your Area of Interest");
isValid = false;
}
Try
var areaVal = $("#req_area option:selected").val();
if (!areaRegexObj.test(areaVal))
$("#req_area").val("Please specify your Area of Interest");
It is a good idea to have server side validation (if not already) so that a user won't disable JS and submit the form anyway.

Modifying form values onSubmit but hide from user

Im attempting to modify a JAvascript login form. The form action calls a DLL so I cant modify it to include the modifications I want to make.
Here is the javascript function Im using:
function SubmitForm() {
var Domain = "#domain.com"
var txtBox = document.getElementById('username');
if(txtBox.value.indexOf("\\") != -1){
return;
}
if((txtBox.value.indexOf("#") == -1) && (txtBox.value != "")) {
txtBox.value += Domain;
return;
}
}
Basically checks the username for \ and # chars first, if it doesnt contain those values it adds the Domain to the username.
Ive added this to the <form> onsubmit="return(SubmitForm());" to calls and use this function. However I dont want the user to see the domain been added to the username.
Is there any other way to do this>
Don't modify the input box, then. Rather have the onSubmit handler write whatever you want into a type="hidden" field which is used instead.
If you absolutely can't change this on the server side, you could always change the ID of your username input field, and create a hidden field with an ID of username that you can populate with the user's input plus your domain.

Categories