У меня 2 JS функций; первый function1 отправляет информацию на сервер сценарию python после нажатия кнопки в форме. Вторая функция, function2, переходит на следующий уровень страницы (НЕ на следующую страницу HTML, это многостраничная форма на одной HTML странице).
В настоящий момент я используя функцию onClick на моей кнопке: onClick="function1();" и JQuery. Если одна из трех записей остается пустой, форма проверяет и предлагает пользователю заполнить пустые поля.
Как заставить function2 дождаться успешного выполнения function1 со всей действительной формой записей и отсутствия ошибок со сценарием python (сценарий python возвращает '', 204, поэтому после запуска страницы не происходит никаких изменений, поэтому для этого вопроса это не так важно).
Ниже это мои сценарии JS функций; любые советы приветствуются.
<script>
form = document.getElementById("formID");
function function1() {
form.action = "/runPythonFunc";
form.submit();
// JQuery validates the form to make sure all entries are filled
// How do I make function2 wait now until all the entries have been filled by the user?
function2('page2')
}
</script>
<script language="JavaScript">
var currentLayer = 'page1';
function function2(lyr) {
hideLayer(currentLayer);
document.getElementById(lyr)
.style.visibility = 'visible';
currentLayer = lyr;
}
function hideLayer(lyr) {
document.getElementById(lyr).
style.visibility = 'hidden';
}
function showValues(form) {
var values = '';
var len = form.length - 1;
//Leave off Submit Button
for (i = 0; i < len; i++) {
if (form[i].id.indexOf("C") != -1 ||
form[i].id.indexOf("B") != -1)
//Skip Continue and Back Buttons
continue;
values += form[i].id;
values += ': ';
values += form[i].value;
values += '\n';
}
alert(values);
}
</script>
ОБНОВЛЕНИЕ:
Я пытался работать с AJAX, и у меня есть несколько разных методов, с которыми я работал, ни один из которых еще работали. Специфика каждого метода упоминается в виде комментариев в приведенном ниже коде:
Первый способ
<script>
function function1() {
$.ajax({
url: '/runPythonFunc',
type: 'POST',
data: {
email: $('#User-Email').val(),
entryTwo: $('#EntryTwo').val(),
entryThree: $('#EntryThree').val()
},
success: function2('page2') { // getting error in this line "Syntax error: unexpected token '{'"
return '', 204;
}
});
}
// Getting the error: Uncaught ReferenceError: metaSQL is not define at HTMLInputElement.onclick
</script>
Вышеупомянутый первый способ дает эти ошибки в инструментах разработки (для пояснения, metaSQL is my function1 , and разновидности1` - это идентификатор записи на странице 2 формы (то, с чем мы не имеем дело в этом вопросе)
Second way
function function1() {
return $.ajax({
url: '/runPythonFunc',
type: 'POST',
data: {
email: $('#User-Email').val(),
entryTwo: $('#EntryTwo').val(),
entryThree: $('#EntryThree').val()
}
});
}
function1().then(response => function2('page2')); // not sure what to replace 'response ' with
// Getting the error: Uncaught ReferenceError: metaSQL is not define at HTMLInputElement.onclick
// Also the error: Uncaught ReferenceError: $ is not defined, and Mixed Content: The page was loaded over HTTPS, but requested an insecure script 'http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js'. This request has been blocked; the content must be served over HTTPS.
Is there an ideal way between the two options above, or an entirely different way to use AJAX in my case?
Additional code, HTML form:
Введите свой адрес электронной почты
Как вы назовете свой алгоритм?
Кратко опишите, что делает ваш алгоритм?
Добавить животное 1-е животное Какое животное вы ищете? . . .
Ура
Дополнительная информация (снимок экрана devtool) по запросу пользователя @Alwaysa и код python (с использованием Flask framework) ниже. Чтобы избежать путаницы, meta2sql совпадает с `
введите описание изображения здесь
@app.route('/runPythonFunc', methods=['GET', 'POST'])
def runPythonFunc():
#function does work
return '', 204