Question

Hi I am an amateur programmer. I want to have the form appear dynamically without reloading the page once user clicks the radio button. Is there any reference I can find. Can someone help me with this please.

Here’s the HTML code

<p>First Name: <input type="text" name="fname" size="15" maxlength="20"/> </p>

<p>Term <select name="term">
    <option value="noterm">No Term</option>
    <option value="1year">1 Year</option>

</select></p>

<p>Enter IMEI: <input type="text" name="imei" size="15" maxlength="20" value=""/> </p>
<p>Selling Price: <input type="text" name="sprice" size="15" maxlength="20" value=""/> </p>
<p>Rep: <input type="text" name="rep" size="5" maxlength="3" value=""/> </p>
<p><input type="submit"name="submit" value="Tender" /></p>


</form>
<!--This is where I need the action to HAPPEN-->
<form>
<input type="radio" name="Credit" value="ISC" /> ISC<br />
<input type="text" name="credit1" size="15" maxlength="10" value=""/>
</form>

Answer 1

The easiest way will be to give your radio input and the hidden text input an id, and then use the following JavaScript:

document.getElementById("Credit").onclick = function() {
    document.getElementById("credit1").style.display = "block";
}

You will need to hide the text input initially, which you can do from in your CSS with display:none. You can see an example of that here.

If you are able to use jQuery it will be even easier, without adding an id to your input elements, assuming your name attributes are unique:

$("input[name=Credit]").click(function() {
    $("input[name=credit1]").show();
});