Member Avatar for ehpratah

Move this from JavaScript / DHTML / AJAX

Good Day everyone i'm having a hardtime figuring out how to make this certain idea of mine to work basically im trying to capture the checkbox value and its label but im not getting anyluck..and also im having problem explaning what im trying to do so i decided to attached an image of what will be the output..

Im not asking for any script but just an idea how can i achieved it but if somebody's generous enough i wont reject it either:))

the form part 9ba01e73fbf743c827029b1c945651c1

and the expected result

40d3fe71abf64af739553febc1e2461c

  • 4 Contributors
  • 10 Replies
  • 361 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by ehpratah
Member Avatar for paulkd

Are you using a database to populate the checkbox/input fields?

Member Avatar for ehpratah

Hi No im not using db. the intended process of that is when you check the checkbox the textbox will be shown and the user will input a value which is easy. but the tricky part for me is just to show only the selected checkbox on the preview page without the others

Member Avatar for paulkd

OK. I've had forms like this in the past and have wondered "do I really need the checkbox?" if the user enters a value in the text box would this be enough to say that they have selected "Gas: 200" ?

Member Avatar for paulkd

Does you page use JavaScript to add a text field if a checkbox is checked?

Member Avatar for EvolutionFallen

I have to agree with paulkd, are the checkboxes really necessary? Can't you just check if the value in the input box is not empty, and greater than 0?

Also, please provide your HTML and form processing code so we can see where you're having a problem.

Member Avatar for Phaelax

This will show/hide the textboxes when clicking the checkboxes. (seems to have an issue with IE though)

<head>
    <style type="text/css">
        .tb_hide{display:none;}
    </style>

    <script type="text/javascript">
        function myfunction(id){
            e = document.getElementById(id);
            tb = document.getElementById(id+"_tb");
            if(e.checked){
                tb.style.display = "inline";
            }else{
                tb.style.display = "none";
            }
        }
    </script>

</head>



<html>
<body>

<form>
    <input type="checkbox" onchange="myfunction('gas_cb')"  name="gas_cb"  id="gas_cb"  value="Gas">Gas
    <input type="textbox" class="tb_hide" name="gas_cb_tb" id="gas_cb_tb"><br/>
    <input type="checkbox" onchange="myfunction('toll_cb')" name="toll_cb" id="toll_cb" value="Toll Fee">Toll Fee
    <input type="textbox" class="tb_hide" name="toll_cb_tb" id="toll_cb_tb"><br/>
    <input type="checkbox" onchange="myfunction('gps_cb')"  name="gps_cb"  id="gps_cb"  value="GPS">GPS
    <input type="textbox" class="tb_hide" name="gps_cb_tb" id="gps_cb_tb"><br/>
    <input type="checkbox" onchange="myfunction('key_cb')"  name="key_cb"  id="key_cb"  value="Lost Key">Lost Key
    <input type="textbox" class="tb_hide" name="key_cb_tb" id="key_cb_tb"><br/>
    <input type="checkbox" onchange="myfunction('park_cb')" name="park_cb" id="park_cb" value="Parking Fee">Parking Fee
    <input type="textbox" class="tb_hide" name="park_cb_tb" id="park_cb_tb"><br/>
</form>


</body>
</html>
Member Avatar for ehpratah

Hi everyone thanks by the way for all your response and sorry for the late update having a really nasty weather here in our place.

Does you page use JavaScript to add a text field if a checkbox is checked?

yes my form do have js for showing the textbox

Also, please provide your HTML and form processing code so we can see where you're having a problem.

the part im having problem right now is getting the grasp on how can i make only the checkbox with value show in my process form. im still lost on how can i make it work..

here is my form by the way

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script language="javascript">
$(function() {

  // hide all text inputs
  hideAllTextInputs();

  // radio click
  $("ul input[type='checkbox']").click(function() {

    // current <li>
    var li = $(this).closest("li");

    // show it's text
    li.find("input[type='text']").show();

    // hide all again
    hideAllTextInputs();
  });

});

function hideAllTextInputs() {
  // hide all text inputs
  $("ul input[type='checkbox']")
    .not(":checked")
    .closest("li")
    .find("input[type='text']")
    .hide();
}
</script>
<meta charset=utf-8 />
<title></title>
  <style>
    ul { list-style: none; }
    ul li { line-height: 26px; }
  .style1 {
    font-size: 14px;
    color: #FF0000;
}
  </style>
</head>
<body>
<span class="style1">Add Ons</span>
<form name="form1" method="post" action="process.php">
  <ul>
    <li>
      <label for="fuel">
        <input type="checkbox" id="Fuel" name="Fuel" /> Gas
      </label>
      <input type="text" id="Gasprice" name="Gasprice" />
    </li>
    <li>
      <label for="toll">
        <input type="checkbox" id="Tollfee" name="Tollfee" /> Toll Fee
      </label>
      <input type="text" id="Tollprice" name="Tollprice" />
    </li>
    <li>
      <label for="gps">
        <input type="checkbox" id="GPS" name="GPS" /> GPS
      </label>
      <input type="text" id="Gpsprice" name="Gpsprice" />
    </li>
    <li>
      <label for="key">
        <input type="checkbox" id="Lostkey" name="Lostkey" /> Lost Key
      </label>
      <input type="text" id="Lostkeyprice" name="Lostkeyprice" />
    </li>
    <li>
      <label for="parking">
        <input type="checkbox" id="Parkingfees" name="Parkingfees" />Parking Fee
      </label>
      <input type="text" id="Parkingfeeprice" name="Parkingfeeprice" />
    </li>

  </ul>

    <input type="submit" name="Submit" value="Preview">
</form>
<p>&nbsp;</p>
</body>
</html>
Member Avatar for ehpratah

OK. I've had forms like this in the past and have wondered "do I really need the checkbox?" if the user enters a value in the text box would this be enough to say that they have selected "Gas: 200" ?

hi do you mean something like this?

in my process form i'll make an if statement something like

$gas=$POST['Fuel'];

if($gas!=0){
echo"Gas:$gas";
}
else{

}

well haven't tested it yet but i thing this will work..thanks for the idea guys

Edited by ehpratah because: typo
Member Avatar for paulkd

This code is just a simulation of your code to show how you can code the form handler process.php. I have ommitted some text boxes in my form.

form

<form action="preview.php" method="post">
<p><input type="checkbox" name="ch-gas" value="Gas"> Gas <input type="text" name="gas" value="200"></p>
<p><input type="checkbox" name="ch-toll" value="Toll Fee"> Toll Fee </p>
<p><input type="checkbox" name="ch-gps" value="GPS"> GPS <input type="text" name="gps" value="200"></p>
<p><input type="checkbox" name="ch-lostkey" value="Lost Key"> Lost Key</p>
<p><input type="checkbox" name="ch-parkingfee" value="Parking Fee"> Parking Fee <input type="text" name="parkingfee" value="200"></p>
<input type="submit" value="Preview">
</form>

process.php

<?php 
foreach($_POST as $field => $value) {
    preg_match('/^ch\-([a-z]+)$/', $field, $matches);
    if($matches) {
        if($_POST[$matches[1]]!="") {
            echo $_POST[$field].': '.$_POST[$matches[1]].'<br>';
        }
    }
}
?>
Member Avatar for ehpratah

Hi Guys, been very busy the past few days..thank you all for your time helping me out..my question is already answered and i just stick with what i came up base on your suggestions which is this one

    $gas=$POST['Fuel'];
    if($gas!=0){
    echo"Gas:$gas";
    }
    else{
    }
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.