Отображение изображения при нажатии кнопки отправки

-3

Извините за то, что это расстраивает, но это моя первая кодировка. Мне просто нужен совет.Отображение изображения при нажатии кнопки отправки

После многих исследований я не нашел ответа, который мог бы понять по моему вопросу. Мне просто нужно изображение, которое будет отображаться при нажатии кнопки ввода. Вот код:

<!DOCTYPE html> 
<head> 
    <title> Data tracking </title> 
    <script type="text/javascript" src="first script.js"></script> 
</head> 
<body> 
    <h1>Track your data</h1> 
    <p>Would you like to know how many data a web site can track from you?</p> 
    <form method="get"> 
     <fieldset> 
      <legend>Personal data</legend> 
      <input type="radio" name="sex" value="male" checked>Male 
      <br> 
      <input type="radio" name="sex" value="female">Female 
      <br> 
      <input type="email" name="email" placeholder="your email"> 
      <br> 
      <input type="text" name="firstname" placeholder="first name"> 
      <br> 
      <input type="text" name="lastname" placeholder="last name"> 
      <br> 
      <input id="submit" name="submit" type="submit"> 
     </fieldset> 
     <div></div> 
    </form> 
</body>

JavaScript:

$(document).ready(function()){ 
    $("#submit").click(function() { 
     $('body').append('<img src="cookie.png"></img>') 
    }); 
});

Я просто не могу сделать изображение «cookie.png», который находится в той же папке, что и HTML и файлы сценариев, появляются при submit нажата и не знает, почему.

Спасибо за помощь!

источник

2015-12-02 Masafe

Если вы отправите 'form', освежать это делается, так что вы выиграли» Посмотрите свое изображение ...Вам нужно предотвратить поведение по умолчанию, но лучше связывать событие 'submit'' form', потому что пользователь все равно может отправить 'form', не нажав кнопку отправки. FYI, никогда не используйте 'name =" submit "' внутри 'form', он переопределяет собственный submit DOM-метод –

немой вопрос, но вы включаете библиотеку jQuery где угодно? потому что вам нужно, чтобы ваш код работал – cpacheco

Use preventDefault(); перед добавлением изображения. Чтобы страница не обновлялась по умолчанию. –

-3

(ОБНОВЛЕНО) Он не будет следовать по пути файла сценария, но папка вашего html-файла/URL-адреса! Убедитесь, что изображение находится там.

Но учтите, что при отправке страница будет перенаправлена на новую страницу/перезагружена. Таким образом, вы не можете обойти оба: отобразить изображение на той же странице и увидеть его, пока он уже находится на следующей странице. Вам нужно будет отправить форму через Ajax, оставаясь на той же странице.

И изображение должно быть использован как <img src="cookie.png" /> не <img src="cookie.png"></img>

И не использовать src="first script.js" с непечатаемыми .. использовать src="first-script.js"

И вы даже JQuery включены?

источник

2015-12-02 15:03:55 CoderPi

Это должен был быть комментарий. Хотя это правда, это лишь небольшая часть проблемы *, поскольку страница освежает! * –

Он только сказал, что хочет, чтобы она появилась на submit? – CoderPi

Да, но есть варианты либо обработать серверную сторону, либо остановить отправку. –

-2

Ваш код работает, по крайней мере, для меня, после того, как я заполнил все входы и нажимаю submit, он загрузит изображение внизу. НО у вас есть одна скобка неправильно

$(document).ready(function(){ 
$("#submit").click(function(){ 
$('body').append('<img src="cookie.png"></img>') 
}); 
});

в готовом (функция() {

также вам необходимо включить JQuery!

и самое главное, узнать, как использовать консоль, это тип ошибки довольно понятны

источник

2015-12-02 15:11:47 Shakawkaw

Как вы остановили форму submit обновляя страницу и отбрасывая добавленное изображение? –

В качестве побочного примечания 'img' является элементом void;) И ваше наблюдение неверно, так как вы не видите изображение, по крайней мере, не более нескольких мс, потому что форма отправлена –

Ну, я действительно не знаю, в чем смысл его кода, поэтому техническая картина появляется ... теперь я понимаю, почему ответ h вопросы являются такими отходами ... – Shakawkaw

-2

Я не понимаю, почему вы хотите submit без фактически представления ничего, за исключением, если вы хотите пост через Ajax (но вы идете неправильно).

Тем не менее, вы должны использовать preventDefault(); как этот

$(document).ready(function()){ 
    $("#submit").click(function(e) { 
     e.preventDefault(); // prevent from submitting 
     $('body').append('<img src="cookie.png" />'); 
    }); 
});

Но это будет загрузить изображение после вы щелкнули на странице; что не самое лучшее.

Лучшее решение могло бы иметь ваше изображение уже загружено (но скрытые) и просто показать его на щелчку:

<!DOCTYPE html> 
<head> 
    <title> Data tracking </title> 
    <script type="text/javascript" src="first script.js"></script> 
</head> 
<body> 
    <h1>Track your data</h1> 
    <p>Would you like to know how many data a web site can track from you?</p> 
    <form method="get"> 
     <fieldset> 
      <legend>Personal data</legend> 
      <input type="radio" name="sex" value="male" checked>Male 
      <br> 
      <input type="radio" name="sex" value="female">Female 
      <br> 
      <input type="email" name="email" placeholder="your email"> 
      <br> 
      <input type="text" name="firstname" placeholder="first name"> 
      <br> 
      <input type="text" name="lastname" placeholder="last name"> 
      <br> 
      <input id= "submit" name= "submit" type="submit"> 
     </fieldset> 
     <div></div> 
    </form> 

    <igm src="cookie.png" id="formImg" style="display:none;" /> 
</body> 

$(document).ready(function()){ 
    $("#submit").click(function(e) { 
     e.preventDefault(); // prevent from submitting 
     $("#formImg").show(); 
    }); 
});

источник

2015-12-02 15:19:41 pistou

Уже отправил это и получил downvoted для него (удалено с тех пор). Этот код также останавливает отправку формы. Сожалею. –

@TrueBlueAussie OP не сказал, что должен (или не) отправить. Ответ от OP был бы весьма признателен, хотя – pistou

Форма без аякса довольно бесполезна без подачи :) OP еще не объяснил ничего ... Теперь переходим (потрачено больше времени на это) :) –

Отображение изображения при нажатии кнопки отправки

ответ

Смежные вопросы