입력란에서 값을 가져오고 특정 조건에 따라 URL을 변경하십시오.

Question

간단해야하지만이 기능이 작동하지 않는 이유는 없습니다. 나는 처음에 n00b이다.

사용자가 입력해야하는 두 개의 입력란, 이름 및 금액이 있습니다. 이것들이 채워져 있다면 URL의 쿼리 문자열을 변경하고, 그렇지 않으면 URL에 대한 미리 정의 된 쿼리 문자열을 제공합니다.

이상한 일이 내 쿼리 문자열 aigh에 & 기호로 계속 발생하므로 작동하는 jsfiddle을 얻을 수 없습니다.

기본적으로 클릭시 변경할 URL을 얻을 수 없습니다. 당신은 어딘가에서 ?이 필요 http://jsfiddle.net/9uk68m6x/

 <form> 
       <input type="text" class="name"> 
       <input type="text" class="amount"> 
      <script type="text/javascript"> 

       $(function() { 

        $('.makeUrl').click(function(){ 
      var url = 'http://www.website.com', 
      nameVal = $("input.name").val(), 
         amountVal = $("input.amount").val(); 
         if (nameVal != ''){ 
          //if name value isn't blank, then 
           $("a.makeUrl").prop("href", url+'&name='+nameVal+'&free_amount=1&amount='+amountVal+'00'); 
          } 
          else (nameVal == ''){ 
           $("a.makeUrl").prop("href", "http://www.website.com&free_amount=1&amount=200"); 
          } 

        }); 

       }); 
      </script> 
      <a href="http://www.website.com&free_amount=1&amount=200" class="ctaButton makeUrl">Donate</a> 
     </form> 

Answer 1

스크립트에 구문 오류가 있습니다. else 어떤 종류의 인수도 허용하지 않습니다. 대신 else if을 사용하십시오. 그러나 조건이 이진이므로 (nameVal이 비어 있거나 없으면) 실제로 두 번째 if 문없이 수행 할 수 있습니다.

따라서 일부 변경 내가 만든 :

• 개정 조건문. exp30000 !nameVal을 사용하면 nameVal이 비어 있는지 확인해야합니다.
• .prop() 대신 .attr()을 사용하여 href 특성을 변경하십시오. 그 이후 클릭 기능에
• 사용 $(this) 여기

을 캐시 된 바이올린입니다 : http://jsfiddle.net/teddyrised/9uk68m6x/4/

$(function() { 
    $('.makeUrl').click(function (e) { 
     // Declare variables 
     var url = 'http://www.website.com', 
      nameVal = $("input.name").val(), 
      amountVal = $("input.amount").val(); 

     // Conditional statement 
     if (nameVal) { 
      //if name value isn't blank, then 
      $(this).attr("href", url + '&name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00'); 
     } else { 
      $(this).attr("href", "http://www.website.com&free_amount=1&amount=200"); 
     } 

     // Check updated href 
     console.log($(this).attr("href")); 
    }); 
}); 

Answer 2

:

그래서 여기 내 코드 및 관심이있는 사람들을위한 비 작업 jsfiddle입니다. 유효한 매개 변수화 된 URL은 다음과 같습니다

"http://www.website.com/?free_amount=1&amount=200" 

그래, 그게 실행하기 전에 당신을 위해 그 문자를 인코딩 할 때 바이올린 좀 어렵습니다.

Answer 3

JS에 몇 가지 변경 사항을 적용한 후에는 적어도 JSFiddle에서 작동하는 것으로 보입니다.

$(function() { 
    $('.makeUrl').click(function() { 
    var url = 'http://www.website.com', 
     nameVal = $("input.name").val(), 
     amountVal = $("input.amount").val(); 
    if(nameVal !== "") { 
     //if name value isn't blank, then 
     $("a.makeUrl").prop("href", url + '?name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00'); 
    } else { 
     $("a.makeUrl").prop("href", "http://www.website.com?free_amount=1&amount=200"); 
    } 
    }); 
}); 

Answer 4

당신은 다른 사람에 구문 오류가 있었다가. (newVal == '')을 삭제하거나 else if을 입력하십시오.

어쨌든, 여기에 URL이 표시됩니다. jsfiddle. e.preventDefault();

그리고 그것은 또한 amountVal을 체크인 있기 때문에 (방지는 링크를 활성화합니다.

<form> 
    <input type="text" class="name"> 
    <input type="text" class="amount"> 
    <script type="text/javascript"> 
     $(function() { 
      $('.makeUrl').click(function(e) { 
       e.preventDefault(); 
       var url = 'http://www.website.com', 
         nameVal = $("input.name").val(), 
         amountVal = $("input.amount").val(); 
       var newUrl; 
       if (nameVal !== '' && amountVal != '') { 
        //if name value isn't blank, then 
        newUrl = url + '?name=' + nameVal + '&free_amount=1&amount=' + amountVal + '00'; 
        $("a.makeUrl").prop("href", newUrl); 

       } else { 
        newUrl = 'http://www.website.com&free_amount=1&amount=200'; 
        $("a.makeUrl").prop("href", "http://www.website.com?free_amount=1&amount=200"); 
       } 
       $('#url').html(newUrl); 


      }); 

     }); 
    </script> 
    <a href="http://www.website.com?free_amount=1&amount=200" class="ctaButton makeUrl">Donate</a> 
</form> 
<div>URL is: <span id="url"></span></div>