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.
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 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 4 buttons with same id (for css purpose) I want to highlight the button once it is clicked. By passing the id it is working fine, but I want to pass the names of the button (unique name). when i am trying getElementByNames() its not working.
here is the code with DIFFERENT ID, i want this for different names
<html>
<head>
<style type="text/css">
</style>
<script type="text/javascript">
var buttonClicked = null;
function highlight(id)
{
if(buttonClicked != null)
{
buttonClicked.style.background = "grey";
buttonClicked.style.color="black";
}
buttonClicked = document.getElementById(id);
buttonClicked.style.background = "blue";
buttonClicked.style.color="white";
}
</script>
</HEAD>
<BODY>
<table width="100%" cellspacing="0" cellpadding="3px">
<tr>
<td>
<input type="button" value="BUTTON" id="select1" name="select1" onclick="highlight('select1')">
</td>
<td>
<input type="button" value="BUTTON" id="select2" name="select2" onclick="highlight('select2')">
</td>
<td>
<input type="button" value="BUTTON" id="select3" name="select3" onclick="highlight('select3')">
</td>
<td>
<input type="button" value="BUTTON" id="select4" name="select4" onclick="highlight('select4')">
</td>
</tr>
</table>
</BODY>
</HTML>
Your question is a bit unclear - you say "I have 4 buttons with same id" but in your code they have different IDs. If you really do "have 4 buttons with same id (for css purpose)" then:
Where you want to apply a CSS style to multiple elements, you should use a class rather than an ID. Then you can use unique IDs for your buttons, and your existing code will work well.
<style>
.myclass {
color: red; // CSS rules for all these buttons
}
</style>
<input type="button" id="select1" class="myclass" ...
<input type="button" id="select2" class="myclass" ...
You can use this code if you want to select an element by his name:
buttonClicked = document.getElementsByName(id)[0];
It works fine as long as you can guarantee that the name will be unique because the first element will be taken. But its not the best approach ...
Of course like Richie said, you should use a class for the css and define different ids. Anyway if you want to stick to the same ids you can use a different approach:
<script type="text/javascript">
var buttonClicked = null;
function highlight(element) {
if (buttonClicked != null) {
buttonClicked.style.background = "grey";
buttonClicked.style.color = "black";
}
buttonClicked = element;
buttonClicked.style.background = "red";
buttonClicked.style.color = "white";
}
</script>
<table width="100%" cellspacing="0" cellpadding="3px">
<tr>
<td>
<input type="button" value="BUTTON1" id="select1" name="select1" onclick="highlight(this)" />
</td>
<td>
<input type="button" value="BUTTON2" id="select2" name="select2" onclick="highlight(this)" />
</td>
<td>
<input type="button" value="BUTTON3" id="select3" name="select3" onclick="highlight(this)" />
</td>
<td>
<input type="button" value="BUTTON4" id="select4" name="select4" onclick="highlight(this)" />
</td>
</tr>
</table>
Fiddle: http://jsfiddle.net/9nq39hov/
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.
i have a textfield:
<input type="text" id="modname" />
and a div:
<div id="tuner">
<tr>
<td width="400">
Tuner
<div id="value" name="tuner"></div>
</td>
<td width="10">:</td>
<td width="150">
<input id="tuner_rng1" type="radio" class="tuner_rng" name="tuner_rng" value="OK" />OK
<input id="tuner_rng2" type="radio" class="tuner_rng" name="tuner_rng" value="NG" />NG
<label for="tuner_rng" class="error">Please choose one !</label>
</td>
</tr>
</div>
i want if textfield value have "CH" character in front of text the div will hide.for example: if i type "change","check" it will hidden. How do i do that? could jquery do like that without regex?
Sure.
$('#modname').keyup(function() {
if($(this).val().toLowerCase().substring(0,2) == 'ch') {
$('#value').hide();
} else {
$('#value').show();
}
});
Here's the code:
$('#modname').bind('keyup',function(){
(/\bch/i.test($(this).val()))?$('#value').hide():$('#value').show();
});