#javascript #html
#javascript #HTML
Вопрос:
Привет, я новичок в javascript, можете ли вы, пожалуйста, помочь мне.
У меня в форме есть два поля со списком типа прохождения и продолжительности. Я хочу назначить сумму в текстовом поле, когда пользователь выбирает значения из типа прохождения и продолжительности.
Например, если я выбираю «посетитель» из типа пропуска и «годовой» из продолжительности, я хочу присвоить 2000 текстовому полю «сумма». Я пробовал это, но в сумме это получается неопределенным
Вот мой код :
<form method="post" action="#" class="contact_insert"><br><br>
<table align="center" >
<td> <h3>Pass Type:</h3></td>
<td> <span>
<select name="pass_type" onchange="getpass(this);">
<option value="">Select from here..</option>
<option value="Visitor">Visitor</option>
<option value="Bike">Bike</option>
<option value="Van">Van</option>
<option value="Car">Car</option>
<option value="Three Wheel">Three Wheel</option>
<option value="Heavy Vehicle">Heavy Vehicle</option>
<option value="Others">Others</option>
</select>
</span></td>
</tr>
<tr>
<td> <h3>Duration Type:</h3></td>
<td> <span>
<select id="duration_type" name="duration_type" onchange="javascript:dynamicdropdown(this.options[this.selectedIndex].value); getduw(this);">
<option value="">Select from here..</option>
<option value="Annual" onchange="setSelect('Annual')">Annual</option>
<option value="Quarter" onchange="setSelect('Quarter')">Quarter</option>
<option value="Monthly" onclick="setSelect('Monthly')">Monthly</option>
</select>
</span></td>
</span></td>
</tr>
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "Annual" :
document.getElementById("duration").options[0]=new Option("Select status","");
document.getElementById("duration").options[1]=new Option("2019","2019");
document.getElementById("duration").options[2]=new Option("2020","2020");
break;
case "Quarter" :
document.getElementById("duration").options[0]=new Option("Select status","");
document.getElementById("duration").options[1]=new Option("January1-March31","January1-March31");
document.getElementById("duration").options[2]=new Option("April1-June30","April1-June30");
document.getElementById("duration").options[3]=new Option("July1-September30","July1-September30");
document.getElementById("duration").options[4]=new Option("October1-December31","October1-December31");
break;
case "Monthly" :
document.getElementById("duration").options[0]=new Option("Select status","");
document.getElementById("duration").options[1]=new Option("January","January");
document.getElementById("duration").options[2]=new Option("February","February");
document.getElementById("duration").options[3]=new Option("March","March");
document.getElementById("duration").options[4]=new Option("April","April");
document.getElementById("duration").options[5]=new Option("May","May");
document.getElementById("duration").options[6]=new Option("June","June");
document.getElementById("duration").options[7]=new Option("July","July");
document.getElementById("duration").options[8]=new Option("August","August");
document.getElementById("duration").options[9]=new Option("September","September");
document.getElementById("duration").options[10]=new Option("October","October");
document.getElementById("duration").options[11]=new Option("November","November");
document.getElementById("duration").options[12]=new Option("December","December");
break;
}
return true;
}
</script>
<tr>
<td> <h3>Duration:</h3></td>
<td> <span>
<script type="text/javascript" language="JavaScript">
document.write('<select name="duration" id="duration"><option value="">Select from here</option></select>')
</script>
<noscript>
<select id="duration" name="duration">
<option value="2019">2019</option>
<option value="2020">2020</option>
</select>
</noscript>
</span></td>
</tr>
<tr>
<td> <h3>Amount:</h3></td>
<td width="75%"><span><input type="text" name="amount" id="amount" readonly></span></td>
</tr><script>
var str;
var xy;
function getpass(e)
{
var str = e.options[e.selectedIndex].text;
//alert(str);
}
function getduw(x)
{
var xy = x.options[x.selectedIndex].text;
// alert(xy);
}
if(str =='Visitor')
{
if(xy=='Annual')
{
document.getElementById('amount').value = 200;
}
elseif (xy=='Quarter')
{
document.getElementById('amount').value=315;
}
elseif (xy=='Monthly')
{
document.getElementById('amount').value=105;
}
}
elseif(str=='Bike' || str=='Van' || str=='Car' || str=='Three Wheel')
{
if(xy=='Annual')
{
document.getElementById('amount').value=600;
}
elseif (xy=='Quarter')
{
document.getElementById('amount').value=500;
}
elseif (xy=='Monthly')
{
document.getElementById('amount').value=155;
}
}
elseif(str=='Heavy Vehicle' )
{
if(xy=='Annual')
{
document.getElementById('amount').value=2000;
}
elseif (xy=='Quarter')
{
document.getElementById('amount').value=1500;
}
elseif (xy=='Monthly')
{
document.getElementById('amount').value=520;
}
}
elseif(str=='Other' )
{
if(xy=='Annual')
{
document.getElementById('amount').value=1300;
}
elseif (xy=='Quarter')
{
document.getElementById('amount').value=1500;
}
elseif (xy=='Monthly')
{
document.getElementById('amount').value=520;
}
}
</script>
<tr>
<td>amp;nbsp;</td>
<td><input name="save" type="submit" class="btn" id="save" value="Submit" /></td>
<td>amp;nbsp;</td>
</tr>
</table>
</form>
Комментарии:
1. Пожалуйста, поделитесь своим HTML здесь, и как вы рассчитываете сумму?
2. поделитесь своим HTML и примером, чтобы более четко понять вашу проблему
3. @kunal Я обновляю свой код
4. @illuminarch Я обновляю свой HTML-код и код скрипта
Ответ №1:
Это пример того, что вы хотите, вы можете улучшить этот ответ, чтобы он соответствовал вашим требованиям. Надеюсь, это поможет.
Вам нужно использовать onchange функцию, чтобы получить каждое значение из выбранного вами параметра и вычислить его.
$('.count').on('change', function(){
let pass_type = $('#pass_type').val();
let duration = $('#duration').val();
$('#total').val(pass_type * duration);
}) <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="pass_type">Pass Type</label>
<select name="pass_type" id="pass_type" class="count">
<option value="">Select</option>
<option value="200">Visitor</option>
<option value="100">Bike</option>
</select>
<br>
<label for="duration">Duration</label>
<select name="duration" id="duration" class="count">
<option value="">Select</option>
<option value="600">Annual</option>
<option value="500">Quarter</option>
<option value="155">Monthly</option>
</select>
<br>
<input type="text" name="total" id="total" readonly> Комментарии:
1. Большое спасибо. Я изменил это в своем коде, $ (‘.count’).change(функция(){});