Расчет и проверка формы Html/Javascript на новой странице

Я работаю над проектом веб-сайта и мне очень нужна помощь, так как я новичок во всем этом. В основном мне присваиваются значения для каждого параметра в раскрывающемся меню, и я заставляю их складываться вместе, что мне удалось. Но затем я хочу, чтобы общее значение из меню было диапазоном для псевдослучайного, который будет сгенерирован и добавлен к возрасту, который я ввожу.

Когда я нажму «Отправить», я бы хотел, чтобы он все это вычислил и отобразил результат на новой странице. Я хочу иметь возможность делать все это в javascript и html.

Любая помощь будет принята с благодарностью! Моя кодировка ниже. Огромное спасибо!

        <body>
        <form id="form1" action="" method="post" onsubmit="return calcTotal(this)">
        <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input name="" type="number" value="" /> 

        <br />

        <input name="" type="submit" value="Total" />
        <span>Total: </span><span id="result"></span>
    </form>


<script type="text/javascript">
function calcTotal(oForm){
    var sum = 0;
    for(i=0; i < oSels.length; i++){
        sum += new Number(oSels[i].value);
    }
    document.getElementById('result').innerHTML = sum;
    return false;
}
window.onload=function(){
    oSels = document.getElementById('form1').getElementsByTagName('select');
    for(i=0; i < oSels.length; i++){
        oSels[i].onchange=function(){
            document.getElementById('result').innerHTML = '';
        }


    }
}
</script>

javascript validation forms html onsubmit
person user3451786    schedule 15.04.2014    source источник
comment
Поместите результат всей вашей математики в скрытые поля. Затем, когда вы отправляете форму, значения будут переданы.   -  person durbnpoisn    schedule 15.04.2014
comment
@durbnpoisn Большое спасибо за ответ! Я попытаюсь выяснить, как это сделать, но есть ли что-то, что мне нужно добавить в часть кода onsubmit? Я также не знаю, как сделать псевдослучайный код.   -  person user3451786    schedule 16.04.2014
comment
@SteamFire ​​Спасибо за ответ. Я открыт для предложений!   -  person user3451786    schedule 16.04.2014
comment
Что это за новая страница и как вы к ней попали? В форме отправить?   -  person Jon P    schedule 24.04.2014
comment
Я бы поставил под сомнение вашу потребность в отдельных страницах, особенно потому, что вы хотите использовать только javascript, а не решение на стороне сервера. Обычно при ОТПРАВКЕ формы значения используются некоторым процессом на стороне сервера, который затем ОТВЕЧАЕТ страницей. Без использования процесса на стороне сервера переменные формы будут потеряны на последующих страницах. Все это можно было сделать на одной странице. Иметь скрытые div или divs, которые отображаются с помощью javascript в зависимости от результата. Вы также можете скрыть форму, используя javascript. Вы также можете использовать файлы cookie для сохранения данных.   -  person Jon P    schedule 24.04.2014
comment
Если вы еще этого не сделали, прочитайте следующие статьи о том, как работают формы: developer.mozilla.org/en-US/docs/Web/Guide/HTML/Forms/   -  person Jon P    schedule 24.04.2014

Ответы (2)


arrow_upward
1
arrow_downward

Я играл с вашим кодом. Я не сейчас, если это что-то вроде того, что вы хотели, но вот пример случайного счета.

Теперь он использует возраст для создания значения.

Взгляните, если вам это нравится, в мой codepen.

Я изменил ввод возраста:

Age<input id="age" name="" type="number" value="" />

Я также добавил новую функцию для генерации случайного числа между минимумом и максимумом:

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

И изменил способ расчета суммы:

var age = document.getElementById('age').value;
sum = parseInt(age) + parseInt(getRandomInt(sum-(age / 4),sum+(age / 4)));
//Add some random. The more you are older, the more random it is.

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

Изменить: чтобы помочь вам обмениваться переменными между страницами, посмотрите на этот вопрос< /а>.

person SteamFire    schedule 17.04.2014
comment
Привет, SteamFire! Большое спасибо за помощь! Я все еще пытаюсь понять, как работает ваш код! :) Я хотел бы уменьшить диапазон для случайного числа, если человек вводит возраст старше 35 лет. Я также хотел бы, чтобы общий поток проходил и отображался на новой странице результатов и имел 2 страницы результатов сравнения в зависимости от результата. Если случайное число равно 9 или более, я бы хотел, чтобы результат перешел на одну страницу, если только введенный возраст не меньше 30 лет, а затем перейдите на другую страницу. Это возможно? В очередной раз благодарим за помощь!!! :) - person user3451786; 21.04.2014
comment
Я дал вам некоторые функции, чтобы помочь вам, теперь попробуйте изменить их в соответствии с вашими потребностями. Я отредактировал ответ. Посмотрите на эту ссылку. - person SteamFire; 24.04.2014

arrow_upward
0
arrow_downward

Добавление этого в качестве ответа, поскольку отправитель считает это хорошей идеей:

Поместите результат всей вашей математики в скрытые поля. Затем, когда вы отправляете форму, значения будут переданы.

На самом деле ничего особенного делать не нужно. Просто добавьте такие поля:

<input type="hidden" value="[yourValue]" name="fieldName" id="fieldId" />

Для части yourValue просто вставьте вычисленное значение из JavaScript:

document.getElementById("fieldId").value = calculatedValue;

Поскольку все это часть той же формы, которую вы отправляете в любом случае, все они будут пропущены. Вы можете получить поля на принимающей странице как обычно.

Я скачал и отредактировал весь ваш блок кода. Я изменил пару вещей. 1. Вам не нужен onsubmit в вашей форме. Вам нужно вызвать функцию JavaScript на кнопке Total. Добавлена ​​кнопка отправки для отправки формы, когда пользователь закончит. 2. В форму добавлено скрытое поле для хранения результата. 3. Функция, в которой вы выполняете расчет, имеет дополнение для отправки рассчитанного итога в новое скрытое поле. 4. Вам нужно что-то добавить в ACTION, чтобы он знал, куда отправить форму. Вы также можете удалить файл ALERT. Я просто добавил это, чтобы убедиться, что это работает правильно.

Я запустил и протестировал это, и он работает точно так, как ожидалось. Вот как выглядит отредактированный код:

 <body>
        <form id="form1" action="" method="post">
        <select name=select1>
            <option selected="selected" value="0">Chinese Zodiac</option>
        <option value="3">Rat</option>
        <option value="3">Ox</option>
        <option value="4">Tiger</option>
        <option value="2">Rabbit</option>
        <option value="4">Dragon</option>
        <option value="5">Snake</option>
        <option value="3">Horse</option>
        <option value="3">Sheep</option>
        <option value="4">Monkey</option>
        <option value="5">Rooster</option>
        <option value="3">Dog</option>
        <option value="3">Pig</option>
        </select>
        </select>
        <br />
        <select name=select2>
            <option selected="selected" value="0">Star Sign</option>
        <option value="2">Aries</option>
        <option value="4">Taurus</option>
        <option value="3">Gemini</option>
        <option value="4">Cancer</option>
        <option value="3">Leo</option>
        <option value="2">Virgo</option>
        <option value="2">Libra</option>
        <option value="3">Scorpio</option>
        <option value="2">Sagittarius</option>
        <option value="4">Capricorn</option>
        <option value="2">Aquarius</option>
        <option value="3">Pisces</option>
        </select>
        <br />

        <select name=select3>
            <option selected="selected" value="0">Blood Type</option>
        <option value="3">O</option>
        <option value="2">A</option>
        <option value="1">B</option>
        <option value="3">AB</option>
        </select>
        <br />

        <select name=select4>
            <option selected="selected" value="0">Favourite Colour</option>
        <option value="3">Black</option>
        <option value="3">Blue</option>
        <option value="2">Brown</option>
        <option value="2">Green</option>
        <option value="3">Orange</option>
        <option value="3">Pink</option>
        <option value="2">Purple</option>
        <option value="4">Red</option>
        <option value="2">Yellow</option>
        <option value="2">White</option>
        <option value="5">Other</option>
        </select>
        <br />

        Age<input name="" type="number" value="" /> 

        <br />

        <input name="" type="button" value="Total" onclick="calcTotal();" />
        <input name="submit" type="submit" value="Submit" />
        <span>Total: </span><span id="result"></span>

        <input type="hidden" value="0" name="resultIs" id="resultIs" />
    </form>


<script type="text/javascript">
    function calcTotal(oForm) {
        var sum = 0;
        for (i = 0; i < oSels.length; i++) {
            sum += new Number(oSels[i].value);
        }
        //This is what you are using to display the result to your user.
        document.getElementById('result').innerHTML = sum;

        //This will add the value of the result to a hidden field I added to the form.  When you submit it, just request the value of "resultIs"
        document.getElementById("resultIs").value = sum;
        alert(sum);
        return false;
    }
    //I really don't even see that this is needed.  Your form doesn't need to be cleared onLoad.
    window.onload = function() {
        oSels = document.getElementById('form1').getElementsByTagName('select');
        for (i = 0; i < oSels.length; i++) {
            oSels[i].onchange = function() {
                document.getElementById('result').innerHTML = '';
            }


        }
    }
</script>
person durbnpoisn    schedule 16.04.2014
comment
привет durbnpoisn, спасибо за вашу помощь! Я пытался реализовать это, но, похоже, я не могу заставить его работать. Тип ввода не работает для меня. Возможно ли, что вы могли бы отредактировать мой код, чтобы я мог видеть, как он работает? Огромное спасибо! :) - person user3451786; 22.04.2014
comment
Я действительно не вижу, что я мог бы показать это лучше. Хотя, я признаю, что у меня была опечатка в коде, который я предоставил. У меня было два бейджа, один из которых должен был быть удостоверением личности. Я исправил это. Попробуй это сейчас. - person durbnpoisn; 22.04.2014
comment
Привет, durbnpoisn, еще раз спасибо. На самом деле я не знаю, где в форме добавить тип ввода как скрытый. Когда я пробовал, он выбрасывал все параметры из меню выбора, и они просто были текстом на странице, поэтому это меня смущает. - person user3451786; 23.04.2014
comment
Просто добавьте его в конец формы. Поскольку они невидимы, они не будут портить ваш макет. - person durbnpoisn; 23.04.2014
comment
Привет, спасибо, но я пробовал это, и это не сработало, и я не понимаю, как это добавить, как это поставит его в очередь на другую страницу. Но спасибо за помощь! - person user3451786; 23.04.2014
comment
Я думаю, ваша проблема в том, что вы сбрасываете свои результаты в InnerHTML. Это не поможет. Это полезно только для показа пользователю. Вам нужно получить результаты в поля самой формы. Затем они перейдут на следующую страницу. Вот что я пытаюсь проиллюстрировать. - person durbnpoisn; 23.04.2014
comment
Теперь я больше запутался. Вы можете показать мне, пожалуйста? - person user3451786; 27.04.2014
comment
Я отредактировал свой первоначальный ответ, переписав весь ваш блок кода. Я проверил это, и он работает так, как ожидалось. - person durbnpoisn; 28.04.2014
comment
Привет, большое спасибо! Я очень ценю это! Я добавил ссылку action=/result.html в действие, чтобы оно загружалось на новую страницу для отображения результата, но не может его найти. Я не уверен, что мне не хватает! Извините, если это расстраивает! - person user3451786; 28.04.2014
comment
К сожалению, сообщения получает СЕРВЕР, а не клиент, поэтому JavaScript не получит значения. Здесь есть целая тема: stackoverflow.com/questions/1409013/ У вас должен быть доступ к некоторому коду на стороне сервера (php или asp), который может получать значения вашей формы. Вы знаете, что поддерживает ваш сервер? Как только вы обнаружите это, поле с вашим результатом будет называться resultIs. Просто сделайте запрос на это. - person durbnpoisn; 28.04.2014
comment
Огромное спасибо! Я надеялся использовать его для телефонной связи, поэтому не хотел использовать сервер. - person user3451786; 29.04.2014
comment
Ну, вы можете с помощью только JavaScript. Это просто немного более неряшливо. - person durbnpoisn; 29.04.2014