admin管理员组

文章数量:1403452

I am new in JQuery. I was playing with some JQuery, I visited this jsfiddle . I want to make exactly form like this. I copy all the code into my test.html. Here is my code.

<html>
<head>
<title>
    TEST
</title>

<script>

$(".container").on("change", ".a2 input[name^='selection_']", function 
(event) {
if ($(this).val() == "name") {
    $(this).parent().find('.url').css({
        'visibility': 'hidden',
            'display': 'none'
    });
    $(this).parent().find('.text').css({
        'visibility': 'visible',
            'display': 'block'
    });
  } else {
    $(this).parent().find('.text').css({
        'visibility': 'hidden',
            'display': 'none'
    });
    $(this).parent().find('.url').css({
        'visibility': 'visible',
            'display': 'block'
    });
    }
  });

$('.clone').click(function () {
var p = $('.a2').length;
var cloned = $('.a2:first').clone()
    .find('input:radio').attr('name', 'selection_' + ++p).end()
    .appendTo('.container');
});
</script>

<style>
.a2 .url {
visibility:hidden;
display:none;
 }
</style>

</head>
<body>
<div class="container">
<div class="a2">
    <input type="radio" name="selection_1" value="name" checked="checked"
    />Name
    <input type="radio" name="selection_1" value="url" />URL
    <div class="text">
        <textarea name="name[]">Enter name:</textarea>
    </div>
    <div class="url">
        <textarea name="url[]">http://</textarea>
    </div>
</div>
</div>
<input type="button" class="clone" value="Clone" />





</body>
</html>

The result of this code is, the button clone not working, same with the radio button. My question is, how to copy the jquery code in jsfiddle into html form. Thanks in advance

I am new in JQuery. I was playing with some JQuery, I visited this jsfiddle . I want to make exactly form like this. I copy all the code into my test.html. Here is my code.

<html>
<head>
<title>
    TEST
</title>

<script>

$(".container").on("change", ".a2 input[name^='selection_']", function 
(event) {
if ($(this).val() == "name") {
    $(this).parent().find('.url').css({
        'visibility': 'hidden',
            'display': 'none'
    });
    $(this).parent().find('.text').css({
        'visibility': 'visible',
            'display': 'block'
    });
  } else {
    $(this).parent().find('.text').css({
        'visibility': 'hidden',
            'display': 'none'
    });
    $(this).parent().find('.url').css({
        'visibility': 'visible',
            'display': 'block'
    });
    }
  });

$('.clone').click(function () {
var p = $('.a2').length;
var cloned = $('.a2:first').clone()
    .find('input:radio').attr('name', 'selection_' + ++p).end()
    .appendTo('.container');
});
</script>

<style>
.a2 .url {
visibility:hidden;
display:none;
 }
</style>

</head>
<body>
<div class="container">
<div class="a2">
    <input type="radio" name="selection_1" value="name" checked="checked"
    />Name
    <input type="radio" name="selection_1" value="url" />URL
    <div class="text">
        <textarea name="name[]">Enter name:</textarea>
    </div>
    <div class="url">
        <textarea name="url[]">http://</textarea>
    </div>
</div>
</div>
<input type="button" class="clone" value="Clone" />





</body>
</html>

The result of this code is, the button clone not working, same with the radio button. My question is, how to copy the jquery code in jsfiddle into html form. Thanks in advance

  • javascript
  • jquery
  • html
  • css
Share Improve this question asked Jun 16, 2017 at 3:19 Azim AzmanAzim Azman 971 gold badge1 silver badge9 bronze badges 6
  • 2 include the jquery script in your html make sure you load the jquery script before all you code – guradio Commented Jun 16, 2017 at 3:20
  • You have not included the main jQuery script in your code. Add that in your html head and your code should work – Colwin Commented Jun 16, 2017 at 3:21
  • how to include it ? i have include this <script src="code.jquery./jquery-1.7.2.min.js"></script> but still not working – Azim Azman Commented Jun 16, 2017 at 3:22
  • put your code just before the </body> or put your js inside document .ready – guradio Commented Jun 16, 2017 at 3:25
  • a) include jquery, b) wrap your code in $(function() { ... your code ... }); so your code waits for DOM to be ready before accessing DOM – Jaromanda X Commented Jun 16, 2017 at 3:33
 |  Show 1 more ment

3 Answers 3

Reset to default 3

Download JQuery or use its CDN (the same as the one in the snippet), then put it inside the head above all other js files (if you have more) so that JQuery will be loaded first before all the other scripts

It would be preferable if you include the script after the body tag so that all elements have been loaded before the scripts fire.

Note: I didn't separate the css and scripts in the snippet so that OP can see where to place the needed ponents

<html>

<head>
  <title>
    TEST
  </title>
  <script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <style>
    .a2 .url {
      visibility: hidden;
      display: none;
    }
  </style>

</head>

<body>
  <div class="container">
    <div class="a2">
      <input type="radio" name="selection_1" value="name" checked="checked" />Name
      <input type="radio" name="selection_1" value="url" />URL
      <div class="text">
        <textarea name="name[]">Enter name:</textarea>
      </div>
      <div class="url">
        <textarea name="url[]">http://</textarea>
      </div>
    </div>
  </div>
  <input type="button" class="clone" value="Clone" />
</body>
<script>
  $(".container").on("change", ".a2 input[name^='selection_']", function(event) {
    if ($(this).val() == "name") {
      $(this).parent().find('.url').css({
        'visibility': 'hidden',
        'display': 'none'
      });
      $(this).parent().find('.text').css({
        'visibility': 'visible',
        'display': 'block'
      });
    } else {
      $(this).parent().find('.text').css({
        'visibility': 'hidden',
        'display': 'none'
      });
      $(this).parent().find('.url').css({
        'visibility': 'visible',
        'display': 'block'
      });
    }
  });

  $('.clone').click(function() {
    var p = $('.a2').length;
    var cloned = $('.a2:first').clone()
      .find('input:radio').attr('name', 'selection_' + ++p).end()
      .appendTo('.container');
  });
</script>

</html>

Include jquery script on your head section

<script type="text/javascript" src="//ajax.googleapis./ajax/libs/jquery/1.7.2/jquery.min.js"></script>

You can download jquery.js file from www.jquery./download/ then put in the one place :

<script type="text/javascript" src="path of your jquery.js file + your jquery file name "  ><script>

Note : You should write this code before your scripts !

本文标签： javascriptHow to add Jquery script into htmlStack Overflow

版权声明：本文标题：javascript - How to add Jquery script into html? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744367965a2602876.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。