Вызов JavaScript от формы HTML
После изучения этой проблемы выясняется, что поскольку изображения были в фоновом теге элемента данных таблицы, htmlToPDF даже не обнаружил изображения.
Фоновые изображения в элементах устарели, поэтому я думаю, что Itext 7 ничего с ними не делает.
После переноса изображений в тег стиля в заголовке:
<style>
.blueimage1 {background-image: url("https://randomstaticcontent.screwy/random.gif"); }
.blueimage2 {background-image: url("https://randomstaticcontent.screwy/randomA1.gif"); }
</style>
iText 7 смог найти статический контент и создать PDF.
Мораль истории: найдите в своем HTML устаревшие теги, прежде чем запускать через IText.
5 ответов
В этом бите кода:
getRadioButtonValue(this["whichThing"]))
Вы на самом деле не получаете ссылку ни на что. Поэтому Ваш переключатель в функции getradiobuttonvalue не определен и бросает ошибку.
РЕДАКТИРОВАНИЕ Для вытаскивания значения из переключателей захватите библиотеку JQuery и затем используйте это:
$('input[name=whichThing]:checked').val()
Отредактируйте 2 Должных к требованию изобрести велосипед, вот код не-jQuery:
var t = '';
for (i=0; i<document.myform.whichThing.length; i++) {
if (document.myform.whichThing[i].checked==true) {
t = t + document.myform.whichThing[i].value;
}
}
или в основном измените исходную строку кода для чтения таким образом:
getRadioButtonValue(document.myform.whichThing))
Отредактируйте 3, Вот Ваша домашняя работа:
function handleClick() {
alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
//event.preventDefault(); // disable normal form submit behavior
return false; // prevent further bubbling of event
}
</script>
</head>
<body>
<form name="aye" onSubmit="return handleClick()">
<input name="Submit" type="submit" value="Update" />
Which of the following do you like best?
<p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
<p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
<p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>
Заметьте следующее, я переместил вызов функции в "onSubmit" событие Формы. Альтернатива должна была бы изменить Вашу Кнопку отправки на стандартную кнопку и поместить ее в событие OnClick для кнопки. Я также удалил ненужный "JavaScript" перед именем функции и добавил явный ВОЗВРАТ на значении, выходящем из функции.
В самой функции я изменил, как к форме получали доступ. Структура: документ. [ИМЯ ФОРМЫ]. [ИМЯ ЭЛЕМЕНТА УПРАВЛЕНИЯ] для достигания вещей. Так как Вы переименовали Ваш от да, необходимо было изменить document.myform. на document.aye. Кроме того, document.aye["whichThing"] является просто неправильным в этом контексте, поскольку это должен был быть document.aye.whichThing.
Заключительный бит, был, я прокомментировал event.preventDefault ();. та строка была не нужна для этого образца.
ОТРЕДАКТИРУЙТЕ 4 Только, чтобы быть ясными. document.aye["whichThing"] предоставит Вам прямой доступ к выбранному значению, но document.aye.whichThing получает Вас доступ к набору переключателей, которые затем необходимо проверить. Так как Вы используете "getRadioButtonValue (объектная)" функция для итерации через набор, необходимо использовать document.aye.whichThing.
Посмотрите различие в этом методе:
function handleClick() {
alert("Direct Access: " + document.aye["whichThing"]);
alert("Favorite weird creature: " + getRadioButtonValue(document.aye.whichThing));
return false; // prevent further bubbling of event
}
Можно или использовать форму URL JavaScript с
<form action="javascript:handleClick()">
Или используйте onSubmit обработчик событий
<form onSubmit="return handleClick()">
В более поздней форме, если Вы возвращаете false от handleClick, он предотвратит нормальную процедуру представления. Возвратите true, если Вы хотите, чтобы браузер выполнил нормальную процедуру представления.
Ваш onSubmit обработчик событий в кнопке также перестал работать из-за Javascript: часть
Править: Я просто попробовал этот код, и он работает:
<html>
<head>
<script type="text/javascript">
function handleIt() {
alert("hello");
}
</script>
</head>
<body>
<form name="myform" action="javascript:handleIt()">
<input name="Submit" type="submit" value="Update"/>
</form>
</body>
</html>
Существует несколько вещей измениться в Вашей отредактированной версии:
Вы взяли предложение использования
document.myform['whichThing']немного слишком буквально. Вашу форму называют "да", таким образом, код для доступа к whichThing переключателям должен использовать то имя: 'document.aye['whichThing'].Нет такой вещи как
actionатрибут для<input>тег. Использоватьonclickвместо этого:<input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>Получение и отмена Объекта-события в браузере являются очень включенным процессом. Это варьируется много типом браузера и версией. IE и Firefox обрабатывают эти вещи очень по-другому, таким образом, простое
event.preventDefault()не будет работать... на самом деле, переменная события, вероятно, не будет даже определена, потому что это - onclick обработчик от тега. Поэтому Stephen выше так старается предлагать платформу. Я понимаю, что Вы хотите знать механику, и я рекомендую Google для этого. В этом случае, как простое обходное решение, использоватьreturn falseв теге onclick как в номере 2 выше (или возвратите false от функции как stephen предложенный).Из-за № 3 избавьтесь от всего не аварийный оператор в своем обработчике.
Код должен теперь быть похожим:
function handleClick()
{
alert("Favorite weird creature: "+getRadioButtonValue(document.aye['whichThing']));
}
</script>
</head>
<body>
<form name="aye">
<input name="Submit" type="submit" value="Update" onclick="handleClick();return false"/>
Which of the following do you like best?
<p><input type="radio" name="whichThing" value="slithy toves" />Slithy toves</p>
<p><input type="radio" name="whichThing" value="borogoves" />Borogoves</p>
<p><input type="radio" name="whichThing" value="mome raths" />Mome raths</p>
</form>
Удалить javascript: от onclick=".., onsubmit=".. объявления
javascript: префикс используется только в href="" или подобные атрибуты (не связанные события)
Все, кажется, прекрасно в Вашем коде кроме того, что handleClick () не работает, потому что эта функция испытывает недостаток в параметре в своем вызове вызова функции (но функциональное определение в имеет аргумент, который делает функциональное несоответствие для появления).
следующее является демонстрационным рабочим кодом для вычисления общих меток всего семестра и соответствующего класса. Это демонстрирует использование функции JavaScript (вызов) в файле HTML и также решает проблему, с которой Вы сталкиваетесь.
<!DOCTYPE html>
<html>
<head>
<title> Semester Results </title>
</head>
<body>
<h1> Semester Marks </h1> <br>
<script type = "text/javascript">
function checkMarks(total)
{
document.write("<h1> Final Result !!! </h1><br>");
document.write("Total Marks = " + total + "<br><br>");
var avg = total / 6.0;
document.write("CGPA = " + (avg / 10.0).toFixed(2) + "<br><br>");
if(avg >= 90)
document.write("Grade = A");
else if(avg >= 80)
document.write("Grade = B");
else if(avg >= 70)
document.write("Grade = C");
else if(avg >= 60)
document.write("Grade = D");
else if(avg >= 50)
document.write("Grade = Pass");
else
document.write("Grade = Fail");
}
</script>
<form name = "myform" action = "javascript:checkMarks(Number(s1.value) + Number(s2.value) + Number(s3.value) + Number(s4.value) + Number(s5.value) + Number(s6.value))"/>
Semester 1: <input type = "text" id = "s1"/> <br><br>
Semester 2: <input type = "text" id = "s2"/> <br><br>
Semester 3: <input type = "text" id = "s3"/> <br><br>
Semester 4: <input type = "text" id = "s4"/> <br><br>
Semester 5: <input type = "text" id = "s5"/> <br><br>
Semester 6: <input type = "text" id = "s6"/> <br><br><br>
<input type = "submit" value = "Submit"/>
</form>
</body>
</html>