How to change Form choices and hide form field

HTML & CSS
1

The Form below has fields with a couple of options, for example:

       <option value="0">{{LANG public}}</option>
	<option value="1">{{LANG private}}</option>
	<option value="2">{{LANG unlisted}}</option>

I’d like to change the Form so that the only choice is “public” and hide the whole field, but the script will recognize that all Form uploads are the “public” choice.

Any help with this will be appreciated. Here is the Form code:

<form action="" class="form-horizontal setting-panel pt_forms" method="POST">
					<div class="form-group">
						<label class="col-md-12" for="title">{{LANG video_title}}</label>
						<div class="col-md-12">
							<input id="title" name="title" type="text" placeholder="" class="form-control input-md">
							<span class="help-block">{{LANG video_title_help}}</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="description">{{LANG video_descritpion}}</label>
						<div class="col-md-12">
							<textarea name="description" id="description" cols="30" rows="5" class="form-control"></textarea>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="category_id">{{LANG category}}</label>
						<div class="col-md-12">
							<select name="category_id" id="category_id" class="form-control">
								<?php foreach($pt->categories as $key => $category) {?>
								<option value="<?php echo $key?>"><?php echo $category?></option>
								<?php } ?>
							</select>
						</div>
					</div>
					<div class="form-group">
	                     <label class="col-md-12" for="privacy">{{LANG privacy}}</label>
	                     <div class="col-md-12">
	                        <select name="privacy" id="privacy" class="form-control">
	                           <option value="0">{{LANG public}}</option>
	                           <option value="1">{{LANG private}}</option>
	                           <option value="2">{{LANG unlisted}}</option>
	                        </select>
	                     </div>
	                  </div>
	                  <div class="form-group">
	                     <label class="col-md-12" for="age_restriction">{{LANG age_restriction}}</label>
	                     <div class="col-md-12">
	                        <select name="age_restriction" id="age_restriction" class="form-control">
	                           <option value="1" selected>{{LANG all_ages}}</option>
	                           <option value="2">{{LANG only_18}}</option>
	                        </select>
	                     </div>
	                  </div>
					<div class="form-group">
						<label class="col-md-12" for="tags">{{LANG tags}}</label>
						<div class="col-md-12">
							<input id="mySingleFieldTags" name="tags" type="text" placeholder="" class="form-control input-md">
							<span class="help-block">{{LANG tags_help}}</span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-md-12" for="thumbnail">{{LANG thumbnail}}</label>
						<div class="col-md-12">
							<div class="upload-product-image pull-left" onclick="document.getElementById('thumbnail').click(); return false">
								<div class="upload-image-content">
									<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-camera"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"></path><circle cx="12" cy="13" r="4"></circle></svg>
								</div>
							</div>
							<div style="overflow-x: auto;width: calc(100% - 112px);">
								<div id="productimage-holder"></div>
							</div>
							<input id="thumbnail" name="thumbnail" type="file" class="hidden" accept="image/*">
							<span class="help-block">jpg, png, gif</span>
						</div>
					</div>
					<div class="last-sett-btn modal-footer" style="margin: 0px -40px -10px -40px;">
						<button type="submit" id="submit-btn" class="btn btn-main setting-panel-mdbtn" disabled><svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-check-circle'><path d='M22 11.08V12a10 10 0 1 1-5.93-9.14'></path><polyline points='22 4 12 14.01 9 11.01'></polyline></svg> {{LANG publish}}</button>
					</div>
					<input type="hidden" name="video-location" id="video-location" value="">
				</form>
2

Just add a hidden field and delete the dropdown.

<input type="hidden" name="privacy" value="0">

3

Thanks for the reply. I decided to just leave “unlisted” as the only option, so
I tried adding your code, to test, and commented out:

                           <!--<option value="0">{{LANG public}}</option>-->
                           <!--<option value="1">{{LANG private}}</option>-->

                           <input type="hidden" name="privacy" value="0">
                           <input type="hidden" name="public" value="0">

but the upload remained ‘public’. Any additional guidance will be welcomed.

5

Have you simply tried using the hidden attribute for the options you want hidden. It’s a global attribute common to all HTML elements.

<option> element
This element includes the global attributes.

<div class="form-group">
  <label class="col-md-12" for="privacy">privacy</label>
  <div class="col-md-12">
    <select name="privacy" id="privacy" class="form-control">
      <option hidden value="0">public</option>
      <option hidden value="1">private</option>
      <option selected value="2">unlisted</option>
    </select>
  </div>
</div>

That’s what I’ve shown above

6

Thanks for the reply. That works.
So, since the Form now only has one option, how do I hide the whole field, yet still have the script recognize that all Form uploads are the “unlisted” choice?
I look forward to any additional guidance.

7

Are you wanting to hide the label too?

8

Yes, so that the Form just automatically knows all uploads are ‘unlisted’, so no need to display any of that

9

Add another class to your form-group div so it does not effect other divs that need to remain visible.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Test Page</title>
<style>
.form-group.hidden {
  visibility:hidden;
}
.form-group.hidden {  /*this is being used, it overrides the previous rule*/
  position:absolute;
  left:-999em;
}
p {margin:0}
</style>

</head>
<body>

<div class="form-group hidden">
  <label class="col-md-12" for="privacy">privacy</label>
  <div class="col-md-12">
    <select name="privacy" id="privacy" class="form-control">
      <option hidden value="0">public</option>
      <option hidden value="1">private</option>
      <option selected value="2">unlisted</option>
    </select>
  </div>
</div>
<p>content that follows select (space is preserved when using visibility:hidden)</p>
<p>content that follows select (space is removed when moving offscreen with position absolute)</p>

</body>
</html>

If all .form-group divs are hidden then you don’t need the new class, just style from it.

See this link for more info on Invisible Content
https://webaim.org/techniques/css/invisiblecontent/

10

Thanks so much for your great help.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.