Develop Reference

dynamically putting form fields using append in my form but not getting values ( the name in URL ) while submitting the form in jquery

I am trying to insert input field in my div onclick of check box. and it is working but when i submit the form the value is not received to me of that input box
check box
<form action="{{ url('product_uplo') }}" method="get" enctype="multipart/form-data" accept-charset="utf-8">
<tr>
<table class="table">
<tr>
<td>
<label><input type="checkbox" id="ELarge" name="pro_size[]" onclick="a('ELarge')" value="ELarge"> Extra Large</label>
</td>
<td>
<label><input type="checkbox" id="Large" name="pro_size[]" onclick="a('Large')" value="Large"> Large</label>
</td>
<td>
<label><input type="checkbox" id="Medium" name="pro_size[]" onclick="a('Medium')" value="Medium"> Medium</label>
</td>
<td>
<label><input type="checkbox" id="Small" name="pro_size[]" onclick="a('Small')" value="Small"> Small</label>
</td>
<td>
<label><input type="checkbox" id="ESmall" name="pro_size[]" onclick="a('ESmall')" value="ESmall"> Extra Small</label>
</td>
</tr>
</table>
</tr>
<tr>
<td>Price</td>
<td>
<div id="set"></div>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" class="form-control btn btn-primary">
</td>
</tr>
</form>
JQuery code
<script type="text/javascript">
function a(extra){
if($('#'+extra+'').is(":checked")){
$('#set').append("<div id="+"price"+extra+"><label>"+extra+"</label><input type='text' name='pro_price["+extra+"]' class='form-control' placeholder="+extra+" /></div>");
}else{
$('#price'+extra).remove();
}
}
</script>
When I submit the form the url is like this
http://www.asggas.com/product_uplo?dat=pro_type=Girls+Cloth&pro_name=asadsfd&brand=sadf&Material=sadf&pro_color=sdf&pro_des=sadf&pro_size%5B%5D=ELarge&pro_size%5B%5D=Large&pro_quantity=5446&galary%5B%5D=
it doesn't pass pro_price[Elarge] ...
Please help

after searching to much i got the answer. because of i am using table tag it's now sending the data. so remove the table tag and it will work

jquery not functioning for radio button

I have two groups that have a radio button. What it does is, when a package above is chosen, the chosen package below should be the same from the above, vice-versa. Example is if I choose "Deluxe" in the first one, the other one should also be "Deluxe". The problem is, when I choose, "Deluxe" at the top, the other package is still on the previous selection. At first try, everything is working but when you try selecting again, the problem occurs. Also I want to highlight the selected package.
The other part of the code is here
Html
<table class="tblPackage">
<thead>
<tr style="text-align: center;">
<td width="30%"></td>
<td width="1%"></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY</div><span class="s11">$49</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
</td>
</tr>
</thead>
<tbody>
<colgroup>
<col id="colA"/>
<col id="colB"/>
<col id="colC"/>
<col id="colD"/>
<col id="colE"/>
</colgroup>
<tr>
<td style="text-align: left;"><h5>Choose Package</h5></td>
<td></td>
<td>
<center>
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1" class="css-checkbox" onclick="ChangeColColor(this,'colC')"/>
<label for="tcbx1" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="79.00" id="tcbx2" class="css-checkbox" onclick="ChangeColColor(this,'colD')"/>
<label for="tcbx2" class="css-label"></label>
</center>
</td>
<td>
<center>
<input type="radio" name="radiog_dark" value="149.00" id="tcbx3" class="css-checkbox" onclick="ChangeColColor(this,'colE')"/>
<label for="tcbx3" class="css-label"></label>
</center>
</td>
</tr>
</tbody>
</table>
<table class="tblsubPackage" width="90%">
<tr>
<td width="31%"><h5>Choose Package</h5></td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ECONOMY </div><span class="s11">$49</span>
</div>
<center>
<input type="radio" name="radiog_lit" checked value="49.00" id="tscbx1" class="css-checkbox" />
<label for="tscbx1" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">DELUXE</div><span class="s11">$79</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="79.00" id="tscbx2" class="css-checkbox" />
<label for="tscbx2" class="css-label"></label>
</center>
</td>
<td width="19%" valign="top">
<div class="d17_1">
<div class="d17_2">ULTIMATE</div><span class="s11">$149</span>
</div>
<center>
<input type="radio" name="radiog_lit" value="149.00" id="tscbx3" class="css-checkbox" />
<label for="tscbx3" class="css-label"></label>
</center>
</td>
</tr>
</table>

handle it with single click event.
$('.tcbx').click(function (event) {
var test = $(this).data('test');
$('#'+test).prop('checked', this.checked);
});
just make sure you have a data attribute in option which matches with the id attribute of sub package or viceversa
<input type="radio" name="radiog_dark" checked value="49.00" id="tcbx1"
class="css-checkbox tcbx" data-test="tscbx1" />
//---^^^^ added a class here
and add a class.
I know there are lot of other ways to figure this out, one of which is comparing the index in both tables and doing the needful likewise. But for fast response and since you already have different id for all the checkboxes, i added this function.
This is just a sample you can actaully avoid having different id hope you will work on it
Note: you can change test to what ever variable you like.
here you go
http://jsfiddle.net/aohsny6y/20/

You can reduce your code by using jQuery's start with selector for radio button having ids starting with either tscbx or tcbx as shown below and get the index of the id to find corresponding radio button.
You need to use .prop() instead of .attr()
Also to set background color, you can put data-col attribute in radio button and use the same to find col and set its background color (though it is not working in JSFiddle).
<input type="radio" name="radiog_dark"
checked value="49.00" id="tcbx1"
class="css-checkbox" data-col="colC"/>
jQuery:-
$('input[type="radio"][id^="tscbx"]').click(function() {
var index = $(this).attr('id').replace('tscbx','');
$('#tcbx'+index).prop('checked', true);
});
$('input[type="radio"][id^=tcbx]').click(function() {
var index = $(this).attr('id').replace('tcbx','');
$('#tscbx'+index).prop('checked', true);
//remove all colgroup background
$('colgroup col').css('background-color','white');
//put selected bacground for selected radio
var colId= $(this).data('col');
var varColor = "rgba(0,140,203,.2)";
$('#'+colId).css('background-color',varColor);
});
JSFiddle Demo

For jQuery 1.9 or higher you need to user .prop("checked", true) instead of .atrr()
Fot the Highlighting create a CSS Class and Change it with .toogleClass

$('#tscbx3').attr('checked','true')

cancel( reset the html ) button is not working

I am new to html, javascript, and css.
I do not know why, but my cancel button is not working at all.
<!DOCTYPE html>
<html>
<head>
<!-- set the page title and link with java script and css files -->
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="hw4.css">
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</table>
</section>
</body>
</html>
when I run this code, everything works well, but the cancel button is not working.
I think I did something wrong, because it worked like 30 mins ago, but
now it is not working at all and I cannot figure out what is wrong...!!

You have no form tag. A reset-button clears values inside a form.
2 Solutions:
Wrap your input-elements inside a <form><!-- elements here --></form>
Write a piece of script to clear the elements you want to clear when you click on the clear-button.

Try This:
Reset button only working for form tag. So please add form tag in your code as I shown in demo.
<script src="hw4.js"></script>
</head>
<body>
<section>
<table>
<form>
<tr>
<td class="first">Post to</td>
<!-- create two post to buttons -->
<td class="second"><input id="entire" type="radio" name="post"
value="entire" checked>Entire Class <input type="radio"
id="individual" name="post" value="individual">Individual
Student(s)/instructor(s)</td>
</tr>
<tr>
<td class="first">Select Folder(s)</td>
<td class="second">
<!-- create six homework checkboxes -->
<div class="hw">
<input id="hw1" type="checkbox"><label for="hw1">hw1</label>
<input id="hw2" type="checkbox"><label for="hw2">hw2</label>
<input id="hw3" type="checkbox"><label for="hw3">hw3</label>
<input id="hw4" type="checkbox"><label for="hw4">hw4</label>
<input id="hw5" type="checkbox"><label for="hw5">hw5</label>
<input id="hw6" type="checkbox"><label for="hw6">hw6</label>
</div>
</td>
</tr>
<tr>
<td class="first">Summary
<div style="font: 10px Arial">(100 charactors or less)</div>
</td>
<td class="second"><input id="summary" type="text" size="25"
value="Enter a one line summary...!" onclick="this.value='';"></td>
</tr>
<tr>
<td class="first">Details</td>
<!-- create detail text area. -->
<td class="second"><textarea id="details" name="textarea"
rows="10" cols="50" wrap='off'></textarea></td>
</tr>
<tr>
<td class="first">Posting Options</td>
<!-- create two option check boxes -->
<td><input id="option1" type="checkbox"> Make this an
announcement (note appears on the course page)</br> <input id="option2"
type="checkbox"> Send email notifications immediately
(bypassing student's email preferences, if neccesory)</td>
</tr>
<tr>
<td></td>
<td>
<input id="post" type="submit" value="Post My Note!" onClick="check()">
<input id="cancel" type="reset" value="Cancel" />
</td>
</form>
</table>
</section>
</body>
</html>
Enjoy :)

Input boxes disable/enable box when there is form specified

I'm trying to get form in table with enabling and disabling inputs by checkbox.
When I realized, that <form> is not working in tables I put form argument in inputs, but now disabling/enabling doesn't working (my js skill is kinda poor)
My checkbox to disable/enable inputs look like:
<td>
<input type="checkbox" onclick="this.form.elements['bleh'].disabled = this.form.elements['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj"/>
</td>
And my input boxes for now are:
<td><input type="text" name="bleh" form="id7" value="default" disabled=disabled></td>
<td><input type="text" name="bleh2" form="id7" value="admin" disabled=disabled></td>

if you give your form a name you can reach the elements like this:
document.FORM_NAME.ELEMENT_NAME.disable
Eg
document.id7.bleh.disabled
So you can change your onclick to
<input type="checkbox" onclick="document.id7.bleh.disabled = document.id7.bleh2.disabled = !this.checked" />
Example
Using form attribute to external form

Demo Fiddle
When you have your table within the form
<form action="#">
<table>
<tr>
<td>
<input type="text" name="bleh" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="this.form['bleh'].disabled = this.form['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
</form>
When you declare your form elements outside the form
<table>
<tr>
<td>
<input type="text" name="bleh" form="id7" value="default" disabled="disabled" />
</td>
<td>
<input type="text" name="bleh2" form="id7" value="admin" disabled="disabled" />
</td>
<td>
<input type="checkbox" onclick="document.forms['id7']['bleh'].disabled = document.forms['id7']['bleh2'].disabled = !this.checked" />
<input type="submit" value="Edytuj" />
</td>
</tr>
</table>
<form name="id7" id="id7" action="#"></form>

javascript .serialize() function is not working

HTML CODE
<form id="createCFrom">
<table class="ui-widget">
<tr>
<td>Event
</td>
<td>
<input type="text" id="CreateName" name="Event" />
</td>
</tr>
<tr>
<td>Date
</td>
<td>
<input type="text" id="CreateDate" name="Date" />
</td>
</tr>
<tr>
<td>Guest
</td>
<td>
<input type="text" id="CreateGuestName" name="Guest" />
</td>
</tr>
<tr>
<td colspan="2">
<button onclick="addCeremony();" class="right" id="saveCeremony">Save</button>
</td>
</tr>
</table>
</form>
JS Code
function addCeremony() {
alert($("#createCForm").serialize());
}

Your id is createCFrom
<form id="createCFrom">
but your script refers to createCForm
function addCeremony() {
alert($("#createCForm").serialize());
}

hi have change <button> to <input> type and it is working please try this
<input type='button' onclick="addCeremony();" class="right" id="saveCeremony" value='Save'>
fiddle

You have a typo:
alert($("#createCForm").serialize());
Should be:
alert($("#createCFrom").serialize());
(Or perhaps the id of the form is where the typo is - up to you to decide, but obviously what I'm saying is the id of the form has to match the id you use in your JS.)
Correct that problem and it works: http://jsfiddle.net/K5FVg/