Получение значений из выбора и построение URL-адреса изображения

Question

Я хочу получить значения из ввода текста и нескольких выборочных утоплений. Это будет выбор клиента. Затем я хочу передать эти значения в URL-адрес, чтобы отобразить изображение - в идеале, когда клиент делает свой выбор, нет кнопки «Отправить». Это то, что я до сих пор:

<input type="tex" maxlength="8" value="YOUR REG" id="txt" name=""/> 
<select id="1" name="1" > 
    <option value="1">text 1</option> 
    <option value="2">text 2</option> 
    <option value="3">text 3</option> 
    <option value="4">text 4</option> 
    <option value="5">text 5</option> 
    <option value="6">text 6</option> 
</select> 
<select id="2" name="2" > 
    <option value="1">text 1</option> 
    <option value="2">text 2</option> 
    <option value="3">text 3</option> 
    <option value="4">text 4</option> 
    <option value="5">text 5</option> 
    <option value="6">text 6</option> 
</select> 
<select id="3" name="3" > 
    <option value="1">text 1</option> 
    <option value="2">text 2</option> 
    <option value="3">text 3</option> 
    <option value="4">text 4</option> 
    <option value="5">text 5</option> 
    <option value="6">text 6</option> 
</select> 
<div id="pContainer"> 
    <img id="img" src="http://dir/dir/Default.aspx?1=&2=&3=" class="img-responsive "> 
</div> 
$(document).ready (function DrawImg() { 

    var txt = $("#txt").val(); 
    var 1 = $("#1").val; 
    var 2 = $("#2").val; 
    var 3 = $("#3").val; 


     var url = 'http://dir/dir/Default.aspx?'; 
     url += 'txt=' + escape(txt); 
     url += '&1=' + escape(1); 
     url += '&2=' + escape(2); 
     url += '&3=' + escape(3); 

     $("#pContainer").html("<img src='url'/>"); 
    } 
}); 

Как относительный новичок J запросов я просто не могу показаться, чтобы получить эту работу. Любая помощь, пожалуйста?

Answer 1

Похоже, что вы ожидали URL изображения будет генерироваться каждый раз, когда пользователь изменяет input текст и selects варианты, так:

// Just a shortcut for the document ready 
$(function() { 
    // On every change to the input or selects 
    $("input, select").on("change", function() { 
     var txt = $("#txt").val(); 
     var url = "http://dir/dir/Default.aspx?";   

     url += "txt=" + escape(txt); 

     // Loop through all the selects   
     $("select").each(function() { 
      url += "&" + $(this).attr("id") + "=" + escape($(this).val()); 
     }); 

     // Change the image source attribute 
     $("#img").attr("src", url); 
    }); 
}); 

Демо: http://jsfiddle.net/67WaW/

Я хотел бы предложить вам сгенерировать URL-адрес изображения, только когда пользователь на самом деле заканчивает выбор, поэтому:

// Just a shortcut for the document ready 
$(function() { 
    // When the user finishes the selection  
    $("select:last").on("change", function() { 
     var txt = $("#txt").val(); 
     var url = "http://dir/dir/Default.aspx?";   

     url += "txt=" + escape(txt); 

     // Loop through all the selects   
     $("select").each(function() { 
      url += "&" + $(this).attr("id") + "=" + escape($(this).val()); 
     }); 

     // Change the image source attribute 
     $("#img").attr("src", url); 
    }); 
}); 

Демонстрация: http://jsfiddle.net/67WaW/1/

Это зависит от вас, чтобы решить, в какую сторону идти.

Answer 2

$(document).ready (function(){ 
DrawImg(); 
}); 

function DrawImg() { 

    var txt = $("#txt").val(); 
    var test1 = $("#1").val();// variable name must be valid 
    var test2 = $("#2").val(); 
    var test3 = $("#3").val(); 


     var url = 'http://dir/dir/Default.aspx?'; 
     url += 'txt=' + escape(txt); 
     url += '&1=' + escape(test1); 
     url += '&2=' + escape(test2); 
     url += '&3=' + escape(test3); 

     $("#pContainer").html("<img src='"+url+"'/>"); 
    } 

см demo

Answer 3

Изменить код JQuery для этого.

$(document).ready (function() { 
DrawImg(); 
}); 
function DrawImg() { 
var txt = $("#txt").val(); 
var t1 = $("#1 option:selected").val; 
var t2 = $("#2 option:selected").val; 
var t3 = $("#3 option:selected").val; 
var url = 'http://dir/dir/Default.aspx?'; 
url += 'txt=' + escape(txt); 
url += '&1=' + escape(1); 
url += '&2=' + escape(2); 
url += '&3=' + escape(3); 
alert(' 
<img src='+url+'/> 
'); 
$("#pContainer").html(' 
<img src='+url+'/> 
'); 
} 

Answer 4

В URL-адресе кода есть переменная, поэтому объедините строку с переменной с помощью оператора «+».