Using buttons to populate form fields | ww.wp.xz.cn

Resolved malpica
(@malpica)

10 years, 3 months ago

Hi,

I have inserted this code in html field to populate field using buttons.
Now, how can I use this field to calculate with another fields?
:
<script> function moveNumbers(num) {
var txt=document.getElementById(“result”).value;
txt=txt + num;
document.getElementById(“result”).value=txt;
}
</script>
Codigo Postal:
<input type=”button” value=”1″ name=”no” onclick=”moveNumbers(this.value)”>
<input type=”button” value=”2″ name=”no” onclick=”moveNumbers(this.value)”>
<input type=”button” value=”3″ name=”no” onclick=”moveNumbers(this.value)”>
<input type=”text” id=”result” size=”20″>

Best regards

https://ww.wp.xz.cn/plugins/calculated-fields-form/

Viewing 10 replies - 1 through 10 (of 10 total)

Plugin Author

(@codepeople)

10 years, 3 months ago

Hi,

Your code is correct.

Could you send me the link to your webpage to check the code in action, please?

Best regards.

Thread Starter

(@malpica)

10 years, 3 months ago

Sorry but I don’t publised form.
I have a html field with the code above: fieldname20

Now in fieldname21 I want multiply result of fieldname20 by 2. How can I pass the result of fieldname20 to fieldname21?

The code of fieldname20 is:

<script> function moveNumbers(num) {
var txt=document.getElementById("result").value;
txt=txt + num;
document.getElementById("result").value=txt;
}
</script>
Codigo Postal:
<input type="button" value="1" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="2" name="no" onclick="moveNumbers(this.value)">
<input type="button" value="3" name="no" onclick="moveNumbers(this.value)">
<input type="text" id="result" size="20">

Plugin Author

(@codepeople)

10 years, 3 months ago

Hi,

If the fieldname21 field is a calculated field, and the fieldname20 is a number field, the equation to assign to the fieldname21 is as simple as:

fieldname20*2

In reality the rest of the code is not needed in this case.

Best regards.

Thread Starter

(@malpica)

10 years, 2 months ago

Something I’m doing wrong. I have a fieldname20 which is populated with buttons. And I want to do a sum in fieldname21, but it does not work.

My web:

Can you help me?

Best regards

Plugin Author

(@codepeople)

10 years, 2 months ago

Hi,

You should use, in the moveNumber function, a name for the global variable without a different format than fieldname#, the code of the function can be:

<script>
  function moveNumbers(num) {
    var txt=document.getElementById('result').value;
    txt=txt + num;
    document.getElementById('result').value=txt;
    globalvar= result;
    fbuilderjQuery.fbuilder.calculator.defaultCalc("#cp_calculatedfieldsf_pform_1");
}
</script>

Pay attention to the last line of code that evaluates all equations in the form: “cp_calculatedfieldsf_pform_1”

and finally the equation associated to the calculated field would be:

125+globalvar

If you need additional help with your custom project, you should hire a custom coding service through my personal webpage:

http://cff.dwbooster.com/customization

Best regards.

Thread Starter

(@malpica)

10 years, 2 months ago

I have modified my function and now the result is:

125+globalvar=
125[object HTMLInputElement]

Thanks

Plugin Author

(@codepeople)

10 years, 2 months ago

Hi,

My fault, the correct code would be:

<script>
  function moveNumbers(num) {
    var txt=document.getElementById('result').value;
    txt=txt + num;
    document.getElementById('result').value=txt;
    globalvar= txt;
    fbuilderjQuery.fbuilder.calculator.defaultCalc("#cp_calculatedfieldsf_pform_1");
}
</script>

Best regards.

Thread Starter

(@malpica)

10 years, 2 months ago

Yes, now this work fine.

Great support.

Best regards

(@fisherman777)

9 years, 1 month ago

Fantastic! Over a year old and this helped me. Thanks! Just what I was looking for. My buttons will be images though.

(@fisherman777)

9 years, 1 month ago

I thought this was what I was looking for. Can I use images instead of buttons to make a selection in a dropdown box or set of radio buttons?

Say I have small images. One red, one blue and one black. If the red imaged is clicked, red in the dropdown would be selected.

Example: (I have a static php form that this works in.)

        <p>Acrylic Color<br>
    <br>
    <img onclick="SelectADropdownItem('acrylic-dropdown','Blue')" src="../quote/swatch/blue.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Blue Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Red')" src="../quote/swatch/red.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Red Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Yellow')" src="../quote/swatch/yellow.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Yellow Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Green')" src="../quote/swatch/green.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt=
    "Green Face"><br>
    <img onclick="SelectADropdownItem('acrylic-dropdown','Orange')" src="../quote/swatch/orange.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Orange Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Grey')" src="../quote/swatch/grey.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Grey Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','White')" src="../quote/swatch/white.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="white Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Black')" src="../quote/swatch/black.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt="Black Face">
    <img onclick="SelectADropdownItem('acrylic-dropdown','Other')" src="../quote/swatch/other.jpg" style=
    "border:none; height:44px; width:44px; cursor:pointer; margin:0 5px 0 5px;" alt=
    "Other Face"><br>

<select id="acrylic-dropdown">
      <option>
        Select here or click a color above.
      </option>

      <option value="Blue">
        Blue
      </option>

      <option value="Red">
        Red
      </option>

      <option value="Yellow">
        Yellow
      </option>

      <option value="Green">
        Green
      </option>

      <option value="Orange">
        Orange
      </option>

      <option value="Grey">
        Grey
      </option>

      <option value="White">
        White
      </option>

      <option value="Black">
        Black
      </option>

      <option value="Other">
        Other
      </option>
    </select>

function SelectADropdownItem(id,val)
{
    var d = document.getElementById(id);
    for( var i=0; i<d.length; i++ )
    {
        if( d[i].value == val ) { d[i].selected = true; }
        else { d[i].selected = false; }
    }
}

This reply was modified 9 years, 1 month ago by Fisherman777.
This reply was modified 9 years, 1 month ago by Fisherman777.

Viewing 10 replies - 1 through 10 (of 10 total)

The topic ‘Using buttons to populate form fields’ is closed to new replies.

Tags

11 replies
3 participants
Last reply from: Fisherman777
Last activity: 9 years, 1 month ago
Status: resolved