Hi everyone, I’m a programming student and I need help with an exercise, can someone help me? I have to create a form with a budget, (already created, I leave the code below), which depending on what I put later has to increase or decrease the price, the problem comes in the javascript part, which I am not capable of, and it was If someone can help me to generate it, I would be very grateful. It must have the following characteristics.
-
In the product field: it is a select with four options: select category / web page design / app development / seo/sem positioning each product will have a different price
-
In the term field: it is a numerical field, depending on the number of months in which you wish to receive the product, a discount will be applied to the final budget.
-
Extras: I put three checks: online store / graphic design / social networks. that each option selected will increase the budget.
-
in the budget field: in this field it must be updated with any change made in the product choices, months and extras, without using buttons or refreshing the page.
I am missing the js code that I am not able to do it, can someone help me please? Thank you very much in advance, I leave you the html code of the entire form:
<form class="formulario-presupuesto" name="formulario" id="formulario" method="post" action="procesar.php">
<fieldset>
<legend>Datos</legend>
<div class="formularioitems">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" id="nombre" placeholder="Nombre" required>
</div>
<div class="formularioitems">
<label for="apellidos">Apellidos:</label>
<input type="text" name="apellidos" id="apellidos" placeholder="Apellidos" required>
</div>
<div class="formularioitems">
<label for="telefono">Teléfono de contacto:</label>
<input type="tel" name="telefono" id="telefono" placeholder="Teléfono" required>
</div>
<div class="formularioitems">
<label for="email">Email:</label>
<input type="email" name="email" id="email" placeholder="Email" required>
</div>
</fieldset><br>
<fieldset>
<legend>Presupuesto</legend>
<div class="formularioitems">
<label for="productos">Productos:</label>
<select name="selecion" size="1">
<option value="vacio">Seleccione categoria</option>
<option value="diseñopaginaweb">Diseño de página web</option>
<option value="desarrollodeapps">Desarrollo de apps</option>
<option value="posicionamiento">Posicionamiento SEO/SEM</option>
</select>
</div>
<div class="formularioitems">
<label for="plazo">Plazo (en meses):</label>
<input type="number" name="plazo" id="plazo">
</div>
<div class="formularioitems">
<p>Elija los extras para el producto:</p><br>
<label for="extra1">Tienda online</label>
<input type="checkbox" name="extra1" id="extra1">
<label for="extra2">Diseño gráfico</label>
<input type="checkbox" name="extra2" id="extra2">
<label for="extra2">Redes sociales</label>
<input type="checkbox" name="extra3" id="extra3">
</div>
<div class="formularioitems">
<label for="presupuesto">Presupuesto</label>
<input type="text" name="presupuest" id="container" readonly>
</div>
</fieldset><br>
<fieldset>
<legend>Aceptación de los términos y las condiciones de privacidad</legend>
<div class="formulariocheck">
<input type="checkbox" name="chterminos" id="chterminos" required>
<label for="chterminos">Acepto los términos y condiciones y la política de privacidad de la empresa.</label>
</div>
<div>
<input type="submit" name="envio" id="enviar" value="Enviar">
<input type="reset" name="borrar" id="borrar" value="Borrar">
</div>
</fieldset>
</form>