Submit button not working with checkboxes - javascript

im making a website for this company and they have to go through this to make deliveries, for some reason my submit button won't work, sorry im new.
the code i pasted is in 2 different section, the script is on the top while the div class is on the body section.
Tried searching the web but cant seem to find a solution.
</script>
<div class="4u12u$(large)">
<input type="checkbox" id="hygiene" name="hygiene"><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety"><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan"><label for="pan">Pan/Wheel Chuck</label>
</div>
I want to do something like "Check all of this before proceeding" thingy.

You are missing the basics, ive chosen to GET the form here as it applies to the url
<form action="#" method="get">
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked="checked">
<input type="submit" value="submit">
</form>
You can learn about html (and other languages) over at https://www.w3schools.com/ they have some good resources to start from.

try this way
<div class="4u12u$(large)">
<form action="your url" method="post">
<input type="checkbox" id="hygiene" name="hygiene" required><label for="hygiene">Hygiene</label>
<input type="checkbox" id="safety" name="safety" required><label for="safety">Safety</label>
<input type="checkbox" id="pan" name="pan" required><label for="pan">Pan/Wheel Chuck</label>
</form>
</div>

Related

Radio Button and AngularJS

I know this is a common question on SO, but none of those solve my issue.
This code doesn't allow me to click/select the radio button. And I am unable to see whats wrong. It may bey something simple that I am missing, I'll be glad if someone can help out.
<div input-field class="col m6" ng-init="student.username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="0" required />
<label>Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student.username" value="1" required />
<label>Auto Generate</label>
</p>
The problem is I cannot select the Radio button, where set in ng-init or not.
JSFIDDLE: https://jsfiddle.net/znfvmr80/5/
Well the fix was relative easy, and kinda due to me missing out on a for attribute. Thanks to #Joyson for helping out, him thinking got me thinking.
This is the correct code:
<div input-field class="col m6" ng-init="student_username = 0">
<p>Username Generation</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="0" required id="same_as_reg" />
<label for="same_as_reg">Same as Registration ID</label>
</p>
<p>
<input class="with-gap" type="radio" name="user" ng-model="student_username" value="1" required id="autogen" />
<label for="autogen">Auto Generate</label>
</p>
Materialize requires a for attribute label for radio buttons to work.
Thanks everyone!
The code you have given is working fine i think you could check more in your js before or after initialization.

Jquery steps "destroy" method is removing values given by User

I have a Questionnaire form which is break down in steps by using JQuery steps plugin. In the process of form submission there is a certain point where i need to remove steps. When i use "destroy" JQuery steps method, the values filled in the form are lost.
For example:
<form>
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
</form>
I am using following steps:
Convert form into Jquery steps
Opening this form in Simple modal dialog.
User fill this form and close modal dialog.
I am using "destroy" jQuery steps method after closing dialog.
When user re-open simple modal dialog again then i am converting this form into JQuery steps. At that point user see that all filled values in the form are lost.
The problem is at the 4th step. User have filled form at 3rd step. When i converted in back to original HTML, values given by user are lost.
Expected values at 4th step
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="Ishwar Lal" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" selected='selected' />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
but output is:
<h3>Form A</h3>
<section>
What is your name?<br/>
<input type="text" value="" name="yourname" />
What is your age group? <br/>
<input type="radio" name="agegroup" value="1" />1-20
<input type="radio" name="agegroup" value="2" />20-40
<input type="radio" name="agegroup" value="3" />40-60
<input type="radio" name="agegroup" value="4" />60+
......
......
<section>
I need to remove JQuery steps from from with filled values. I have read JQuery documentation but not found any idea about this.
I think that you must to store data before you destroy the component. When you destroy a component it is destroyed, nothing else what to do.
If you store the data , then destroy object, and then initialize object with the data you stored. You can store in an array/object/variable, or you can store in sessionStorage / localStorage for use in other pages.

Form HTML with Google Tag Manager

Im trying to add a simple form in a custom html tag manager.
<form action="https://script.google.com/macros/s/AKfycbwZezgQCL5oLqGTfY5_eQxzWCFCy6alsgk6HOJLP0UcanoK6Gsp/exec" method="GET" class="ch-form myForm" novalidate="novalidate">
<div class="ch-form-row">
<label for="input_ico">Nombre:</label>
<input type="text" name="newletter_name" placeholder="Name">
</div>
<div class="ch-form-row">
<label for="input_ico">Sexo:</label>
<input type="radio" name="sex" value="male" checked>Male
<br>
<input type="radio" name="sex" value="female">Female
</div>
<div class="ch-form-actions">
<input type="submit" value="Enviar"/>
</div>
</form>
But I can't publish it, because this error:
Invalid Template modal Invalid HTML, CSS, or JavaScript found in template.
Any idea why? HTML Form is not suportted by GTM?
Solved:
novalidate="novalidate" ---> not supported
placeholder ----> not supported
Just remove this.

Getting Radio Buttons to output info

I am very new to coding and CS and so sorry if this question is kind of obvious. I couldn't really find anything about this before that I understood. I am making a set of radio buttons and I would like the user to check off what applies to them and submit it. How do I get the value of the button (with javascript) that they click so that my code could generate a corresponding output.
<p> Pick a hair length </p>
<input type="hidden" value="" id="rdValue" />
<div>
<label> <input type="radio" name="length" value="short"> Short </label>
</div>
<div>
<label> <input type="radio" name="length" value="med"> Medium </label>
</div>
<div>
<label><input type="radio" name="length" value="long"> Long </label>
</div>
<p> Pick a hair type </p>
<div>
<label> <input type="radio" name="type" value="curly"> Curly </label>
</div>
<div>
<label> <input type="radio" name="type" value="wavy"> Wavy </label>
</div>
<div>
<label><input type="radio" name="type" value="straight"> Straight </label>
</div>
You could use this to get the value for the selected radio button from the "length" radio buttons for example:
$("input:radio[name='length']").val();
This question is very similar to yours, and has answers in jQuery and Javascript. It's pretty simple.
Basically, you get the DOM elements of the radio buttons from the page, then loop through them checking their values. Once you find one that is "true", you've found the selected value.

Javascript: Enabled / Disable radio on selected with javascript

I would like to make this form dynamic with prototype. I mean, the radio should be disabled, but when you chose one, with js, it should turn them enabled, same way if you chose the other one, the 1st should turn disabled.
This is my HTML, but I have no idea where to start with JS to make this work, thank you
<form id="uploadForm" method="post" action="/parser/parseCurriculumVitae.do" enctype="multipart/form-data">
<fieldset>
<div id="uploadCv">
<input type="radio" id="uploadCvSelector" name="uploadFormSelector"/>
<input disabled type="file" id="uploadCv" name="uploadCv" />
</div>
<div id="pastedCv">
<input type="radio" id="pastedCvSelector" name="uploadFormSelector" />
<textarea disabled id="pastedCv" name="pastedCv" rows="8" cols="40" onclick="this.value=''">Paste your Cv Here</textarea>
</div>
<input type="submit" value="Send'em!"/>
</fieldset>
</form>
i think your request to use prototype prejudices the answer. you can do this just fine without a library.
<input type="radio" id="pastedCvSelector" name="uploadFormSelector" onclick="document.getElementById('pastedCv').disabled=false;document.getElementById('uploadCv').disabled=true;">
<textarea disabled id="pastedCv" name="pastedCv" rows="8" cols="40" onclick="this.value=''">Paste your Cv Here</textarea>
UPDATED (again)

Categories