Блог

Главная - Вопросы по программированию - Создание «динамических» изображений с использованием JS

Создание «динамических» изображений с использованием JS

#php #javascript #html

#php #javascript #HTML

Вопрос:

У меня есть форма с 2 полями. Как создать новое изображение со значениями из этих двух полей в части запроса URL-адреса «src» при отправке формы?

Комментарии:

1. Вы имеете в виду, что хотите заполнить URL в одном поле, а затем создать новое изображение в документе, используя этот URL в качестве параметра src для изображения?

2. @Marc B — да, однако путь будет предопределен ( domain.com/images/img.png ) и только строка запроса должна быть «сгенерирована», поэтому весь URL будет выглядеть так: domain.com/images/img.png?field1value=fooamp;field2value=bar

3. хорошо, я думаю, что я все понял правильно. проверьте мой ответ, он должен быть таким. если только вам не нужно решение jQuery, но его можно легко изменить на базовый javascript

Ответ №1:

Смотрите этот пример (с использованием jQuery):

     <form id="myform">
        <input type="text" value="" id="input1">
        <input type="text" value="" id="input2">
        <input type="submit" value="submit">
    </form>
    <img id="image" src="http://mydomain.com/empty.gif" />
    <script>
    $(document).ready(function () {
        $("#myform").submit(function (ev) {
            ev.preventDefault();
            var val1 = $("#input1").val();
            var val1 = $("#input2").val();
            $("#image").attr("src", "http://mydomain.com/image?val1=" val1 "amp;val2=" val2);
        });
    });
    </script>

изменить mydomain.com к вашему хосту или относительному пути.