Javascript/ HTML Transferring form Controls to submit - javascript

I have been attempting to create a form with 5 text boxes, 1 drop down and a text area. My intention is simple; select an option from the Drop down( except the first i.e "--Select--"), enter the contents into the text box and text area. Once I click submit all the above entered information should get appended to specific links that is hard coded into each drop down option.
My challenge here is that when I click submit, the controls are no getting passed to the new form i.e. the desired page opens,but the form fields do not get entered. I have cross verified and confirmed that the ids are correct.. I'm guessing that i have made a mistake in the validation. Kindly point out my mistake..
Javascript Code
<script type="text/javascript">
function dpdown(form)
{
var a="&name="+document.getElementById('name').value; //textbox
var b="&job_id="+document.getElementById('job_id').value;//textbox
var c="&major"+document.getElementById("major').value;//textbox
var d="&native="+document.getElementById('native').value;//textbox
var e="&age="+document.getElementById('age').value;//textbox
var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
var i, counter = 0;
var ddl = document.getElementById("jobs");//dropdown
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i=0; i < obj.options.length; i++)
{
if(obj.options[i].selected) // to check if the person has chosen a suitable degree
if (selectedValue == "selectdegree")
{
alert("Please select your correct degree");
}
else
{
++counter;
window.open('https://'+form.elements[i].value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
}
}
}
function cleartext()// to clear the form (works correctly)
{
document.form.details.value='';
}
HTML Code
<form onsubmit="dpdown(this); return false;"> // at the beginning of the form
'
'
'
'
<input type="submit" value=" Create form" /> // not working
<input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();"> // works well

Please check it.
<html>
<head>
<script language="javascript">
function dpdown(){
var a="&name="+document.getElementById('name').value; //textbox
var b="&job_id="+document.getElementById('job_id').value;//textbox
var c="&major"+document.getElementById('major').value;//textbox
var d="&native="+document.getElementById('native').value;//textbox
var e="&age="+document.getElementById('age').value;//textbox
var f="&details="+encodeURIComponent(document.getElementById('details').value);//textarea
var i, counter = 0;
var ddl = document.getElementById("jobs");//dropdown
var selectedValue = ddl.options[ddl.selectedIndex].value;
for(var i=0; i < ddl.length; i++)
{
if(ddl.options[i].selected) // to check if the person has chosen a suitable degree
if (selectedValue == "selectdegree")
{
alert("Please select your correct degree");
}
else
{
++counter;
value=ddl.options[i].value;
window.open('https://'+value+a+b+c+d+e+f,'_blank'); // when the submit button is clicked, all the above fields should get appended to a preset link which has been hardcoded for each degree.
}
}
}
function cleartext()
{
document.form.details.value='';
}
</script>
</head>
<body>
<form>
<input type="text" id="name"/>
<input type="text" id="job_id"/>
<input type="text" id="major"/>
<input type="text" id="native"/>
<input type="text" id="age"/>
<input type="textarea" id="details"/>
<select id="jobs" >
<option value="www.google.com">google</option>
<option value="www.yahoo.com">yahoo</option>
<option value="www.stackoverflow.com">stackoverflow</option>
</select>
<input type="button" value=" Create form" onclick="dpdown();"/>
<input type='reset' value='Clear Ticket' name='reset' onclick="return resetForm(this.form);cleartext();">
</form>
</body>
</html>

Related

One javascript prompt overwrites the other prompt and i have to click submit twice to send the form

I am trying to create a form which will (a) prompt user to fill in the missing fields and (b) prompt user to check at least one checkbox. But somehow the prompt textbox.setCustomValidity('Choose at least one.'); is always overwritten by e.target.setCustomValidity("Fill in the missing field");.
And there is one more problem in Chromium. It looks like I have to click Submit button twice to be able to submit...
//Function that checks if any input text field is empty and prompts user
document.addEventListener("DOMContentLoaded", function() {
var elements = document.getElementsByTagName("INPUT");
for (var i = 0; i < elements.length; i++) {
elements[i].oninvalid = function(e) {
e.target.setCustomValidity("");
if (!e.target.validity.valid) {
e.target.setCustomValidity("Fill in the missing field");
}
};
elements[i].oninput = function(e) {
e.target.setCustomValidity("");
};
}
});
//Functions which checks if at least one checkbox is checked and prompts user to check at least one
function chooseKrozek() {
if (document.querySelectorAll('input[name="krozek"]:checked').length > 0){
document.querySelector("#krozki-checkbox-placeholder").value = document.querySelector('input[name="krozek"]:checked').value;
}
else {
document.querySelector("#krozki-checkbox-placeholder").value = "";
}
}
function promptIzberiKrozek(textbox) {
if (textbox.value == ''){
textbox.setCustomValidity('Choose at least one.');
}
else {
textbox.setCustomValidity('');
}
}
<form target="_blank">
name:<br>
<input class="vnos" type="text" name="ime" value="" required><br>
surname:<br>
<input class="vnos" type="text" name="priimek" value="" required>
<br><br>
checkboxes:<br>
<!-- placeholder to be able to display the prompt on invalid value -->
<input id="krozki-checkbox-placeholder" type="text" value="" oninvalid="promptIzberiKrozek()" required style="width:5px;height:5px;opacity:0;position:absolute;"/>
<!-- On checkbox click function chooseKrozek() is called -->
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-c-arm">LINUX/C/ARM™
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-desktop">LINUX/DESKTOP™
<input type="checkbox" name="krozek" onClick="chooseKrozek()" value="linux-office">LINUX/OFFICE™
<br><br>
<input type="submit" value="Submit">
</form>

Why won't the newly created input tags stay on page?

Im trying to create new input tags based on the number the user enters. My code will create the correct amount of tags, but they get removed almost immediately. Why?
<form>
<input type='text' id='input' />
<button>Submit</button>
</form>
<div id="box">
</div>
<script>
$(document).ready(function() {
$('button').click(function() {
var x = $('#input').val();
for(var i=0 ; i < x; i++) {
$('<input type="text" /><br>').prependTo('#box');
};
});
});
</script>
call preventDefault on the event to stop the button action from firing
$('button').click(function(e) {
e.preventDefault();
var x = $('#input').val();
for(var i=0 ; i < x; i++) {
$('<input type="text" /><br>').prependTo('#box');
};
});
FIDDLE
Change your existing button to an input with an id and use the id in the JS. Your problem is the form is being submitted when you click button.
http://jsfiddle.net/Delorian/65gLvfdx/
<input type="button" id="update" value="Submit" />

Form in JSP Page not Submitting

I have a jsp page which has a form embedded and I'm submitting the form via JavaScript.
When the page has say aroung 10-50 items the submit is working fine but if the page has aroud 500 items or more its not submitting.
After I click the submit button the page just stays in the current page and it just keeps loading.
How can I solve this issue.
A sample code is shown below:
<html>
<script type="text/javascript">
function submitChecked() {
var approveStr="";
var approveArr=new Array();
if(document.frmReleaseDetail.checkBoxVer.length != undefined)
{
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
approveStr +=document.frmReleaseDetail.checkBoxVer[i].value + ",";
approveArr.push(document.frmReleaseDetail.checkBoxVer[i].value);
}
}
if(approveStr=="")
alert("Please make a selection by clicking atleast one checkbox");
else
{
document.getElementById("passCheckVerVal").value=approveArr;
document.forms["newForm"].submit();
}
} //end of if checking multiple checkboxes
else //if the page has only one checkbox(version)
{
if(document.frmReleaseDetail.checkBoxVer.checked)
{
window.location = "process.jsp?passCheckVer="+document.frmReleaseDetail.checkBoxVer.value+'&u_trackingRequestID=<%=request.getParameter("u_trackingRequestID")%>';
}
else
alert("Please make a selection by clicking atleast one checkbox");
}
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form name=frmReleaseDetail>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
<form name=newForm" id="newForm" action="process.jsp" method="post">
<input type="hidden" name="passCheckVer" id="passCheckVerVal"/>
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
</form>
</body>
</html>
You need to change the form method to POST.
<form name=frmReleaseDetail method="post">
By default the method is GET. More informations here. You have quantity of data limitation lot smaller in GET.
EDIT :
Code suggestion with only one form :
<html>
<script type="text/javascript">
function submitChecked() {
var checked = false;
for(var i=0; i < document.frmReleaseDetail.checkBoxVer.length; i++)
{
if(document.frmReleaseDetail.checkBoxVer[i].checked)
{
checked = true;
break;
}
}
if((document.frmReleaseDetail.checkBoxVer.length != undefined and checked) or (document.frmReleaseDetail.checkBoxVer.checked))
{
document.forms["frmReleaseDetail"].submit();
}
else
{
alert("Please make a selection by clicking atleast one checkbox");
}
</script>
<body>
<%
String newTrackingReqId=request.getParameter("u_trackingRequestID");
%>
<form id="frmReleaseDetail" name="frmReleaseDetail" action="process.jsp" method="post">
<input type="hidden" name="u_trackingRequestID" id="u_trackingRequestIDVal" value="<%=newTrackingReqId%>"/>
//jdbc code
//100's checkbox named checkBoxVer
//button to invoke submitChecked javascript function
</form>
</body>
</html>
For anyone making noob (newbie) mistakes:
1: Type is "submit" NOT "button"
GOOD/CORRECT:----------------------------------------------
<input type="submit" value="some_button_label" />
BAD/INCORRECT:----------------------------------------------
<input type="button" value="some_button_label" />
2: Submit button needs to be nested inside the form.
GOOD/CORRECT:----------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
</select>
<input
type ="submit"
value="some_button_label"
/>
</form>
BAD/INCORRECT:------------------------------------------------
<form action="cookies-personalize-response.jsp">
SEL_YOUR_FAV_PROG_LANG
<select name="fav_lan">
<option>LANG_01</option>
<option>LANG_02</option>
<option>LANG_03</option>
<option>LANG_04</option>
</select>
</form>
<input
type ="submit"
value="some_button_label"
/>
3: Referesh page after fix, view source in browser to make sure actually changed.
As silly as the last answer is, it is actually the one that I got stuck on the longest.

How to check how many empty input fields there are?

I've about 5 input fields and before checking them I want to be able to alert using javascript to let the user know that there are empty fields which must be filled in before checking.
So I want to be able to alert using js if 2 of the 5 input fields are empty!
Can anybody please help me with this! I've research a lot and read some blogs that saying to use the "length" but couldn't figure it out!
So as soon as the user clicks on the submit button with the id of "submit", an alert would prompt saying must fill in at least 2 out of the 5 input boxes...
Here is my code:
<input type="text" id="a" value="" />
<input type="text" id="b" value="" />
<input type="text" id="c" value="" />
<input type="text" id="d" value="" />
<input type="text" id="e" value="" />
<input type="submit" id="submit" value="Check Form" />
Thanks
document.getElementById('submit').onclick = function() {
var inputs = document.getElementsByTagName('input'),
empty = 0;
for (var i = 0, len = inputs.length - 1; i < len; i++) {
empty += !inputs[i].value;
}
if (empty > 3) {
alert('You must fill in at least 2 fields');
}
};
Example: http://jsfiddle.net/Fn8cw/
With jquery you can loop through all of your input fields and increment a variable if the input field is empty:
$("#your_form_div").change(function(){
$(this).parents('form')
.find(':input').each(function(i) {
if( $(this).val() )
//here your incremented variable
}); });
this will tell you how many are empty
var empty = $('input:text').filter(function() { return $(this).val() == ""; });
if (empty.length > 3){
alert("you must fill in at least two inputs");
}
here is a working demo
of course I'm assumming you can use jQuery

Adding new text box using javascript

I have a webpage. There is a button called add. When this add button is clicked then 1 text box must be added. This should happen at client side only.
I want to allow the user to add at most 10 text boxes.
How can I achieve it using javascript?
example:
only 1 text box is displayed
user click add >
2 text boxes displayed
user clicks add >
I also wants to provide a button called "remove" by which the user can remove the extra text box
Can anyone provide me a javascript code for this??
Untested, but this should work (assuming an element with the right id exists);
var add_input = function () {
var count = 0;
return function add_input() {
count++;
if (count >= 10) {
return false;
}
var input = document.createElement('input');
input.name = 'generated_input';
document.getElementbyId('inputs_contained').appendChild(input);
}
}();
add_input();
add_input();
add_input();
A solution using the jQuery framework:
<form>
<ul class="addedfields">
<li><input type="text" name="field[]" class="textbox" />
<input type="button" class="removebutton" value="remove"/></li>
</ul>
<input type="button" class="addbutton" value="add"/>
</form>
The jQuery script code:
$(function(){
$(".addbutton").click(){
if(".addedfields").length < 10){
$(".addedfields").append(
'<li><input type="text" name="field[]" class="textbox" />' +
'<input type="button" class="removebutton" value="remove"/></li>'
);
}
}
// live event will automatically be attached to every new remove button
$(".removebutton").live("click",function(){
$(this).parent().remove();
});
});
Note: I did not test the code.
Edit: changed faulty quotation marks
I hope you are using jQuery.
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"><!--
$(document).ready(function(){
var counter = 2;
$("#add").click(function () {
if(counter==11){
alert("Too many boxes");
return false;
}
$("#textBoxes").html($("#textBoxes").html() + "<div id='d"+counter+"' ><label for='t2'> Textbox "+counter+"</label><input type='textbox' id='t"+counter+"' > </div>\n");
++counter;
});
$("#remove").click(function () {
if(counter==1){
alert("Can u see any boxes");
return false;
}
--counter;
$("#d"+counter).remove();
});
});
// --></script>
</head><body>
<div id='textBoxes'>
<div id='d1' ><label for="t1"> Textbox 1</label><input type='textbox' id='t1' ></div>
</div>
<input type='button' value='add' id='add'>
<input type='button' value='remove' id='remove'>

Categories

Resources