Ich verwende ein beeindruckendes Plugin für WordPress, das eine Formularübermittlung generiert. Es wird mehrere Kontrollkästchen und Zahlenfelder geben, genau wie auf https://www.mql5.com/en/market/new_product/mt4.
Auf dieser Seite – unter “Preis” Feld – Standardmäßig ist das Kontrollkästchenfeld auf folgenden Wert aktiviert: “Frei“. Wenn der Benutzer dies deaktiviert, werden unten weitere Kontrollkästchen angezeigt.
Wie kann man diesen Zweck erreichen, indem man formidable auf WordPress verwendet?
Übrigens unten ist HTML-Code von diesem Link oben:
<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>
Und das ist das Javascript-Snippet von diesem Link oben:
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";
}
}
}
*Aktualisierung 1
- Wenn das erste Kontrollkästchen aktiviert ist, werden andere Optionen deaktiviert (Standardeinstellung).
- Wenn das erste Kontrollkästchen deaktiviert ist, können andere Optionen aktiviert oder deaktiviert werden, und es können auch die Zahlenfelder ausgefüllt werden
- Die anderen Optionen, wenn ein oder mehrere Kontrollkästchen deaktiviert sind, können auch die Zahlenfelder ausfüllen
*Aktualisierung 2
Hier ist der vollständige Quellcode von der ursprünglichen Website: gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73
*Aktualisierung 3
Hier ist der modifizierte Code aus Sallys Antwort:
(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);
*Update 4
Die 3 Schritte:
// 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.
Um Ihnen helfen zu können, geben Sie einen gültigen Link an. Bekomme den 500 Fehler. Oder fügen Sie einen weiteren Link mit dem gleichen gewünschten Verhalten hinzu.
– LebCit
11. Juli 2019 um 17:30 Uhr
Es tut mir leid, dass ich einen 500-Fehler bekomme, ich habe vergessen, dass sich die Site als privater Benutzer registrieren muss. Hier ist die Website, die ich versuche, mit demselben gewünschten Verhalten zu erstellen: korexindo.com/k-market/form-k-market Sie können am Ende des Formulars auf Wort sehen: “Harga”
– pije76
15. Juli 2019 um 12:31 Uhr
Können Sie die generierte Quelle/HTML für anzeigen das “Preis”-Element? Oder besser, erstellen Sie ein öffentliches Testformular mit diesen bedingten Feldern.
– Sally CJ
17. Juli 2019 um 6:49 Uhr
Hier ist der vollständige Quellcode: gist.github.com/pije76/6cb0a03d705b56f145cd0014da480f73
– pije76
17. Juli 2019 um 7:55 Uhr