Unable to submit form with multiple div id, when i have only one div id form is submitting correctly when i use more than one div id form is not submitting. I want to show the new fields when a radio button is pressed, for the purpose of hiding and visbility i used div id(four div id with different id names) please help
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Report Generation</title>
<link rel="stylesheet" media="screen" href="../css/formstyle.css">
<script language="javascript" type="text/javascript">
function setVisible(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.visibility = visible ? 'visible' : 'hidden';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
function setDisplay(id, visible) {
var o = document.getElementById(id);
if (typeof(o) != 'undefined') o.style.display = visible ? 'block' : 'none';
if (typeof(o) == 'undefined') alert("Element with id '" + id + "' not found.");
}
</script>
</head>
<body onLoad="setVisible('Div4', false); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div2', false);">
<form class="reg_form" action="pr.php" method="post" name="reg_form">
<ul>
<li>
<p>What type of Report you want to Create ?</p><br/>
</li>
<li>
<input type='radio' name='myradio' value='1' onclick="setVisible('Div1', true); setVisible('Div2', false);setVisible('Div3', false);setVisible('Div4', false);" />Based on Date<br/>
<input type='radio' name='myradio' value='2' onclick="setVisible('Div2', true); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div4', false);" />Based on Income<br/>
<input type='radio' name='myradio' value='3' onclick="setVisible('Div3', true); setVisible('Div1', false);setVisible('Div2', false);setVisible('Div4', false);" />Based on District<br/>
<input type='radio' name='myradio' value='4' onclick="setVisible('Div4', true); setVisible('Div1', false);setVisible('Div3', false);setVisible('Div2', false);" />Based on Age<br/>
</li>
<li>
<div id='Div1'>
<p>From Date:</p> <input type="date" name= "from" required><br/>
<p>To Date:</p> <input type="date" name= "to" required><br/>
</div>
</li>
<li>
<div id='Div2'>
<p>Select Slab:</p>
<input type="radio" name="slab" value="s1">Slab-1<br/>
<input type="radio" name="slab" value="s2">Slab-2<br/>
<input type="radio" name="slab" value="s3">Slab-3<br/>
</div>
</li>
<li>
<div id='Div3'>
<p>Enter District:</p><br/>
<input type="text" name= "dist" required>
</div>
</li>
<li>
<div id='Div4'>
<p>Select Age From:</p><br/>
<input type="number" name= "afrom" required>
<p>To:</p>
<input type="number" name= "ato" required>
</div>
</li>
<li>
<button class="submit" type="submit">Submit Form</button>
</li>
</ul>
</div>
</form>
</body>
</html>
The problem is that you have required attributes on hidden input fields. When the form is submitted with these fields hidden (and them having no value), you're getting the errors:
An invalid form control with name='from' is not focusable.
An invalid form control with name='to' is not focusable.
An invalid form control with name='dist' is not focusable.
An invalid form control with name='afrom' is not focusable.
An invalid form control with name='ato' is not focusable.
By showing all the fields, or removing the required attributes, the form submits fine. A solution to this is to add the required attribute when shown and remove it when hidden.
To achieve this, firstly, define the following function:
function setRequired()
{
var r = document.getElementsByClassName('required')
for (var i in r)
{
if (r[i].parentNode && r[i].parentNode.style.visibility == 'visible')
{
r[i].required = true
}
else
{
r[i].required = false
}
}
}
Secondly, replace all required attributes with class="required". And thirdly, add ;setRequired() to the onclick events of the four radio buttons (at the end, after the setVisibles).
change:
<button class="submit" type="submit">Submit Form</button>
to:
<input type="submit">Submit Form</input>
Related
This mostly works. It shows the SSN when the first Val radio button is picked. It also shows the PaperAppliction when the second Val radio button is picked. The ONLY problem is that the field PaperApplication shows when the form is loaded before any radio buttons are picked. I need it to hide both SSN and PaperApplicaition until one of the radio buttons is picked, and then show the proper field. What am I missing?
Here is the JS
$(".field.SocialSecurity input[type=radio]").on("change", function() {
if (
$(this).val() ==
"As a U.S. Citizen, permanent resident, or temporary working resident, I have a Social Security Number."
) {
$(".field.SSN").show();
$(".field.SSN input").focus();
$(".field.PaperApplication").hide();
} else if (
$(this).val() ==
"Due to my international student status, my residency status, or my specific visa type, I do not have a Social Security Number."
) {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
$("field.SSN").hide();
} else {
$("field.PaperApplication").hide();
}
});
Here is the form html
US Citizen International Student Other
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
You can just set them hidden initially using HTML markup to add a style attribute to the element. style="display:none" should do it.
e.g. <div class="field SSN" style="display:none;"> and the same for the other one.
Hide them both when the script is called, and also outside of the if statements when the change event is fired. Also, make your radio button values a word or two, camelCased. Put the string describing the button in the label tag:
$(".SSN, .PaperApplication").hide();
$(".field.SocialSecurity input[type=radio]").on("change", function() {
$(".SSN, .PaperApplication").hide();
if ($(this).val() == "first") {
$(".field.SSN").show();
$(".field.SSN input").focus();
} else if ($(this).val() == "second") {
$(".field.PaperApplication").show();
$(".field.PaperApplication input").focus();
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field SocialSecurity">
<label>
Radio 1 text here
<input type="radio" name="radio" value="first" />
</label><br>
<label>
Radio 2 text here
<input type="radio" name="radio" value="second" />
</label>
</div>
<div class="field SSN">
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication">
<label>Paper Application</label>
<input />
</div>
hide on load, then on click hide both and show the one that was clicked. run below snippet
$("input[name='socialsecurity']").click(() => {
$('.field').hide();
$(`.${$("input[name='socialsecurity']:checked").val()}`).show();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="radio" name="socialsecurity" value="SSN"> SSN<br>
<input type="radio" name="socialsecurity" value="PaperApplication"> Paper Application<br>
<div class="field SSN" style = 'display: none;'>
<label>SSN</label>
<input />
</div>
<div class="field PaperApplication" style = 'display: none;'>
<label>Paper Application</label>
<input />
</div>
I want to show an input when a checkbox is checked. So, I have created a js function to do it and when I write that function on the HTML file it works. But I want to write that function into an external Javascript file an use it from there. How can I do it?
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Complement Selection</title>
</head>
<body>
<form class="formComplement" action="../php/complementSelectionSave.php" method="POST">
<div class="mainContainer">
<input type="checkbox" name="hood" id="hood" onclick="showInput()">
<label for="hood">Hood</label><br>
<div class="inputBox" id="hoodNum" style="display:none">
<input type="number" name="hoodNumber" id="hoodNumber" required="" value="">
<label for="hoodNumber">Number of Hoods</label>
<br>
</div>
</div>
<br><br><br>
<input type="submit" value="Next" class="nextButton"/>
</form>
<script src="showInput.js"></script>
</body>
</html>
Javascript file:
function showInput() {
var checkBox = document.getElementById("hood");
var inputBox = document.getElementById("hoodNum");
if (checkBox.checked == true) {
inputBox.style.display = "block";
} else {
inputBox.style.display = "none";
}
}
EDIT: It appears this error:
showInput.js:4 Uncaught TypeError: Cannot read property 'checked' of
null
at showInput.js:4
If only thing why you need javascript here is to change class, to show / hide element than instead what you can do is to write code in pure css and html, using input:checked to change visibility.
Also nextButton should be targetable by css, like element or its parent is same lvl and after input
#hood:checked ~ .nextButton {
display: block;
}
.nextButton {display: none;}
<input type="checkbox" name="hood" id="hood">
<label for="hood">Hood</label><br>
<input type="submit" value="Next" class="nextButton"/>
Try onchange instead of onclick, and clear up the HTML - the function works as intended! :)
function showInput() {
var checkBox = document.getElementById("hood");
var inputBox = document.getElementById("hoodNum");
if (checkBox.checked == true) {
inputBox.style.display = "block";
} else {
inputBox.style.display = "none";
}
}
<form class="formComplement" action="" method="POST">
<div class="mainContainer">
<input type="checkbox" name="hood" id="hood" onchange="showInput()">
<label for="hood">Hood</label><br>
<div class="inputBox" id="hoodNum" style="display:none">
<input type="number" name="hoodNumber" id="hoodNumber" required="" value="">
<label for="hoodNumber">Number of Hoods</label>
<br>
</div>
</div>
<br><br><br>
<input type="submit" value="Next" class="nextButton" />
</form>
(I deleted the action from the form, as it made no sense in the snippet.)
I would like to be able to select a radio button when clicking on "label" and then pass that value to the URL.
Here's the URL Prefill code below.
It works if you select the actual radio button. However, I realized that if you click on label it doesn't select the radio button.
So i added this top part jquery code to solve that issue. However, it doesn't pass the value to the URL.
I'd like to stylize radio buttons by hiding input part and adding pseudoclasses. so i wonder if there's a way to pass radio button value when label is clicked on?
$(function(){
$('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);});
});
/* URL Prefill Code */
var form = document.getElementById('form-product-choices');
form.addEventListener('change', function(e){
var actionUrl = 'https://example.com/';
var radioButtons = document.getElementsByName('product-choice');
for( var i = 0; i < radioButtons.length; i++ ) {
if( radioButtons[i].checked ) {
actionUrl += '?product-choice=' + radioButtons[i].value;
break;
}
}
document.getElementById('action-link').href = actionUrl;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li><label for="radio"><input type='radio' name='product-choice' value='regular' /> regular</label></li>
<li><label for="radio"><input type='radio' name='product-choice' value='double' /> double</label></li>
<li><label for="radio"><input type='radio' name='product-choice' value='max-xl' /> xl</label></li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href=''>Click to continue</a>
</section>
</main>
</form>
First of all, we don't need JQuery code for select the radio button when clicking the label. Instead of this you can able to use below code,
<label for="regular">
<input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>
For achieving this, Need to set the ID attribute in textbox and use that ID attribute value on label 'for' attribute.
Below, I have added a full code. Hope this will help.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li>
<label for="regular">
<input type='radio' name='product-choice' value='regular' id="regular" /> regular
</label>
</li>
<li>
<label for="double">
<input type='radio' name='product-choice' value='double' id="double" /> double
</label>
</li>
<li>
<label for="xl">
<input type='radio' name='product-choice' value='max-xl' id="xl" /> xl
</label>
</li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href='javascript:void(0)'>Click to continue</a>
</section>
</main>
</form>
<script type="text/javascript">
$("#action-link").click(function(){
var getVal = $('input[name=product-choice]:checked').val();
window.location.href='https://example.com/test.cfm?product-choice='+getVal;
});
</script>
On the label, associate the for attribute with a corresponding id on each of the radio buttons. The ids should be unique between them.
$(function(){
$('li').click(function(){$(this).find('input[type=radio]').prop('checked', true);});
});
/* URL Prefill Code */
var form = document.getElementById('form-product-choices');
form.addEventListener('change', function(e){
var actionUrl = 'https://example.com/';
var radioButtons = document.getElementsByName('product-choice');
for( var i = 0; i < radioButtons.length; i++ ) {
if( radioButtons[i].checked ) {
actionUrl += '?product-choice=' + radioButtons[i].value;
break;
}
}
document.getElementById('action-link').href = actionUrl;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<form id='form-product-choices' action=''>
<main role="main">
<section id="p1">
<ul>
<li><label for="regular"><input id="regular" type='radio' name='product-choice' value='regular' /> regular</label></li>
<li><label for="double"><input id="double" type='radio' name='product-choice' value='double' /> double</label></li>
<li><label for="max"><input id="max" type='radio' name='product-choice' value='max-xl' /> xl</label></li>
</ul>
<a class="quizbut">Next</a>
</section>
<section id="p4">
<a id='action-link' class='quizbut' href=''>Click to continue</a>
</section>
</main>
</form>
I use a script to toggle some div´s with javascript. I want to make some input fields "required" in the toggle div if the checkbox is checked to show the toggle div.
Can someone figure it out ? that is work?
function show(id) {
if(document.getElementById) {
var mydiv = document.getElementById(id);
mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
}
}
var $myCheckbox = $('#neu_ma'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" name="berechtigungsantrag">
<fieldset>
<legend><input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');"> Neuer Mitarbeiter </legend>
<div style="display: none" id="neuer_mitarbeiter">
<label for="eintritt_datum">Eintrittsdatum:</label>
<div><input type="date" name="eintritt_datum" id="eintritt_datum" class="required" /></div>
<label for="befristung_datum">Befristungsdatum:</label>
<div><input type="date" name="befristung_datum" id="befristung_datum"/></div>
</div>
</fieldset><!-- End of fieldset -->
<input class="btn" type="submit" value="Speichern" name=save />
</form>
Answer:
You're trying to listen an element id that does not exist(neu_ma) - you haven't given your checkbox an id.
<input type="checkbox" name="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
So just give it an ID:
<input type="checkbox" name="neu_ma" id="neu_ma" onclick="javascript:show('neuer_mitarbeiter');">
This is just an example how you could do it:
Add some specific class to inputs that need to be affected by the state of your checkbox.
I made an example HTML:
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
As you can see, some of the inputs have a class called "required".
Next I check checkbox status(checked or not). And depending on the result make elements with "required" class required(or not) using jQuery's prop() method.
Working example:
var $myCheckbox = $('#myCheckbox'),
$required = $('.required');
$myCheckbox.on('click', function() {
this.checked ? $required.prop('required', true) : $required.prop('required', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="checkbox" id="myCheckbox" />
<input type="text" class="required" />
<input type="text" />
<input type="text" class="required" />
<button type="submit">Submit</button>
</form>
I made a form, and when clicked on submit, it takes you to another webpage but i couldn't transfer the variables(values of form) from one webpage to another webpage through Javascript.
So, i figured to hide the data, when submit button clicked.
How can i check if the form is validated, and only then initiate Jquery. With the current logic, it initiates the Jquery even if the form is not initiated.
Ultimately, animate or hide the heading and the whole form and change it to the result.
<head>
<title>Food Web App</title>
<link rel="stylesheet" type="text/css" href="appStyleQues.less">
<link href='http://fonts.googleapis.com/css?family=Orbitron:500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Roboto+Mono:300' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="N:\Desktop\Javascript\App.js" type="text/javascript"></script>
</head>
<body>
<div id="main">
<header>
<h1>I need some data</h1>
</header>
<div id="ques">
<ul>
<form name="myForm" method="get">
<li>What cuisine?(You can leave it empty)
<br>
<input list="Cuisines" class="normal" type="text" name="Cuisine" placeholder="Like Chinese" pattern="Chinese|Italian|American">
<datalist id="Cuisines" autocomplete="off">
<option value="Chinese"></option>
<option value="Italian"></option>
<option value="American"></option>
</datalist>
</li>
<li>On a scale of 1 to 10, how much hungry are you?
<br>
<input class="normal" type="number" name="hunger" min="1" max="10" required>
</li>
<li>
<input class="special" type="checkbox" name="Personality" value="Vegetarian" checked> Vegetarian
<input class="special" type="checkbox" name="Personality" value="Non-Vegetarian"> Non-Vegetarian
</li>
<li>On a scale of 1 to 10, how much healthy do you want the food to be?
<br>
<input class="normal" type="number" name="Calories" min="1" max="10" required>
</li>
<li>What will be the max cost of the food, per person?
<br>(Quality of the food will be affected)
<br>
<input class="normal" type="number" name="quality" placeholder=" Like 400" step="50" autocomplete="off" required>
</li>
<li>How many people?
<br>
<input class="normal" type="number" name="Amount of people" required>
</li>
<li>
<input class="normal" type="submit" onclick="return a();">
</li>
</form>
</ul>
</div>
</div>
</body>
</html>
The following is a VERY basic function but will point you in the right direction:
$("form").submit(function(e){
e.preventDefault();
var url = "test2.html";
var appendix = "?";
var validated = false;
// Validation
$("form input").each(function() {
// Validation stuff here.
// A basic example:
if ($(this).val() == "") {
alert("Please add all fields.");
return false;
}
else validated = true;
})
if (validated == true) {
$("form [name]").each(function() {
appendix += this.name + "=" + this.value + "&";
})
window.location.href = url + appendix;
}
})
You will need to add a value to your submit button.
you could assign ids to all input tags and then access the values using $('#idofinputfield').val().
you should also use a link or button and register an onclick event handler in javascript
$( "#idofbuttonorlink" ).click(function() {
alert( "Handler for .click() called." );
//validation and further action
});
.if you want to keep using the submit button you can use the submit event handler which allows you to cancel the submission when the validation fails:
$( "#idofsubmitbutton" ).submit(function( event ) {
alert( "Handler for .submit() called." );
//validation and further action
event.preventDefault(); //use this function to cancel submission
});