How to disable form submit button if text field value is set to a specific value or blank?

Question

I've created a form using Google Docs which sends data to a google spreadsheet. I've taken the html code and reformatted it to my css/style and it works perfectly. It also displays a custom thankyou page and the only problem I'm facing is that it doesn't validate the data.

So, I'm thinking of disabling the submit button if the user hasn't entered anything in the required fields. Or, you could suggest a way to prevent blank form submission?

Currently My form has 2 text fields, and 4 checkboxes. I require both the text fields, but not the checkboxes. The text fields are currently populated/cleared with html/script:

value="Your Email or Phone No."
onfocus="if (this.value=='Your Email or Phone No.') this.value='';"

I require my form to disable the submit button if no data has been entered.

Here's my full code:

<script type="text/javascript">var submitted=false;</script>
<iframe name="hidden_iframe" id="hidden_iframe" style="display:none;" onload="if(submitted) {window.location='thankyou.htm';}"></iframe>
<form action="Google_Form_ID_Here_(removed-for-stackoverflow-post)" method="POST" target="hidden_iframe" onsubmit="submitted=true;">
<ol style="padding-left: 0">


<div dir="ltr"><label for="entry_145">Name &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;

<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.145" value="Enter Full Name" id="entry_145" dir="auto" aria-required="true" onfocus="if (this.value=='Enter Full Name') this.value='';">
</div>



<div dir="ltr" ><label for="entry_624">Contact Info &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
<label for="itemView.getDomIdToLabel()" aria-label="(Required field)"></label>
</label>
<input type="text" name="entry.624" value="Your Email or Phone No." id="entry_624" dir="auto" aria-required="true" onfocus="if (this.value=='Your Email or Phone No.') this.value='';">
</div>


<div align="center">
<div dir="ltr"><label for="entry_755"><br>Checkboxes
</div><br>
<div dir="ltr">Check which of the functions you&#39;ll be attending.</label><br><br>


<table align="center" width="248" height="128" border="0">

  <span>
  <tr>
  <td align="center"><input id="group_418_1" name="entry.418" type="checkbox" value="Event 1"/>
                <label class="vis_hide">Event 1</label></td>
    <td align="center"><input id="group_418_2" name="entry.418" type="checkbox" value="Event 2"/>
                 <label class="vis_hide">Event 2</label></td>
    <td align="center"><input id="group_418_3" name="entry.418" type="checkbox" value="Event 3"/>
                <label class="vis_hide">Event 3</label></td>
    <td align="center"><input id="group_418_4" name="entry.418" type="checkbox" value="Event 4"/>
                <label class="vis_hide">Event 4</label></td>
  </tr>
  </span>
</table>



<input type="hidden" name="draftResponse" value="[]">
<input type="hidden" name="pageHistory" value="0">


<div dir="ltr">
<input type="submit" name="submit" value="Confirm" class="sbutton">
</div></ol></form>

Please can someone provide help regarding this? Or a suggestion for alternative to prevent blank submissions or provide a link to the solution? Can this be done with some jquery script too?

Thanks for any help.

EDIT:

I tried this script but that didn't help too...

<script>
$(function () {
// give the <form> the ID "myform" (or whatever you want) before using this code!
var form = $("#myform");

var input1 = $("#entry_145"); //for name
var input2 = $("#entry_624"); //for contact


form.addEventListener("submit", function (evt) {
if (input1.val() == "" || input2.val() == "") {
evt.preventDefault();
}
}, false);
});
</script>

Susheel · Accepted Answer · 2013-06-24 18:43:56Z

1

Use it or leave it ,Dirty code

<script src="http://code.jquery.com/jquery-1.10.1.min.js" ></script>
<input type="text" class="req" id="name" />
<input type="text" class="req" id="post" />
<input type="submit" class="btn" id="button" onClick='alert("hi");' disabled/>

<script>
$(function (){
$('.req').change(function(){
    if ($('#name').val() == '' || $('#post').val() == '')
        {
            $('#button').attr('disabled',true);
        }
    else
        {
            $('#button').attr('disabled',false);
        }
});
});
</script>

answered Jun 24, 2013 at 18:43

Susheel

1,6791 gold badge12 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

ComFreek Over a year ago

That won't prevent the user from hitting [Enter] in the input field.

mk117 Over a year ago

That didn't work... I'm thinking of changing onsubmit property to validation and "=true" on completion. : I know what part to change, but don't know how to change it!...: <form action="Google_Form_ID_Here" method="POST" target="hidden_iframe" onsubmit="submitted=true;">

Susheel Over a year ago

sure as I said you can change it, I have not tested it , :), Warned already, was sleepy that time

mk117 Over a year ago

I found the solution on this page: w3schools.com/js/js_form_validation.asp ..... Thanks for any help!!

ComFreek · Accepted Answer · 2013-06-24 18:51:07Z

0

There are two ways for client-side "validation":

Use JavaScript and add a submit event listener to your <form> tag.
Add the required attributes to your text boxes:
```
<input type="text" required="required" />
```

But these won't prevent users with an old browser (when using second option) or computer savvy people who just send the form manually.

You have to perform server-side validation, too!

Try this for the change event listeners:

$(function () {
  // give the <form> the ID "myform" (or whatever you want) before using this code!
  var form = $("#myform");

  var input1 = $("#my-input1-name");
  var input2 = $("#my-input2-name");


  form.submit(function (evt) {
    if (input1.val() == "" || input2.val() == "") {
      evt.preventDefault();
    }
  });
});

edited Jun 24, 2013 at 18:51

answered Jun 24, 2013 at 17:43

ComFreek

29.5k18 gold badges107 silver badges157 bronze badges

4 Comments

mk117 Over a year ago

I'm using identifiers for a Google Docs based form! It doesn't validate after customizing. I tried several jquery plugins for validate but it still sends the data to the spreadsheet, without validating! .... How do I add change event listeners and to what? I mean what to change and which event listeners to use?

ComFreek Over a year ago

@user2377276 I've added an example.

mk117 Over a year ago

That didn't help either...Edited the question. ... Also, what do you mean by change event listener?

ComFreek Over a year ago

@user2377276 I'm sorry, I've mixed up jQuery and pure JavaScript/DOM things. The code is now corrected. Please try again. You don't actually need change in this case, submit should be sufficient.

Collectives™ on Stack Overflow

How to disable form submit button if text field value is set to a specific value or blank?

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related