hide and show input text based on drop down selection however the "input text" doesn't show anymore when i submit the form and I didn't complete the form validaton.
i am using jquery, and i can show and hide, works perfectly, but this part is bugging me alot.
my customers will not complete all the form fields, so when they submit the form, i would like them to SEE the input text based on their drop down selection, RATHER, the input text is missing.
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
<select name="shipping" id="shipping">
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<tr id="mydiv" style="display:none">
<td><input type="text" name="testing"></td>
</tr>
<tr>
<td><input type="text" name="testing2"></td>
</tr>
<tr>
<td><input type="text" name="testing3"></td>
</tr>
<input type="submit" value="Submit" />
what you want to validate.
if textbox is hidden , it should be part of validation or not
if that is part of validation use
$('#id').prop("required", "true");
else
$('#id').removeAttr("required");
Instead of inline styles for this try using a class for hiding it initially like,
<tr id="mydiv" class="hidden">
<td><input type="text" name="testing"></td>
</tr>
CSS: .hidden{display:none;}
and then do,
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').show();
}
else
$("#mydiv").hide();
});
});
(OR)
Try to remove 'hidden' class when u want to show the #mydiv
$(document).ready(function() {
$('#shipping').change(function() {
if ( $("#shipping").val () == "LA")
{
$('#mydiv').removeClass('hidden');
}
else
$("#mydiv").addClass('hidden');
});
});
It will work.!!
Look at the jsFiddle here. It works.
I don't see the <table> tag in your html, which is a problem.
<select name="shipping" id="shipping">
<option value="select">Select</option>
<option value="LA">LA</option>
<option value="NYC">NYC</option>
</select>
<table>
<tr id="mydiv" style="display:none">
<td>
<input type="text" name="testing" value="show/hide"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing2"/>
</td>
</tr>
<tr>
<td>
<input type="text" name="testing3"/>
</td>
</tr>
</table>
<input type="submit" value="Submit" />
Javascript:
$('#shipping').change(function () {
if ($("#shipping").val() == "LA") {
$('#mydiv').show();
} else $("#mydiv").hide();
});
If you are looking to have the div show when the page reloads with that information you will need to check for the selected information when the page is loading.
Don't make the default display none. Hide it when you load the page.
$(document).ready(function() {
$("#mydiv").hide();
var shipLocation = $("select#shipping").val();
if ( shipLocation == "LA")
{
$('#mydiv').show();
}
then add your shipping change method.
Related
OK so I have a table/form that i need to validate, making sure that there are no blank input fields when submitted. The catch is that I only need certain fields validated based on the selected option at the top of the table.
Needed for: Op1 -> Name, city, state, phone, zip.
Needed for: Op2 -> Name, city, state, phone, zip, ssn.
Needed for: Op3 -> Name, city, state, phone, zip, ssn.
Needed for: Op4 -> Name, city, state, phone, zip, DOB, other.
I'm wondering if I am going about this the right way or maybe there is a better way to go about this.
side note: the option values are dynamically created from the back-end and I cant add any id/values to the option tags.
<div class="container">
<form action="">
<table id="mytable1">
<tr>
<td>
<select>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
</select>
</td>
</tr>
<tr>
<td>
<label for="">Name</label>
<input type="text" class="name">
</td>
</tr>
<tr>
<td>
<label for="">City</label>
<input type="text" class="city">
</td>
</tr>
<tr>
<td>
<label for="">Phone</label>
<input type="text" class="phone">
</td>
</tr>
<tr>
<td>
<label for="">State</label>
<input type="text" class="state">
</td>
</tr>
<tr>
<td>
<label for="">zip</label>
<input type="text" class="pos">
</td>
</tr>
<tr>
<td>
<label for="">SSN:</label>
<input type="text" class="add1">
</td>
</tr>
<tr>
<td>
<label for="">DOB:</label>
<input type="text" class="add1">
</td>
</tr>
<tr>
<td>
<label for="">other:</label>
<input type="text" class="add1">
</td>
</tr>
</table>
</form>
<button onclick="">Submit</button>
<p>Values: </p>
</div>
and the joining JavaScript
$(document).ready(function () {
$('select').on('change', function () {
$( "p" ).append($( "input" ).map(function() {
return $( this ).val();
}).get().join( ", " ) );
$('table').append($('input').map(function () {
console.log($(this).val());
}).get().join(', '));
let selValue = $('select option:selected').text();
if(selValue == 'Option 1'){
//check if required fields are blank, if so throw error
console.log('value 1 is selected');
}else if(selValue == 'Option 2'){
//check if required fields are blank, if so throw error
console.log('value 2 is selected');
} else if(selValue == 'Option 3'){
//check if required fields are blank, if so throw error
console.log('value 3 is selected');
}else if(selValue == 'Option 4'){
//check if required fields are blank, if so throw error
console.log('value 4 is selected');
}else {
//submit form.
//$("form").submit();
}
});
If there is any other needed info please let me know, I post it as soon as possible.
There were few issues that you need to take care of -
1) the form tag closing should also include the submit button.
2) If you're using that button to submit the form, then add type="submit" as an attribute to the form.
check this fiddle for the validation - https://jsfiddle.net/8o0smzth/3/
I have commented out some of part of your code. Please don't hesitate to ask if you have more questions.
I´m trying to make a text input appear when I click on the "outra", that means "other" option on the checkbox...
I want it to appear just when i click that and then it will register that thing on the database.
Does anyone know how to help me?
Code with the functions:
<label class="checkbox-inline" for="checkboxes-4">
<input type="checkbox" name="checkboxes" id="checkboxes-4" value="5">
Outro
</label>
<input type="text" maxlength="9" class="input-field4" id="input" name="teste">
</td>
</tr>
<script>
$(document).ready(function(){
$('#input').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-4" && e.target.checked) {
$('#input').show();
} else {
$('#input').hide();
}
});
});
</script>
<tr>
<th>Doenças</th>
<label class="checkbox-inline" for="checkboxes-7">
<input type="checkbox" name="checkboxes" id="checkboxes-7" value="8">
Outra
</label>
<input type="text" maxlength="9" class="input-field4" id="input1" name="teste1">
</td>
</tr>
<tr>
<th>Contacto em caso de emergência</td>
<td><input type="text" name="contacto_emergencia" value="<?php echo $contacto_emergencia;?>"/></td>
</tr>
</table>
<br>
<p align=right>
<button type="submit" value="Alterar">Alterar</button>
<button type="cancel" onclick="window.location='http://donutsrool.pt/ficha_aluno.php';return false;">Cancelar</button>
</p>
</form>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
$('#input1').hide();
$(document).on('change', 'input[type="checkbox"]', function(e){
console.log(e)
if (e.target.id == "checkboxes-7" && e.target.checked) {
$('#input1').show();
} else {
$('#input1').hide();
}
});
});
</script>
Are you using a framework or anything? You would want to add a function that checks if the checkbox is checked. Judging from your tags, I'll offer a JQuery suggestion.
The JQuery to accomplish that might look like:
$('#checkboxes-4').is(":checked")
And then you would conditionally show your text input. So maybe:
if ($('#checkboxes-4').is(":checked")) {
$('#id_of_textbox').hide();
} else {
$('#id_of_textbox').show();
}
I have javascript code to disable other inputs if one is filled .
I need it in table that comes out of database.
The sad thing is that it only works with first table row and disable all inputs in table (but if input filled is not first nothing happens)
Javascript:
$(function(){
$("input").on("keyup", function(){
if($(this).hasClass("inputA") && $(".inputA").val()){
$("input.inputB").prop("disabled", true);
$("input.inputA").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputB") && $(".inputB").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", false);
$("input.inputC").prop("disabled", true);
} else if($(this).hasClass("inputC") && $(".inputC").val()){
$("input.inputA").prop("disabled", true);
$("input.inputB").prop("disabled", true);
$("input.inputC").prop("disabled", false);
} else {
$(".inputA, .inputB").prop("disabled", false);
}
});
});
My td from html table:
<td><input type="text" class="inputA" value=""></td>
<td><input type="text" class="inputB" value=""></td>
<td><input type="text" class="inputC" value=""></td>
How to make it work for each line separated?
Use the same class on each input, create event on those input after that check the value of the input if she's not empty disable all of others input for this works in a line just select all input of the parent.
Try to avoid multiple test as you did. Not lisible and maintainable.
Example
$(".input").on("keypress change keyup",function(){
if($(this).val() != "")
{
$(this).parent().parent().find(".input").not($(this)).prop("disabled",true);
}
else
{
$(this).parent().parent().find(".input").prop("disabled",false);
}
});
.input:disabled{
background-color:LightBlue;
border:solid 1px blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
<tr>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
<td>
<input type="text" class="input" value="">
</td>
</tr>
</table>
This solves your issue! Disable all input fields that doesn't have same class as the one being currently edited.
Demo: https://jsfiddle.net/3tf8ou3y/1/
jQuery(document).ready(function($) {
$("tr").on("keyup", "input", function(event) {
// get the current row
var $row = $(event.delegateTarget);
// get the class of the input field being edited
var this_class = $(this).attr('class');
if ($(this).val().length > 0) {
// if the input field has a value, disable all
// other input fields in the sam row
$('input:not(.'+this_class+')', $row).prop('disabled', true);
} else {
// else enable all input fields
$('input', $row).prop('disabled', false);
}
});
});
You can use 'jQuery(this).val()' instead of 'jQuery(".inputA").val()' or 'jQuery(".inputB").val()' or jQuery(".inputC").val()
I am creating a add to cart program and need to add product with its attribute(colors, size) to the cart and for that I need to submit both the forms together. I am not sure where am I going wrong here I have created the scripts but it submits only the first form selected for submit() using jquery but not the other form.
Given below is my code with Snippet and this is the JSFIDDLE
$(document).ready(function (){
$('#cart').click(function (e1) {
var $form = $('#masterform');
var $formcolor = $('#colorform');
var $checkbox = $('.roomselect');
var $checkboxcolor = $('.colorselect');
if (!$checkbox.is(':checked'))
{
$('#tipdivcontent').css("display", "block");
$("#tipdivcontent").delay(4000).hide(200);
e.preventDefault();
}
else
{
if (!$checkboxcolor.is(':checked')) {
$('#tipdivcontentcolor').css("display", "block");
$("#tipdivcontentcolor").delay(4000).hide(200);
e.preventDefault();
} else {
$form.submit();
$formcolor.submit();
}
}
});
});
#tipdivcontent
{
border:1px solid black;
margin-top:0px;
background-color:white;
height:50px;
width:102px;
display:none;
position:relative;
background-color:red;
color:yellow;
font-weight:bold;
}
#tipdivcontentcolor
{
border:1px solid black;
margin-top:0px;
background-color:white;
height:18px;
width:292px;
display:none;
position:absolute;
background-color:red;
color:yellow;
font-weight:bold;
}
<form action="" method="POST" id="masterform">
<table border="1" cellspacing="0">
<tr>
<th colspan="4">Sizes</th>
</tr>
<tr>
<td>
<label for="2.2">2.2</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.2" name="size" value="twopointtwo">
</td>
<td>
<label for="2.4">2.4</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.4" name="size" value="twopointfour">
</td>
</tr>
<tr>
<td>
<label for="2.6">2.6</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.6" name="size" value="twopointsix">
</td>
<td>
<label for="2.8">2.8</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.8" name="size" value="twopointeight">
</td>
</tr>
<tr>
<td colspan="3" align="center">
<label for="2.10">2.10</label>
</td>
<td>
<input class="roomselect" type="radio" id="2.10" name="size" value="twopointten">
</td>
</tr>
</table>
</form>
<div id="tipdivcontent">Please Select Size.</div>
<input type="submit" value="To Cart" class="cartorcheckoutbutton" id="cart">
<form action="" method="POST" id="masterform">
<table border="1" cellpadding="2">
<tr>
<th colspan="8">COLORS</th>
</tr>
<tr>
<th title='White' style='background-color:white;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='white'>
</th>
<th title='Red' style='background-color:red;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='red'>
</th>
<th title='Green' style='background-color:green;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='green'>
</th>
<th title='Blue' style='background-color:blue;' height='15' width='20'>
<input type='radio' name='color' class="colorselect" value='blue'>
</th>
</tr>
</table>
</form>
<div id="tipdivcontentcolor">Please Select Color.</div>
You could try assigning the color inputs from the secondary form to your 'master' form. Simply using <input form='formID' ...> on any input would assign that input to the other form regardless of where it is on the page.
// When the 'master' form is submitted...
$("#masterForm").on("submit", function(e) {
"use strict";
// Stop the default action
e.preventDefault();
if ($("input[type='radio']:checked").length === 0) {
alert("You must check at least one color option.");
return false;
}
// *for logging*
// write the contents of the submitted data
$("p").html("submitted data: " + $(this).serialize());
console.log("submitted data: " + $(this).serialize());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="masterForm">
<input name="someField" type="text" value="test value">
</form>
<form id="anotherForm">
<label>
<input name="color" type="radio" value="blue" form="masterForm">Blue
</label>
<label>
<input name="color" type="radio" value="red" form="masterForm">Red
</label>
</form>
<!-- Submit button outside of the form -->
<button type="submit" form="masterForm">Submit</button>
<p></p>
If the above option (and attached snippet) wouldn't work for you, try appending your formData with the relevant fields. Something like this (untested):
// When the 'master' form is submitted...
$("#masterForm").on("submit", function(e) {
"use strict";
// Stop the default action
e.preventDefault();
var submissionData = $(this).serialize();
submissionData += "&color=" + $("#slaveForm").find("input[name='color']:checked").val()
// do stuff ...
});
A form is a set of data to be sent via a POST request (or GET). What you are asking for makes no sense. If it is possible then you still shouldn't do it. Whatever HTML and CSS issues are making you split the form then I recommend you put that as your actual problem here.
Submitting a form, unless it has a target attribute pointing to a frame or other window, will cause an HTTP request for a new page to be made.
Submitting two forms at the same time would be like following two links at the same time. It can't be done.
You need to either:
Refactor your code so it uses a single form. This would almost certainly make the most sense.
Add a pair of frames to the page and submit each form to a different one.
Collect the data for the first form with JavaScript, sent it to the server using Ajax, then (after you get the response back) submit the second form.
If you want to send multiple form as a single one i can suggest to use formData object (documentation https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects )
var formData = new FormData();
formData.append("size", $('input[name=size]:checked').val());
formData.append("color", $('input[name=color]:checked').val());
var request = new XMLHttpRequest();
request.open("POST", "yourformtarget");
request.send(formData);
A possible solution with javascript: you can add an attribute to locate all fields, and send the form by ajax:
<div id='masterform'>
<input name='field_1' data-field-of='form1'>
...
</div>
...
<div id='colorform'>
<input name='field_23' data-field-of='form1'>
...
</div>
The code in javascript can be something like this:
$(document).ready(function (){
$('#cart').click(function (e1) {
var data = $('[data-field-of=form1]').serialize();
$.ajax({
url: "post/url",
data: data,
type: "POST",
success: function(response){ /* handle success */ },
error: function(){ /* handle error */ }
});
});
});
I have a dropdown menu and on the basis of the item selected I want to display a small part of HTML page.
<select id='menuHandler'>
<option value='abc'> abc</option>
<option value='xyz'>xyz</option>
</select>
IF the selected value is "abc" then a popup button is displayed with the following code:
<button id='runForm' onClick=""> Run form </button>
<div id ="runFormPopup" style=" display:none;">
<table CELLPADDING="10" CELLSPACING="5" class='border'>
<tr>
<td colspan='3'>Run form Generation</td>
</tr>
<tr>
<td width="200" class='border'>
<span>Input Data</span><br>
<input type="checkbox" name="vehicle" >Process log(s)<br>
Summary data<br>
<input type="checkbox" name="vehicle" >Thickness data<br>
<input type="checkbox" name="vehicle" >Particle data
</td>
<td class='border'>
<span>Steps(s)</span>
<input type="checkbox" >
<input type="checkbox" >
<input type="checkbox" >
</td>
</tr>
<tr>
<td> Run form filename </td>
<td><input type="text" ></td>
<td><button class="editbtn">Generate</button></td>
</tr>
</table>
</div>
else if the value selected is "xyz" this should be displayed.
<form action="${ctx}/home/step50/generateReport" method="GET" id="form_generate">
<input style="margin-top: 20px;" type="submit" id="btnGenerate" class="small button active" value="Generate"/>
</form>
how can I do it.
Listen to the change event of the #menuHandler select element, and add the conditional logic there.
Example Here
$('#menuHandler').on('change', function () {
if (this.value === "abc") {
$('#runFormPopup, #runForm').show();
$('#form_generate').hide();
} else {
$('#runFormPopup, #runForm').hide();
$('#form_generate').show();
}
});
..or a shorter version:
Example Here
$('#menuHandler').on('change', function () {
var condition = this.value === "abc";
$('#runFormPopup, #runForm').toggle(condition);
$('#form_generate').toggle(!condition);
});
Try something like this.
$('#menuHandler').change(function(){
var selectedValue = $(this).val();
if(selectedValue === 'abc') {
$('#runFormPopup').show();
$('#form_generate').hide();
}
else {
$('#runFormPopup').hide();
$('#form_generate').show();
}
});
From a high-level perspective:
Create a listener on the button and listen for a click
Dynamically get the value
Either create the content for which you are looking, or insert content into a dynamically-created <div> (overlay, pop-up, etc.)
Following these steps, you should be OK.