Home/ Questions/Q 8080929
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T16:33:53+00:00

I am struggling to get a couple of javascripts scripts to work properly. The

  • 0

I am struggling to get a couple of javascripts scripts to work properly.

The first is a simple validation script on the textbox. It works once but if you hit the submit a second time you can proceed without entering anything. How do I make the script to fire (and work) every time the submit button is clicked?

The second thing I’m trying to do is get a div class to change based on a radio click . The problem is that because all the radio buttons share the same id/name it always changes the first radio button background no matter which radio button was clicked. How do I get it to change the class of the div containing it?

HTML looks like (with the javascript in the head tags as shown…

<head>
<link href="/css/0051.css" rel="stylesheet" type="text/css" />

<script type="text/javascript">

function validateForm() {
        var x=document.forms["form"]["txtbox_1501"].value;
    if (x==null || x=="" || x=="Please type your answer in this box")
    {
        document.getElementById("txtbox_container").id = "txtbox_err";
        document.getElementById("ques_txt").className = "ques_txt_err";
        document.getElementById("ques_inst").className = "ques_inst_err";
        return false;
    }
}

function radioDiv() {
    document.getElementById("radio_label").className = "radio_input_selected";
}

</script>

</head>

<body>


<form id="form" name ="form" action="/php/process.php" onsubmit="return validateForm()"  method="post">

<div id="txtbox_container">
       <div id="ques_container">
          <a id="ques_txt" class="ques_txt">Please tell us your name:</br></a>
          <a id="ques_inst" class="ques_inst">(How you would like to be referred to in this demo)</br></a>
       </div>
       <div id="txtbox_input">
          <input type="text" name="txtbox_1501" value="Please type your answer in this box" onfocus="if(!this._haschanged){this.value=''};this._haschanged=true;" /></br>
       </div>
    </div>

    <div id="radio_container">
       <div id="ques_container">
          <a class="ques_txt">What is your gender?</br></a>
          <a class="ques_inst">(Are you female or male?)</br></a>
       </div>
       <label>
          <div id="radio_label" class="radio_input">
             <input type="radio" name="radio_1503" value="2" onclick="return radioDiv()" />
             <a class="radio_label">Female</a>
          </div>
       </label>
       <label>
          <div id="radio_label" class="radio_input">
             <input type="radio" name="radio_1503" value="1" onclick="return radioDiv()" />
             <a class="radio_label">Male</a>
          </div>
       </label></div> 
</div>      

<div id="button">
   <input type="submit" class="submitbutton" value=""/>

</div>  

    </form>

</body>

Any suggestions would be gratefully received. Thanks.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How do I make the script to fire (and work) every time the submit
    button is clicked?

    The first time you run this line of code:

    document.getElementById("txtbox_container").id = "txtbox_err";

    Is properly executed. However, in any following call, you won’t be able to getElementById passing an id which no longer exists! (you just overwrote that element’s id by another one)

    So, getElementById("txtbox_container") returns null from the 2nd call onwards, and trying to set the id property of null yields this fatal error:

    Uncaught TypeError: Cannot set property ‘id’ of null

    Which breaks your function before returning false which makes the form submit normally.

    You can either just comment that line out, or if you need styling change/add a CSS class instead of changing the id.

    How do I get it to change the class of the div containing it?

    You can’t have 2 elements with same id as it’s invalid markup. Instead, pass the reference to the clicked radio button element (this) to your function and get its parentNode to change the styling as you want: 

    //HTML
onclick="return radioDiv(this)"
//JS
function radioDiv(el) {
    el.parentNode.className = "radio_input radio_input_selected";
}

    I’m keeping the original class as well, as you probably want to reset the radio elements in case the user selects another radio:

    function radioDiv(el) {
    var radios = document.getElementsByClassName('radio_input');
    //could use a for loop to reset these, but there are only 2 radios...
    radios[0].className = "radio_input"; radios[1].className = "radio_input";
    el.parentNode.className = "radio_input radio_input_selected";
}​

    Here you go.

    JSFiddle Live Demo

    Tips:

    Always validate your HTML, a sturdy DOM structure is a must for any good JS coding. The W3C validation service may be a little too demanding, but any good markup highlighter program can show you unclosed and invalid syntax tags – even the JSFiddle.net online editor.

    Always check your JS console for errors:
    Firefox: Ctrl+Shift+K (or install Firebug and press F12);
    Chrome: Press F12 and select the Console tab.

    This will display errors which may break your code like this one, so you may post it in your questions if you can’t solve them next time. :)

    • 0