pije76
Estoy usando un complemento formidable en wordpress que genera un envío de formulario. Habrá múltiples casillas de verificación y campos de números igual que en https://www.mql5.com/en/market/new_product/mt4.
En ese sitio – bajo “Precio” campo: de forma predeterminada, el campo de la casilla de verificación está marcado en el valor: “Libre“. Cuando el usuario desmarque eso, se mostrarán otras casillas de verificación a continuación.
Entonces, ¿cómo lograr este propósito usando formidable en wordpress?
Por cierto, a continuación se muestra el código html de ese enlace de arriba:
<div class="line" style="padding-bottom: 2px;">
<div class="label">
<label for="Price">Price:</label>
</div>
<div class="field_input">
<input type="checkbox" id="priceFree" name="isFree" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" checked onclick="onPriceCheckChanged(this)" />
<label for="checkFree" style="color: #626363;vertical-align:middle;">Free</label>
</div>
</div>
<div class="line" style="padding-top: 2px;">
<div class="label" style="padding-top: 2px;">
</div>
<div class="field_input">
<div style="margin-bottom:5px;">
<div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
<input data-old="" id="PriceRaw" name="PriceRaw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
</div>
<span id="PriceAdditional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
USD
<input type="checkbox" id="checkPrice" name="checkPrice" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
<label for="checkPrice" style="color: #626363;vertical-align:middle;">for unlimited use</label>
</span>
<div>
<script type="text/javascript" id='validate_PriceRaw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['PriceRaw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['PriceRaw',10,'Invalid price',CheckProductPriceValue]);}); /*]]>*/</script>
</div>
</div>
<div style="margin-bottom:5px;">
<div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
<input data-old="" id="Price4Raw" name="Price4Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
</div>
<span id="Price4Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
USD
<input type="checkbox" id="checkPrice4" name="checkPrice4" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
<label for="checkPrice4" style="color: #626363;vertical-align:middle;">1 month rent</label>
</span>
<div>
<script type="text/javascript" id='validate_Price4Raw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['Price4Raw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['Price4Raw',10,'Invalid price',CheckProductSubscribePriceValue]);}); /*]]>*/</script>
</div>
</div>
<div style="margin-bottom:5px;">
<div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
<input data-old="" id="Price3Raw" name="Price3Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
</div>
<span id="Price3Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
USD
<input type="checkbox" id="checkPrice3" name="checkPrice3" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
<label for="checkPrice3" style="color: #626363;vertical-align:middle;">3 months rent</label>
</span>
<div>
<script type="text/javascript" id='validate_Price3Raw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['Price3Raw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['Price3Raw',10,'Invalid price',CheckProductSubscribePriceValue]);}); /*]]>*/</script>
</div>
</div>
<div style="margin-bottom:5px;">
<div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
<input data-old="" id="Price2Raw" name="Price2Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
</div>
<span id="Price2Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
USD
<input type="checkbox" id="checkPrice2" name="checkPrice2" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
<label for="checkPrice2" style="color: #626363;vertical-align:middle;">6 months rent</label>
</span>
<div>
<script type="text/javascript" id='validate_Price2Raw'>/*<![CDATA[*/ mqGlobal.AddOnReady(function() {V.push(['Price2Raw',10,'Invalid price format. Please enter number',CheckProductPrice]);});mqGlobal.AddOnReady(function() {V.push(['Price2Raw',10,'Invalid price',CheckProductSubscribePriceValue]);}); /*]]>*/</script>
</div>
</div>
<div style="margin-bottom:5px;">
<div class="inputWrapper" style="width:100px;display:inline-block;*display:inline;*zoom:1;*margin-right:5px;line-height:22px;vertical-align:middle;">
<input data-old="" id="Price1Raw" name="Price1Raw" style="text-align: right; padding-right:2px;" type="text" value="0.00" />
</div>
<span id="Price1Additional" style="color:#626363;display:inline-block;*display:inline;*zoom:1;line-height:22px;vertical-align:middle;">
USD
<input type="checkbox" id="checkPrice1" name="checkPrice1" style="margin-top:2px;width:16px;height:16px;vertical-align:middle;" onclick="onPriceCheckChanged(this)" />
<label for="checkPrice1" style="color: #626363;vertical-align:middle;">1 year rent</label>
</span>
</div>
<div>
Y este es un fragmento de JavaScript de ese enlace de arriba:
function onPriceCheckChanged(priceCheck)
{
var readonly = !priceCheck;
var any = readonly || priceCheck.id == "priceFree";
var checked = readonly || (any ? !priceCheck.checked : priceCheck.checked);
var anyChecked = false;
for(var i = 0; i < 5; i++)
{
var pc = $("checkPrice" + (i || ""));
if(any || pc.id == priceCheck.id)
{
if(!readonly)
pc.checked = checked;
checkPriceCheck(pc);
}
if(pc.checked)
anyChecked = true;
}
if(!readonly && priceCheck.id !== "priceFree" && priceCheck.checked)
{
$("priceFree").checked = false;
}
var actObj = $('MaxActivations');
var actObjD = $('MaxActivationsDisabled');
var feeObj = $('AffilationFee');
if(!anyChecked)
{
if(feeObj)
{
oldFee = feeObj.value;
feeObj.value = 0;
feeObj.disabled = "disabled";
feeObj.readonly = "readonly";
}
if(actObj && actObjD)
{
oldAct = actObj.value;
actObj.value = 10;
actObj.style.display = "none";
actObjD.style.display = "inline";
}
}
else
{
if(feeObj)
{
feeObj.value = oldFee;
feeObj.disabled = null;
feeObj.readonly = null;
}
if(actObj && actObjD)
{
actObj.value = oldAct;
actObj.style.display = "inline";
actObjD.style.display = "none";
}
}
}
*Actualizar 1
- La primera casilla de verificación cuando está marcada, luego otras opciones se deshabilitarán (es el valor predeterminado)
- La primera casilla de verificación cuando se desmarca, luego se habilitarán otras opciones para marcar o desmarcar y también se pueden completar los campos numéricos
- Las otras opciones cuando una o más casillas de verificación no están marcadas, también pueden llenar los campos numéricos
*Actualización 2
Aquí está el código fuente completo del sitio original: gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73
*Actualización 3
Aquí está el código modificado de la respuesta de Sally:
(function($)
{
$('input[type="number"]').prop('disabled', true);
$(':checkbox#field_fm78o-0').on('click', function()
{
$(':checkbox[id^="field_masaberlaku_"]').prop('checked', !this.checked).change();
});
$(':checkbox[id^="field_masaberlaku_"]').on('change', function()
{
var cont = $(this).closest('div.frm_form_field').prev('div.frm_form_field');
cont.find('input[type="number"]').prop('disabled', this.disabled || !this.checked);
$(':checkbox#field_fm78o-0').prop("checked", false);
});
})(jQuery);
*Actualización 4
Los 3 pasos:
// 1. Disable the Price field when the "Gratis" field is checked but keep enable the "masa berlaku" fields so user can check it. (default)
$('input[type="number"]').prop('disabled', true);
// 2a. When the "Gratis" field is unchecked then checked all the "masa berlaku" fields.
$(':checkbox#field_fm78o-0').on('click', function()
{
$(':checkbox[id^="field_masaberlaku_"]').prop('checked', !this.checked).change();
});
// 2b. When one or more the "masa berlaku" fields is checked then user can fill the Price field that have relationship with that field and also disable the other Price fields.
$(':checkbox[id^="field_masaberlaku_"]').on('change', function()
{
var cont = $(this).closest('div.frm_form_field').prev('div.frm_form_field');
cont.find('input[type="number"]').prop('disabled', this.disabled || !this.checked);
$(':checkbox#field_fm78o-0').prop("checked", false);
});
// 3. When the "Gratis" field is checked again then go back the behaviour to step 1 again (default).
// I am stuck on this step when pass the step 1 & 2 then I can not check the Gratis field again and I am not sure how to get this step.
@pije Bueno, si está usando Formidable, entonces necesita emplear Campos condicionales. Esto le permitirá mostrar/ocultar más campos dependiendo de los campos previamente seleccionados/verificados: Su documentación es bastante sólida para esto: https://formidableforms.com/knowledgebase/using-conditional-logic/
Sally C.J.
No tengo la versión pro/pagada de Formidable Forms que viene con el campos condicionales apoyo; pero publiqué esta solución jQuery/JavaScript “genérica” ya que aún no has aceptado ninguna respuesta… y espero que te ayude.
Así que les estoy dando solo el guión; puedes ponerlo en el pie de página del tema (antes </body> y no olvides el <script> y </script> etiquetas) o colóquelo en un externo .js expediente:
ACTUALIZACIÓN 27 de julio de 2019: puede encontrar el script en el siguiente fragmento.
Sin embargo, eso es específico del marcado/HTML de la sección Harga/Precio tal como se encuentra actualmente en el sitio. Pero básicamente puede usar el código anterior como referencia para secciones similares en el formulario. Y aquí hay un trabajo manifestación:
(function($){
// Define the selectors/variables; be as specific as possible.
var gratis = $(':checkbox#field_fm78o-0');
var price_fields = $('.frm_form_field input[type="number"]');
var masa_berlakus = $(':checkbox[id^="field_masaberlaku_"]');
// On page load..
price_fields.prop('disabled', true); // disable the price fields
masa_berlakus.prop('checked', false); // and uncheck the "masa berlaku" fields.
// On click of the "Gratis" field..
// Gratis checked: disable the price fields; uncheck the "masa berlaku" fields.
// Gratis unchecked: enable the price fields; check the "masa berlaku" fields.
gratis.on('change', function(){
price_fields.prop('disabled', this.checked);
masa_berlakus.prop('checked', ! this.checked);
});
// On click of each "masa berlaku" field..
// If checked: enable the price field; uncheck the "Gratis" field.
// If unchecked: disable the price field.
masa_berlakus.on('change', function(){
var cont = $(this).closest('div.frm_form_field')
.prev('div.frm_form_field');
cont.find('input[type="number"]')
.prop('disabled', ! this.checked);
if (this.checked) {
gratis.prop('checked', false);
}
});
})(jQuery);<!-- WordPress still uses jQuery v1.12.4 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div id="frm_field_16_container" class="frm_form_field form-field frm_left_container frm_first frm_third horizontal_radio">
<div id="field_fm78o_label" class="frm_primary_label">Harga:
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_fm78o_label" role="group">
<div class="frm_checkbox" id="frm_checkbox_16-8-0"><label for="field_fm78o-0"><input type="checkbox" name="item_meta[16][]" id="field_fm78o-0" value="Gratis" checked="checked" data-sectionid="8" data-frmval="["Gratis"]" data-invmsg="Harga: is invalid" /> Gratis</label></div>
</div>
</div>
<!-- Hidden inputs here -->
<div id="frm_field_18_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
<label for="field_5ust4" id="field_5ust4_label" class="frm_primary_label">Harga1:
<span class="frm_required"></span>
</label>
<input type="number" id="field_5ust4" name="item_meta[18]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_19_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
<div id="field_masaberlaku_1_label" class="frm_primary_label">masa berlaku:
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_masaberlaku_1_label" role="group">
<div class="frm_checkbox" id="frm_checkbox_19-8-0"><label for="field_masaberlaku_1-0"><input type="checkbox" name="item_meta[19][]" id="field_masaberlaku_1-0" value="Tanpa batas" checked="checked" data-sectionid="8" data-frmval="["Tanpa batas"]" data-invmsg="masa berlaku: is invalid" /> Tanpa batas</label></div>
</div>
</div>
<!-- Hidden inputs here -->
<div id="frm_field_20_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
<label for="field_5wbs3" id="field_5wbs3_label" class="frm_primary_label">Harga2:
<span class="frm_required"></span>
</label>
<input type="number" id="field_5wbs3" name="item_meta[20]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_21_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
<div id="field_masaberlaku_2_label" class="frm_primary_label">masa berlaku:
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_masaberlaku_2_label" role="group">
<div class="frm_checkbox" id="frm_checkbox_21-8-0"><label for="field_masaberlaku_2-0"><input type="checkbox" name="item_meta[21][]" id="field_masaberlaku_2-0" value="Sewa 1 bulan" checked="checked" data-sectionid="8" data-frmval="["Sewa 1 bulan"]" data-invmsg="masa berlaku: is invalid" /> Sewa 1 bulan</label></div>
</div>
</div>
<div id="frm_field_22_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
<label for="field_yjuqd" id="field_yjuqd_label" class="frm_primary_label">Harga3:
<span class="frm_required"></span>
</label>
<input type="number" id="field_yjuqd" name="item_meta[22]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_23_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
<div id="field_masaberlaku_3_label" class="frm_primary_label">masa berlaku:
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_masaberlaku_3_label" role="group">
<div class="frm_checkbox" id="frm_checkbox_23-8-0"><label for="field_masaberlaku_3-0"><input type="checkbox" name="item_meta[23][]" id="field_masaberlaku_3-0" value="Sewa 3 bulan" checked="checked" data-sectionid="8" data-frmval="["Sewa 3 bulan"]" data-invmsg="masa berlaku: is invalid" /> Sewa 3 bulan</label></div>
</div>
</div>
<div id="frm_field_24_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
<label for="field_mjy2z" id="field_mjy2z_label" class="frm_primary_label">Harga4:
<span class="frm_required"></span>
</label>
<input type="number" id="field_mjy2z" name="item_meta[24]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_25_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
<div id="field_masaberlaku_4_label" class="frm_primary_label">masa berlaku:
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_masaberlaku_4_label" role="group">
<div class="frm_checkbox" id="frm_checkbox_25-8-0"><label for="field_masaberlaku_4-0"><input type="checkbox" name="item_meta[25][]" id="field_masaberlaku_4-0" value="Sewa 6 bulan" checked="checked" data-sectionid="8" data-frmval="["Sewa 6 bulan"]" data-invmsg="masa berlaku: is invalid" /> Sewa 6 bulan</label></div>
</div>
</div>
<div id="frm_field_26_container" class="frm_form_field form-field frm_left_container frm_first frm_third">
<label for="field_c41ii" id="field_c41ii_label" class="frm_primary_label">Harga5:
<span class="frm_required"></span>
</label>
<input type="number" id="field_c41ii" name="item_meta[26]" value="" data-sectionid="8" placeholder="Rp. 0,00" data-invmsg="unlimited price is invalid" min="1" max="99999999999" step="1"/>
</div>
<div id="frm_field_27_container" class="frm_form_field form-field frm_left_container frm_third horizontal_radio">
<div id="field_masaberlaku_5_label" class="frm_primary_label">masa berlaku:
<span class="frm_required"></span>
</div>
<div class="frm_opt_container" aria-labelledby="field_masaberlaku_5_label" role="group">
<div class="frm_checkbox" id="frm_checkbox_27-8-0"><label for="field_masaberlaku_5-0"><input type="checkbox" name="item_meta[27][]" id="field_masaberlaku_5-0" value="Sewa 1 tahun" checked="checked" data-sectionid="8" data-frmval="["Sewa 1 tahun"]" data-invmsg="masa berlaku: is invalid" /> Sewa 1 tahun</label></div>
</div>
</div>-
Gracias por su respuesta @sally-cj, modifiqué su código en la Actualización 3 (no puedo pegar ese código aquí porque el carácter es limitado) pero no puede marcar la casilla de verificación “Gratis” nuevamente cuando otras casillas de verificación están marcadas. ¿Puedes arreglarlo por favor? Aceptaré tu respuesta.
– pije76
25/07/2019 a las 15:30
-
Y lo siento, realmente no estaba prestando atención al sitio web al que se hace referencia… (mql5.com).
– Sally C.J.
27 de julio de 2019 a las 6:13
¿Ha sido útil esta solución?
Tu feedback nos ayuda a saber si la solución es correcta y está funcionando. De esta manera podemos revisar y corregir el contenido.
Para poder ayudarte, da un enlace válido. Obteniendo el error 500. O agregue otro enlace con el mismo comportamiento deseado.
– LebCit
11/07/2019 a las 17:30
Lo siento por recibir el error 500, olvidé que el sitio necesita registrarse como usuario privado. Aquí está el sitio que trato de construir con el mismo comportamiento deseado: korexindo.com/k-market/form-k-market Puede ver en la parte inferior del formulario en word: “Harga”
– pije76
15 de julio de 2019 a las 12:31
¿Puedes mostrar la fuente/HTML generado para ese elemento “Precio”? O mejor, cree un formulario de prueba público con esos campos condicionales.
– Sally C.J.
17 de julio de 2019 a las 6:49
Aquí está el código fuente completo: gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73
– pije76
17 de julio de 2019 a las 7:55