All geek questions in one place

Img tag works with hard coding, but not with dynamic input through javascript

If I dynamically generate img tags, they are not displayed when they should, but if I hard-code the values, images appear there. Does anyone know why this is?

According to my jQuery, 2 image tags should be added after each input with the .inputBox class

HTML:

<form action="" method="post" id="myform">
   <label for="FirstName">First Name</label>
      <input type="text" class="inputBox" name="FirstName" id="firstName" />


      <label for="LastName">Last Name</label>
      <input type="password" class="inputBox" name="LastName" id="lastName" />

</form>

CSS

.thumb {
 visibility:hidden;
 height:0;
 width:0;
}
.thumbV {
 visibility:visible;
 height:30px;
 width:30px;
 float:right;
 padding:0 15px 0 0;
}
.borderGreen {
 border:solid 2px #24F706;
}
.borderRed {
 border:solid 2px #FD0F0F;
}

JQuery

$(document).ready(function() {


 //calls the addImages function which is below
 addImages();

 //when the input focus is blurred
 $("#firstName").blur(function() {

  //when the focus is blurred, the sendValue function is called 
  //with the value that is in the input box
  sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
 });
 //when the input focus is blurred
 $("#firstName").focus(function() {

  //when the input gains focus, the sendValue function is called 
  //with the value that is in the input box
  sendValue($(this).val(), "name.php", "#up1", "#down1", "#firstName");
 });

 $("#lastName").blur(function() {
  sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
 });

 $("#lastName").focus(function() {
  sendValue($(this).val(), "name.php", "#up2", "#down2", "#lastName");
 });


 //function to determine the number of input fields and append a number to the id of each
 //in order to display the correct thumb when a field is blurred

 function addImages() {   

  var numInputs = $("div").length;

  for(var i = 1;i<=numInputs;i++) {

   //insert the thumbs images after form elements. 
   $("<img src=\"Images/thumbs_up_48.png\" class=\"thumb\" id=\""+"up"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
   $("<img src=\"Images/thumbs_down_48.png\" class=\"thumb\" id=\""+"down"+i+"\" />").appendTo(".inputBox:nth-child("+i+")");
  } 
 }

 //function that sends the input box value to the PHP .
 //the PHP  checks if the input box value is in the correct format
 //and sends a variable of either true or false back to this function. 
 //this function takes that variable and either adds classes or removes classes to 
 //give the border a different color and the correct icon. 
 function sendValue(str, file, up, down, field) {

  //calls the ajax.php file using the post method and passes the variable str
  $.post(file, {sendValue: str}, 

  //when the PHP  sends a variable back, this function compares the returned
  //variable and makes certain <img> available and adds certain classes.
  function(data) {
   if(data.returnValue === true) {
    $(down).removeClass('thumbV').addClass('thumb');
    $(up).removeClass('thumb').addClass('thumbV');
    $(field).removeClass('borderRed').addClass('borderGreen');
   }
   else if(data.returnValue === false) {
    $(up).removeClass('thumbV').addClass('thumb');
    $(down).removeClass('thumb').addClass('thumbV');
    $(field).removeClass('borderGreen').addClass('borderRed');
   }
   else {
    $(up).removeClass('thumbV').addClass('thumb');
    $(down).removeClass('thumbV').addClass('thumb');
    $(field).removeClass('borderRed'); 
   }
  }, "json"); 
 }
});

This is the result that I am trying to achieve. When the user enters something on the tab, he is set to check the PHP script. I used firebug to make sure that the PHP script is working, and it is. If it is checked correctly, one of the classes should change to thumbV, and the input field should also contain either the .borderRed class or the .borderGreen class that it does.

<body>

<div id="container">
    <div id="outer">
        <div id="inner">    

            <div id="loginForm">
                <h2>Login</h2>
                <div class="tooltip"></div>
                <form action="" method="post" id="myform">
                    <label for="FirstName">First Name</label>
                    <input type="text" class="inputBox" name="FirstName" title="First Name Here" id="firstName" />
                    <img src="Images/thumbs_up_48.png" id="up1" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down1" class="thumb" />

                    <label for="LastName">Last Name</label>
                    <input type="password" class="inputBox" name="LastName" title="Must be at least 8 characters and contain letters and numbers" id="lastName" />

                    <img src="Images/thumbs_up_48.png" id="up2" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down2" class="thumb" />

                    <label for="Username">Username</label>
                    <input type="text" class="inputBox" name="Username" title="Must be at least 8 characters long" id="username" />

                    <img src="Images/thumbs_up_48.png" id="up3" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down3" class="thumb" />

                    <label for="Password">Password</label>
                    <input type="password" class="inputBox" name="Password" title="Must be at least 8 characters and contain letters and numbers" id="password" />

                    <img src="Images/thumbs_up_48.png" id="up4" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down4" class="thumb" />

                    <label for="Email">Email Address</label>
                    <input type="text" class="inputBox" name="Email" title="Email Address Here" id="email" />

                    <img src="Images/thumbs_up_48.png" id="up5" class="thumb" />
                    <img src="Images/thumbs_down_48.png" id="down5" class="thumb" />

                    <button type="submit" name="Submit" id="submitButton">Submit</button>
                    <input type="hidden" name="Hidden" id="hidden" />

                </form>

            </div>

        </div>
    </div>
</div>

</body>
+3
2

<input /> , div, - , javascript - . , , , , <input />.

:

, , . after() .

$('inputBox').after('my html with image');
+2

:

$('.inputBox').each(function(i) { 
  var fixedIndex = i + 1;
  $('<img></img>').addClass('thumb')
      .attr('id', 'up'+fixedIndex)
      .attr('src', 'Images/thumbs_up_48.png')
      .after(this);

  $('<img></img>').addClass('thumb')
      .attr('id', 'down'+fixedIndex)
      .attr('src', 'Images/thumbs_down_48.png')
      .after(this);
}

n- psuedo-, . , , ...

+2

Source: https://habr.com/ru/post/1730940/

More articles:


All Articles