CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Jay
Jay

Reputation: 161

Javascript only generates 1 character into field

I have a script to generate a 10 character code when a button is clicked. I want to transplant the code into the value field of a input text-box. I believe there is a conflict because the text-box is within a form that has a click(function(event) { attached.

HTML/CSS

    <div id="add_wrap">
<form method="post" action="voucher_add_post.php">
  <table width="100%" border="0" cellspacing="2" cellpadding="2">
    <tr>
      <td>Voucher value: </td>
      <td><input type="text" id="value" size="10"></td>
    </tr>
    <tr>
      <td>Code</td>
      <td><input type="text" id="code" size="20"> <button id="generate">Generate</button></td>
    </tr>
    <tr>
      <td>How many vouchers?</td>
      <td><input type="text" id="amount" placeholder="Leave blank for only one voucher" size="40"></td>
    </tr>
    <tr>
        <td>&nbsp;</td>
    <td><input type="submit" id="submit" value="Submit" /></td>
    </tr>
  </table>
</form>
<div id="message"></div>
</div>

Javascript/JQuery

<script>
  $("#submit").click(function(event) {
    event.preventDefault();

    var headline = $('#headline').val();
    var author = $('#author').val();
    var details = $('#details').val();
    var question = $('#question').val();
    var reward_img = $('#reward_img').val();
    var reward_cap = $('#reward_cap').val();
    var days = $('#days').val();

    $.ajax({
      type: "POST",
      url: "pages/comp_add_post.php",
      data: "headline="+headline+"&author="+author+"&details="+details+
            "&question="+question+"&reward_img="+reward_img+"&reward_cap="+reward_cap+"&days="+days,
      success: function(data){
        $("#message").html(data);
      }

    });
    });

    $("#generate").click(function(event) {
      event.preventDefault();

      function codeGen(length)
      {
        var code = "";
        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (var i=0; i<length; i++);
          code += chars.charAt(Math.floor(Math.random() * chars.length));

        return code;
      }
      $("#code").val(codeGen(10));
    });
</script>

The problem is it only generates a single character into the value= attribute of the input box with an ID of generate.

If I use the onClick="codeGen()" method of doing it, then it submits the form.

Upvotes: 0

Views: 64

Answers (2)

sjdm
sjdm

Reputation: 589

The for loop with the semi colon is the issue, however I would also try and simplify the JS + Jquery so it is easier to read as below:

$("#generate").click(function(event) {
  event.preventDefault();

  var code = "";
  var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

  for (var i=0; i < 10; i++)
      code += chars.charAt(Math.floor(Math.random() * chars.length));

  $("#code").val(code);
});

Hope that helps :)

Upvotes: 0

JoshG
JoshG

Reputation: 6745

I think the issue is in your for loop. You currently have it written as:

for (var i=0; i<length; i++);
code += chars.charAt(Math.floor(Math.random() * chars.length));

But the ; after the for loop declaration terminates the statement. If you rewrite it as:

for (var i = 0; i < length; i++) {
   code += chars.charAt(Math.floor(Math.random() * chars.length));
}

It seems to work.

Fiddle: https://jsfiddle.net/s3ndkpue/

Upvotes: 4

Related Questions