JavaScript - Form validation loop through specific fields - javascript

I'm wondering, what would be a short/good way of performing form validation in JavaScript by looping through all input-text as well as <select>, however, the condition on the select is that out of the 2 selects, ONLY one needs to be selected.
<form id="daform">
<input type="text" value="" name="name" id="name" />
<input type="text" value="" name="last" id="last" />
<select id="choice1" name="choice1">
<option>Bye</option>
<option>Hello</option>
</select>
<select id="choice2" name="choice2">
<option>Bye</option>
<option>Hello</option>
</select>
<input type="submit" />
</form>

Look into,document.getElementsByTagName().

You really should use some javascript toolkit for help with this, but if not this might help:
validateSelectChoices = function(){
return document.getElementById('choice1').selectedIndex || document.getElementById('choice2').selectedIndex;
}
This will check to see if one of the select boxes has the 'hello' value selected (keep in mind that dropdowns will always default to the first option in the list, in your case 'bye'.

Have you tried the jQuery validation plugin?
You can see a demo here.

Related

Value from a dynamic JS computed value returns NULL when php gets the input value [duplicate]

I have some disabled inputs in a form and I want to send them to a server, but Chrome excludes them from the request.
Is there any workaround for this without adding a hidden field?
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
</form>
Elements with the disabled attribute are not submitted or you can say their values are not posted (see the second bullet point under Step 3 in the HTML 5 spec for building the form data set).
I.e.,
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
FYI, per 17.12.1 in the HTML 4 spec:
Disabled controls do not receive focus.
Disabled controls are skipped in tabbing navigation.
Disabled controls cannot be successfully posted.
You can use readonly attribute in your case, by doing this you will be able to post your field's data.
I.e.,
<input type="textbox" name="Percentage" value="100" readonly="readonly" />
FYI, per 17.12.2 in the HTML 4 spec:
Read-only elements receive focus but cannot be modified by the user.
Read-only elements are included in tabbing navigation.
Read-only elements are successfully posted.
Using Jquery and sending the data with ajax, you can solve your problem:
<script>
$('#form_id').submit(function() {
$("#input_disabled_id").prop('disabled', false);
//Rest of code
})
</script>
To post values from disabled inputs in addition to enabled inputs, you can simply re-enable all of the form's inputs as it is being submitted.
<form onsubmit="this.querySelectorAll('input').forEach(i => i.disabled = false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
If you prefer jQuery:
<form onsubmit="$(this).find('input').prop('disabled', false)">
<!-- Re-enable all input elements on submit so they are all posted,
even if currently disabled. -->
<!-- form content with input elements -->
</form>
For ASP.NET MVC C# Razor, you add the submit handler like this:
using (Html.BeginForm("ActionName", "ControllerName", FormMethod.Post,
// Re-enable all input elements on submit so they are all posted, even if currently disabled.
new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" } ))
{
<!-- form content with input elements -->
}
If you absolutely have to have the field disabled and pass the data you could use a javascript to input the same data into a hidden field (or just set the hidden field too). This would allow you to have it disabled but still post the data even though you'd be posting to another page.
I'm updating this answer since is very useful. Just add readonly to the input.
So the form will be:
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" name="Percentage" value="100" readonly/>
</form>
Semantically this feels like the correct behaviour
I'd be asking myself "Why do I need to submit this value?"
If you have a disabled input on a form, then presumably you do not want the user changing the value directly
Any value that is displayed in a disabled input should either be
output from a value on the server that produced the form, or
if the form is dynamic, be calculable from the other inputs on the form
Assuming that the server processing the form is the same as the server serving it, all the information to reproduce the values of the disabled inputs should be available at processing
In fact, to preserve data integrity - even if the value of the disabled input was sent to the processing server, you should really be validating it. This validation would require the same level of information as you would need to reproduce the values anyway!
I'd almost argue that read-only inputs shouldn't be sent in the request either
Happy to be corrected, but all the use cases I can think of where read-only/disabled inputs need to be submitted are really just styling issues in disguise
I find this works easier. readonly the input field, then style it so the end user knows it's read only. inputs placed here (from AJAX for example) can still submit, without extra code.
<input readonly style="color: Grey; opacity: 1; ">
Simple workaround - just use hidden field as placeholder for select, checkbox and radio.
From this code to -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input type="textbox" name="Percentage" value="100" disabled="disabled" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
that code -
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<input type="textbox" value="100" readonly />
<input type="hidden" name="gender" value="female" />
<select name="gender" disabled="disabled">
<option value="male">Male</option>
<option value="female" selected>Female</option>
</select>
</form>
In addition to Tom Blodget's response, you may simply add #HtmlBeginForm as the form action, like this:
<form id="form" method="post" action="#Html.BeginForm("action", "controller", FormMethod.Post, new { onsubmit = "this.querySelectorAll('input').forEach(i => i.disabled = false)" })"
Define Colors With RGBA Values
Add the Following code under style
<!DOCTYPE html>
<html>
<head>
<style>
#p7 {background-color:rgba(215,215,215,1);}
</style>
</head>
<body>
Disabled Grey none tranparent
<form action="/Media/Add">
<input type="hidden" name="Id" value="123" />
<!-- this does not appear in request -->
<input id="p7" type="textbox" name="Percentage" value="100" readonly="readonly"" />
</form>
result
I had exactly the same problem, but did not work for me, because I have select HTML element, and it's read-only state allowed to change its value.
So I used select in one condition and input in another:
<% If IsEditWizard Then %>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<% If item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")) Then %>
<input type="text" value="<%: item.CompanyName %>" tabindex="3" size="12" maxlength="12" readonly="readonly" />
<input type="hidden" id="LinkedCompany" name="LinkedCompany" value="<%:item.CompanyCode %>" tabindex="3" size="12" maxlength="12" />
<%End If %>
<%Next %>
<%Else %>
<select id="LinkedCompany" name="LinkedCompany" class="w-auto" <%= If(IsEditWizard, "disabled", "") %>>
<option value="">Please Select</option>
<%For Each item In GetCompaniesByCompanyType("ResponsibleEntity")%>
<option value="<%:item.CompanyCode %>" <%: IIf(item.CompanyCode.EqualsIgnoreCase(prCompany.GetAsString("LinkedCompany")), "selected", String.Empty) %>><%: item.CompanyName %></option>
<%Next %>
</select>
<%End If %>
use
<input type="textbox" name="" value="100" disabled/>
or
<input type="textbox" name="" value="100" readonly/>
if your are using framework like PHP Laravel, element without name attribute will read as unset
<input type="textbox" value="100" disabled/>
You can totally avoid disabling, it is painful since html form format won't send anything related to <p> or some other label.
So you can instead put regular
<input text tag just before you have `/>
add this
readonly="readonly"
It wouldn't disable your text but wouldn't change by user so it work like <p> and will send value through form. Just remove border if you would like to make it more like <p> tag

Javascript Syntax Query

I am fairly new to JS, ive found a script which adds a text box below a select field when a specific option is selected (in this instance 'Other'), which works fine, although I want to have the option for the same box to appear if another option is selected aswell 'Friend'. How can I alter the part of the JS which determines this, from my understanding it is this part
function showfield(name){
if(name=='Other')
but i don't know the correct syntax to perform this. Im assuming effectively its something like
if(name=='Other' or 'Friend')
anyhelp would be highly appreciated, thank you.
Here is the current code.
<script type="text/javascript">
function showfield(name){
if(name=='Other')document.getElementById('div1').innerHTML='<input type="text" name="other" class="text-field" placeholder="Please state.." />';
else document.getElementById('div1').innerHTML='';
}
</script>
<form id="quote" class="quote-form">
<input name="" class="text-field" type="text" placeholder="Full Name" />
<input name="" class="text-field" type="text" placeholder="Contact Number" />
<input name="" class="text-field" type="text" placeholder="E-Mail Address" />
<select name="referral" class="select-field" onchange="showfield(this.options[this.selectedIndex].value)">
<option selected="selected">Where did you hear about us? (Please select..)</option>
<option value="Checkatrade">Check-a-Trade</option>
<option value="MyBuilder">MyBuilder</option>
<option value="Friend">Referral from a friend (Please state below)</option>
<option value="Other">Other (Please state below)</option>
</select>
<div id="div1"></div>
Like so:
if(name=='Other' || name=='Friend') {
//do stuff
}
The || operator in javascript is equivalent to the "or" you are attempting.
Read more on the available operators here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Expressions_and_Operators#Operator_precedence
if(name=='Other' or 'Friend') is not correct.
you need to write the variable name a second time like this
if (name=='Other' || name=='Friend')
I know people have mixed feelings about switch statements, but in this case it works fairly well and is easier to adapt if you need to incorporate other option-specific changes.
switch (name) {
case "Other":
case "Friend":
//show input field
break;
default:
//hide input field
break;
}
Also, instead of creating and destroying the input element every time, it might be cleaner to just show and hide it with display: block and display: none

How to pass input value from one form to another form at same jsp page?

I have two forms in my jsp page, first form have input values and second form have submit button,
i can't use both in same form because of some issue. now i want to access first form value into second form.
My Sample Code is Here,
<form name="onchange" id="first">
<div><input type="text" name="n1"></div>
<select onchange="document.forms['onchange'].submit();" name="select">
<option value="A">A</option>
<option value="A">A</option>
</form>
<form action="servlet" id="second">
<input type="submit" name="sub" value="Submit">
</form>
I need to access a first form value to second form on submit. is it any way to access? Thank You.
I dont exactly know what you want to do.But you cant send data of one form using a submit button of another form.
You could do one thing either use sessions or use hidden fields that has the submit button.
You could use javascript/jquery to pass the values from the first form to the hidden fields of the second form.Then you could submit the form.
Or else the easiest you could do is use sessions.
IN Jquery
<form>
<input type="text" class="input-text " value="" size="32" name="user_data[firstname]" id="elm_6">
<input type="text" class="input-text " value="" size="32" name="user_data[lastname]" id="elm_7">
</form>
<form action="#">
<input type="text" class="input-text " value="" size="32" name="user_data[b_firstname]" id="elm_14">
<input type="text" class="input-text " value="" size="32" name="user_data[s_firstname]" id="elm_16">
<input type="submit" value="Continue" name="dispatch[checkout.update_steps]">
</form>
$('input[type=submit]').click(function(){
$('#elm_14').val($('#elm_6').val());
$('#elm_16').val($('#elm_7').val());
});
This is the jsfiddle for it http://jsfiddle.net/FPsdy/102/

Paypal Upload Command - How to encrypt/secure dynamically generated payment amounts?

Alright so I saw a question similar to this but thought my situation was a little different and warranted a question. So I am working on a site that allows you to select from two dropdowns. I'm using jQuery to keep track of when these drop downs change. Then based off of the change I update the PayPal hidden form(Cart Upload Command).
Then once the user is done selecting the options they click the checkout button which takes them to the PayPal page that shows them the items they selected and they can begin the checkout process through PayPal. It sounds so easy when I say it like this but then I read that it needs to be encrypted. My question is how do I go about encrypting a dynamically generated form. They suggest using the PayPal button creation tool. Well that would make sense if I had a static amount, but I do not.
HTML
<label for="space-selector">Select Space</label>
<select class="form-control" id="space-selector" name="space-selector">
<option value="150">10' x 10'</option>
<option value="225">20' x 10'</option>
<option value="300">30' x 10'</option>
<option value="500">Custom</option>
</select>
<label for="parkingpass-selector">2 Day Parking Pass - $50</label>
<select class="form-control" id="parkingpass-selector" name="parkingpass-selector">
<option value="0">No</option>
<option value="50">Yes</option>
</select>
<form action="https://www.paypal.com/cgi-bin/webscr" method="post">
<input type="hidden" name="cmd" value="_cart">
<input type="hidden" name="upload" value="1">
<input type="hidden" name="business" value="jestewart.11#gmail.com">
<input type="text" name="item_name_1" value="Space Selected" readonly>
<input type="text" name="amount_1" value="1.00"readonly>
<input type="hidden" name="shipping_1" value="1.75">
<input type="text" name="item_name_2" value="Parking Pass" readonly>
<input type="text" name="amount_2" value="2.00" readonly>
<input type="hidden" name="shipping_2" value="2.50">
<input type="submit" value="Checkout">
</form>
jQuery
$(function (){
//space selector change
$("select[name=space-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_1]").val($(this).find(":selected").text());
$("input[name=amount_1]").val($(this).find(":selected").val());
});
//parking pass selector change
$("select[name=parkingpass-selector]").change( function () {
//update the hidden form values based off of selectors
$("input[name=item_name_2]").val($(this).find(":selected").text());
$("input[name=amount_2]").val($(this).find(":selected").val());
});
});
Here is the fiddle to show you functionality. Fiddle
You do not need encrypting the amount and others. The only important thing is to make ALL verifications on the server.
Paypal has an API who permise that. IPN
Some links :
https://developer.paypal.com/webapps/developer/docs/classic/products/instant-payment-notification/
http://www.micahcarrick.com/paypal-ipn-with-php.html

getElementById() and input form

I have a
function calcRoute() {
var start = document.getElementById('start').value;
}
And then a
<select id="start" onchange="calcRoute();">
<option value="somevalue">Dropdown 1</option>
<option value="somevalue">Dropdown 2</option>
<option value="somevalue">Dropdown 3</option>
</select>
Everything works properly. Now, instead of a dropdown list I need an input box. The problem is that I tried with
<form onsubmit="calcRoute();" method="get" id="start" action="#">
<input type="text" id="start" name="start">
<input type="submit" value="Go">
</form>
But it doesn't work (it's submitting the form to the server).. you can see a demo here. Remember that I don't need the dropdown list (it's there only to prove everything works), so it can go (there's no problem of double-called function). Thanks in advance :-)
You should change from:
<input type="text" id="startText" name="start">
To:
<input type="text" id="start" name="start">
As Javascript is searching for ID, not for name. (and in your code the ID is different from what Javascript is searching)
If you want use the input and the dropdown list in the same page, you just change your variable definition to something as:
var start = document.getElementById('startText').value || document.getElementById('start').value;
As if the input is empty, Javascript uses the value from the dropdown list.
Update
In adition to the change of the ID, change your form to something as:
<form>
<input type="text" id="start" name="start">
<input type="button" onclick="calcRoute();" value="Go">
</form>
To not allow form submission.

Categories

Resources