[Resolved] document.getElementsByName not working

[Author]

Posts

[andyM]

Hi, i'm using cred forms with some jquery that performs a lookup on a third party website, then returns the data and should populate the form.

I've tested it all outside of cred and it performs the lookup then populates the form using document.getElementsByName, however when i try to put it into CRED it performs the lookup fine and returns the correct values (they show either in an alert or in the browser console)

I thought it might be that the script wasn't working because it was above the form (that usually stops it working, so i moved it out of the js editor and into the bottom of the form editor. It still performs the lookup but still doesn't populate the form field using document.getElementsByName

i was hoping you might be able to point me in the right direction

cheers
Andy

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andy,

Thank you for contacting our support forum.

I believe you need to wait until the page is fully loaded for this to work.

Take a look at the link below.

http://stackoverflow.com/questions/1033398/execute-javascript-when-page-has-fully-loaded

Please let me know if this helps.

Thanks,
Shane

[andyM]

Hi, the code is ran on an onclick event and the page as fully loaded, which works it's just the bit that populates the fields that's not working.

I can send you access if you'd like to see it in acction but it's currently behind a secure password on our test server

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andy,

What you can do is to just send me the code so I can look at it.

I should be able to set it up on my site so that it works.

Thanks,
Shane

[andyM]

HI Shane the code is:

Fields to perform the lookup (inserted above the cred form):

<input type="text" id="myTextField" name="myTextField" />
    <button id="ajax">Submit AJAX request</button>

Then under the cred form

    <script>
      $("#ajax").on("click", function(){
        var text = $("#myTextField").val();
        $.ajax({
          type: "POST",
          url: "lookup.php",
          cache: false,
          data: { "value" : text },
          success: function(response){
    
var obj = jQuery.parseJSON(response);

document.getElementsByName('fieldoncredform.').value = obj["id"];
console.log(obj);



console.log(obj);
          },
          error: function(response){
            alert ("Ajax Error");
            console.log(response);
          }
        });
      });
    </script>

The vehicle lookup just performs a lookup on the 3rd party site and returns and object, all of that bit works it's just the bit that populates the fields that doesnt seem to work and doesnt show an error in the log.

cheers
Andy

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andy,

Replace all the $ with jQuery and see if that helps.

Thanks,
Shane

[andyM]

Hi Shane, sorry i'm not sure i understand?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andy,

There seems to be a conflict with jQuery and wordpress when the $ is used so for eg
$("#ajax").on("click", function(){
It should be
jQuery("#ajax").on("click", function(){

Also the script tags are not needed since you are placing the code in the JS editor.
Thanks,
Shane

[andyM]

HI Shane, I've updated the code as follows as that should negate the jquery issue. but it still doesn't seem to populate the field.

jQuery( document ).ready(function( $ ) {
   $("#ajax").on("click", function(){
        var text = $("#myTextField").val();
        $.ajax({
          type: "POST",
          url: "../wp-admin/vehiclelookup.php",
          cache: false,
          data: { "value" : text },
          success: function(response){
    
var obj = jQuery.parseJSON(response);


document.getElementsByName("wpcf-registration").value = obj["id"];
            //alert (obj["id"]);  
//document.getElementById("wpcf[fuel]").value = obj["similarVehicles"]["0"]["fuel"];


            
console.log(obj);
          },
          error: function(response){
            alert ("Ajax Error");
            console.log(response);
          }
        });
     
   });
});});

[andyM]

I've also tried the code below, any more ideas...again the lookup bit works fine and if i put an alert in it recieves the correct data but the element population bit doesnt work.?

   jQuery(document).ready(function( $ ) {
 $("#ajax").on("click", function(){
        var text = $("#myTextField").val();
        $.ajax({
          type: "POST",
          url: "lookup.php",
          cache: false,
          data: { "value" : text },
          success: function(response){
     
var obj = jQuery.parseJSON(response);
 
document.getElementsByName('fieldoncredform.').value = obj["id"];
console.log(obj);

          },
          error: function(response){
            alert ("Ajax Error");
            console.log(response);
          }
        });
      });
});

[andyM]

Finally i've also tried, which also returns the same results, it executes the lookup code but doesn't poupate the form field.

 jQuery("#ajax").on("click", function(){
        var text = jQuery("#myTextField").val();
        jQuery.ajax({
          type: "POST",
          url: "lookup.php",
          cache: false,
          data: { "value" : text },
          success: function(response){
     
var obj = jQuery.parseJSON(response);
 
document.getElementsByName('formfield').value = obj["id"];
console.log(obj);

          },
          error: function(response){
            alert ("Ajax Error");
            console.log(response);
          }
        });
      });

[andyM]

If it helps...if i use

document.getElementById('cred_form_2804_1-textfield-1-1480516401').value = obj["id"];

that works, but as the id of the field changes every time the form is loaded i can't use it to target those fields.

any suggestions?

[Shane Supporter Languages: English (English ) Timezone: America/Jamaica (GMT-05:00)]

Hi Andy,

What you can do is to add a class attribute to the field and then retrieve the information using the class name.

Please let me know if this helps.

Thanks,
Shane

[andyM]

Hi shane, that sounds like it might work

would that just be

<div class="cred-field cred-field-CLASSHERE">
<label class="cred-label">fieldhere</label>
[cred_field field='fieldhere' post='sample' value='' urlparam='']
</div>

or can i add a class to [cred_field field='fieldhere' post='sample' value='' urlparam='']

[andyM]

HI Shane i've added a class which shows, then tried using document.getElementsByClassName

but that doesn't seem to work either, would it help if i sent you a login so you can see it in action?

cheers
Andy