javascript select id in different forms - javascript

I am new to JS and i am trying to update option value using prompt. I have same ID element in different forms.
I have two forms and both having same IDs:dc_list_Z_side and dc_list_A_side.
Is there a way i can select ID in form using JS?
JS CODE:
function add_dc_form_down2() {
var theSelectA = form_down2.dc_list_A_side;
if (theSelectA[theSelectA.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name = prompt("Enter DC Name");
if (dc_name != null){
dc_a = document.getElementById("dc_list_A_side")
dc_a.options[dc_a.selectedIndex].text = dc_name;
dc_a.options[dc_a.selectedIndex].value = dc_name;
}
}
var theSelectZ = form_down2.dc_list_Z_side;
if (theSelectZ[theSelectZ.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name2 = prompt("Enter DC Name");
if (dc_name2 != null){
dc_z = document.getElementById("dc_list_Z_side");
dc_z.options[dc_z.selectedIndex].text = dc_name2;
dc_z.options[dc_z.selectedIndex].value = dc_name2;
}
}
return false;
}
function add_dc_form_flap() {
var theSelectA = flap_form.dc_list_A_side;
if (theSelectA[theSelectA.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name = prompt("Enter DC Name");
if (dc_name != null){
dc_a = document.getElementById("dc_list_A_side")
dc_a.options[dc_a.selectedIndex].text = dc_name;
dc_a.options[dc_a.selectedIndex].value = dc_name;
}
}
var theSelectZ = flap_form.dc_list_Z_side;
if (theSelectZ[theSelectZ.selectedIndex].value == "zzzzADD DC zzzzzz") {
var dc_name2 = prompt("Enter DC Name");
if (dc_name2 != null){
dc_z = document.getElementById("dc_list_Z_side");
dc_z.options[dc_z.selectedIndex].text = dc_name2;
dc_z.options[dc_z.selectedIndex].value = dc_name2;
}
}
return false;
}

Is there a way i can select ID in form using JS?
No.
If you are speaking about having the same form elements on the same page, using the same id (e.g. "dc_list_A_side") you cannot fetch them with document.getElementById(). The id-attribute has to have a unique value for the whole HTML page. JavaScript does not necessarily rely on valid HTML, but in this case it is simply impossible for JavaScript to achieve what you want.
Consider changing the IDs to "dc_list_A_side_a" and "dc_list_A_side_b" for example.

Related

Javascripting not working as expected, and no syntax errors returned?

Okay guys, I am trying to use JavaScript to validate a form, and then display a "Thank you" message after its all been validated with correct information. I've got it working to validate the first name, email address, and a radio selection, however I can't seem to get it to validate the state selection, or display the thank you message, but I've also used my browser's(Firefox) Dev Console to dig for syntax errors. None are displayed. Any help?
A small snip of the code is below, and a jsfiddle link to the whole code, plus the HTML is below that.
function validForm() { // reference point
/* first name, email, comments and phone */
var fname = document.form1.fname;
var email = document.form1.email;
var comments = document.form1.comments;
var phone1 = document.form1.phone1;
var phone2 = document.form1.phone2;
var phone3 = document.form1.phone3;
/* collecting the error spans for later use */
var fnErr = document.getElementById('fnErr');
var lnErr = document.getElementById('lnErr');
var emErr = document.getElementById('emErr');
var phErr = document.getElementById('phErr');
var cmErr = document.getElementById('cmErr');
var state = document.getElementById('stErr');
if(fname.value=="") {
fnErr.innerHTML = "We need your name, please.";
fname.focus();
return false;
} else {
fnErr.innerHTML = "";
}
if(email.value=="") {
emErr.innerHTML = "We need your email, please.";
email.focus();
return false;
} else {
emErr.innerHTML = "";
}
if(state.value=="none") {
fnErr.innerHTML = "Please select your state.";
state.focus();
return false;
} else {
fnErr.innerHTML = "";
}
/[A-Z0-9._%+-]+#[A-Z0-9.-]+\.[A-Z]{2,4}/i;
if(isNaN(phone1.value) || isNaN(phone2.value) ||
isNaN(phone3.value)) {
phErr.innerHTML = "If you include a phone number it should be numbers only.";
phone1.select();
return false;
} else {
phErr.innerHTML = "";
}
var notices = document.form1.notices;
var selected;
for(var i=0;i<notices.length;i++) {
if(notices[i].checked) {
selected = notices[i].value;
}
}
/* set up a message for a advert recipient */
var msg = "Thank you, <b>"+fname.value
+"!</b> Your message has been received and one of our representatives will reply to <a href='"
+email.value+"'>"+email.value+"</a> within a day or two. Relax, and enjoy the rest of the site!";
if(selected != undefined) {
document.getElementById('notePref').innerHTML = "";
if (selected == "yes") { // here's where we test the contents of "selected"
document.getElementById('fnlMsg').innerHTML = msg;
} else {
document.getElementById('fnlMsg').innerHTML = "<strong>"+fname.value+"</strong>, thank you for your feedback!";
}
var contactForm = document.getElementById('registerForm').setAttribute('class','hide');
var loseSep = document.getElementsByClassName('spec');
loseSep[0].setAttribute('class', 'hide');
} else {
document.getElementById('notePref').innerHTML = "Please make a selection:";
}
} // reference point
https://jsfiddle.net/xp5e099y/2/
first: you dont have place(div/span/etc) with id ="fnlMsg"
second: you dont have place(div/span/etc) with id ="contactForm"
then change your html
<select name="state">
with
<select id="state">
and your script from this
var state = document.getElementById('stErr');
to
var state = document.getElementById('state');
Here is your culprit 'fnlMsg' element is not defined
if (selected == "yes") { // here's where we test the contents of "selected"
document.getElementById('fnlMsg').innerHTML = msg;
} else {
document.getElementById('fnlMsg').innerHTML = "<strong>"+fname.value+"</strong>, thank you for your feedback!";
}

DTM: capture form elements that have been changed

I have a requirement to capture into eVar a string of fields that have been changed when user updated their details.
I am using DTM and am thinking how to make it work.
Firstly I wrote this code and saved it as Data Element in the DTM:
var oldMobileNo = document.getElementById('mobileNumber').value;
var oldAnotherNo = document.getElementById('additionalTelephoneNumber').value;
var oldEmail = document.getElementById('emailConfirmed').value;
document.forms['editContactVO'].onsubmit = function(){
var newMobileNo = document.getElementById('mobileNumber').value;
if(oldMobileNo != newMobileNo) {
var MobileNo = "mobile number changed";
}
else {
var MobileNo = "";
}
var newAnotherNo = document.getElementById('additionalTelephoneNumber').value;
if(oldAnotherNo != newAnotherNo) {
var AnotherNo = "additional number changed";
}
else {
var AnotherNo = "";
}
var newEmail = document.getElementById('emailConfirmed').value;
if(oldEmail != newEmail) {
var Email = "email changed";
}
else {
var Email = "";
}
return MobileNo;
return AnotherNo;
return Email;
}
var Final = MobileNo + "," + AnotherNo + "," + Email;
return Final;
Then I tried to reference it with the event based rule set on the form submit button click. The rule definitely worked until I called this Data Element. The rule stopped working.
As far as I understand this code has to be set on the page with form to be able to capture original values and it should be active when the form is updated.
Is it possible to this via DTM? If yes, how to? Or may be somebody did it in the different way?

Copy form elements by field ID instead of by field name

I found a file called copyShipping.js that allows me to copy form elements from one form to another by the click of a checkbox. However, it copies by name of each field rather than ID. Below is the code. How do I get it to copy by ID? I know there's a getElementByID on Javascript but I don't know how to implement it. Ideally I would just like the code changed for me. Thanks.
function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
var theForm = cb.form;
// The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');
for(var i=0;i<billingFields.length;i++){
var billingObj = theForm.elements[billingFields[i]];
var shippingObj = theForm.elements[shippingFields[i]];
if(billingObj && shippingObj){
if(billingObj.tagName){ // non-radio groups
var tagName = billingObj.tagName.toLowerCase();
if(tagName == 'select'){
shippingObj.selectedIndex = billingObj.selectedIndex;
}
else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
shippingObj.checked = billingObj.checked;
}
else{ // textareas and other inputs
shippingObj.value = billingObj.value;
}
}
else if(billingObj.length){ // radio group
for(var r=0;r<billingObj.length;r++){
shippingObj[r].checked = billingObj[r].checked;
}
}
}
}
}
}
It is always recommended to access the elements using Id. Also it is recommended to have id and name same.
Try this.
function eCart_copyBillingToShipping(cb){
if(cb.checked){ // Only copy when the checkbox is checked.
var theForm = cb.form;
// The number of elements must match in billingFields and shippingFields. The type of input element must also match between the arrays.
var billingFields = new Array('firstname', 'lastname', 'email', 'phone', 'fax', 'street1', 'street2', 'city', 'state_province', 'StateOther', 'other_state_province', 'postcode', 'other_postcode', 'country');
var shippingFields = new Array('shipping_firstname', 'shipping_lastname', 'shipping_email', 'shipping_phone', 'shipping_fax', 'shipping_street1', 'shipping_street2', 'shipping_city', 'shipping_state_province', 'ShippingStateOther', 'other_shipping_state_province', 'shipping_postcode', 'other_shipping_postcode', 'shipping_country');
for(var i=0;i<billingFields.length;i++){
//assuming that now array contains id (not name)
var billingObj = theForm.getElementById(billingFields[i]);
var shippingObj = theForm.getElementById(shippingFields[i]);
if(billingObj && shippingObj){
if(billingObj.tagName){ // non-radio groups
var tagName = billingObj.tagName.toLowerCase();
if(tagName == 'select'){
shippingObj.selectedIndex = billingObj.selectedIndex;
}
else if((billingObj.type && shippingObj.type ) && (billingObj.type == 'checkbox' || billingObj.type == 'radio')){
shippingObj.checked = billingObj.checked;
}
else{ // textareas and other inputs
shippingObj.value = billingObj.value;
}
}
else if(billingObj.length){ // radio group
for(var r=0;r<billingObj.length;r++){
shippingObj[r].checked = billingObj[r].checked;
}
}
}
}
}
}

Dynamic form validation with ASP variables

I have 52 members in my database. When displayed in the admin panel, each one has a form associated with it so I can make notes for each member.
Each Member has an ID so I name each form on the page like this: "frmRepNotes<%=MemberList("MemberID")%>" based on the memberID from the database. This results in something like frmRepNotes67453. I now want to validate the form before saving the notes.
How can I use that number in the JavaScript?
function validate(strid)
{
var ErrorFound = 0
if (document.'+strid+'.taNotes.value == '')
{
ErrorFound = ErrorFound + 1
}
if (ErrorFound == 0)
{
document.'+strid+'.submit();
}
}
How can this be done?
Consider refactoring to be something like this?
function validate(strid)
{
var ErrorFound = 0;
var theForm = document.getElementById("frmRepNotes"+strid);
if (theForm.taNotes.value == '')
{
ErrorFound +=1;
}
if (ErrorFound == 0)
{
theForm.submit();
}
}

Javascript Form submit is not working , issue only in internet explorer

I have form field and that form field gets submitted to the next page with the following javascript code.., the code is working fine in firefox but the form not getting submited in internet explorer.
function addarray(formId)
{
var ara = tmm.length;
//alert(ara);
for(var sds=0; sds < tmm.length; sds++)
{
var sss = tmm[sds];;
ara = ara+"*#*#*"+sss;
//alert(ara);
if(sss <= 0)
{
alert("\n\n\nYou should have atleast one submenu \n for each main menu \n\n");
return false;
}
}
var ddf = document.blcname.getElementsByTagName("input");
var i = 0;
while(i < ddf.length)
{
var dddd = ddf[i].type;
var vla = ddf[i].value;
//alert(i+"----"+vla+"-----"+dddd);
if(dddd=="text"){
if(vla == "")
{
//alert("Please fill all the required fields....");
return false;
}
}
i=i+1;
}
var setform = document.getElementById('arav');
setform.value = ara;
var formObj = document.getElementById(formId);
formObj.action = "get-code.php";
formObj.submit();
//document.blcname.submit();
}
thanks in advance
Try alternate ways of getting to this form. Give the form HTML id and a name attribute
Also watch out if you're using frames and the form is inside of a frame.
eg.
document.forms[0].submit() //if its the first form in the document
document.forms[1].submit() //if its the second form in the document
document.formName.submit() //using the name attribute.

Categories