Jquery val() всегда получает первое выбранное значение, независимо от того, какое выбрано

#javascript #jquery

#javascript #jquery

Вопрос:

Я использую Jquery, чтобы позволить пользователям загружать изображения через Ajax в форме (изображение загружается до фактической отправки формы). Я добавил возможность добавлять водяной знак к каждому загружаемому изображению (это делается в upload_image.php ) эта часть работает нормально.

Пользователь может выбрать, где он хочет разместить водяной знак на своем изображении, с помощью формы выбора. Я использую Jquery .val(), чтобы получить значение id =»watermark» select и добавить его в качестве значения строки запроса для передачи upload_image.php .

Проблема в том, что он всегда передает первое значение выбора, независимо от того, что я на самом деле выбираю в форме. Я попытался поместить его в функцию (думал, что он получает значение при загрузке страницы), но там не повезло. Я изменил выбор на переключатели. Он по-прежнему получает значение первого переключателя на странице; независимо от того, что вы выбрали.

Вот часть скрипта, которая обрабатывает это:

 <script type="text/javascript" >
$(function(){

    // build URL to php upload script with watermark placement
    function setWatermark() {
        var uploadUrl = 'http://www.mysite.com/upload_image.php?w=';
        var watermarkValue = $('#watermark').val();
        var watermarkUrl = uploadUrl   watermarkValue;
        return watermarkUrl;
    }

    var btnUpload=$('#upload');
    new AjaxUpload(btnUpload, {
        action: setWatermark(),
        name: 'uploadfile',
    });

});
</script>
 

Это форма (с удаленными нерелевантными полями):

 <form id="image_form" action="this_form.php" method="post" enctype="multipart/form-data">
    <select id="watermark">
        <option value="top_left">Top Left</option>
        <option value="top_right">Top Right</option>
        <option value="center">Center</option>
        <option value="bottom_left">Bottom Left</option>
        <option value="bottom_right">Bottom Right</option>
    </select>
    <div id="upload" ><span><img src="upload_button.jpg" /></span></div>
</form>
 

Ответ №1:

Для выполнения этого кода:

 new AjaxUpload(btnUpload, {
    action: setWatermark(),
    name: 'uploadfile',
});
 

Браузер должен сначала сконструировать аргументы для передачи конструктору. Чтобы создать второй аргумент, объект, он должен вызвать setWatermark , чтобы получить значение для action свойства. Вот в чем ваша проблема; setWatermark вызывается при создании AjaxUpload объекта.

Я не знаю, что AjaxUpload это такое, но вам нужно будет найти способ заставить его вызывать функцию, когда ей это нужно action , а не предоставлять ее как константу в параметрах.