I have these checkboxes :
<input type="checkbox" name="style[]" value="1" checked="checked" />
<input type="checkbox" name="style[]" value="2" />
<input type="checkbox" name="style[]" value="3" checked="checked" />
<input type="checkbox" name="style[]" value="4" checked="checked" />
<input type="checkbox" name="style[]" value="5" />
and this jquery handler :
<script type="text/javascript">
$(document).ready(function() {
$('.linkStyle').click(function(e) {
//
});
});
</script>
so, when I click on a checkbox, I'd like to send the array style[] to the server trought AJAX (with the actual values).
How can I do it?
EDIT
Tried :
$.post("list/browse_ajax.php", {id:"browseUpdate", actualArtist:browseArtist, actualEvent:browseEvent, actualData:browseData, style:$('#browseTableStyle:checkbox').serialize()},
function(data) {
$("#browseList").html(data);
}
);
but the style[] is not send...
EDIT 2 - Problem with serialize
This is the whole code :
<form id="browseForm">
<div class="wideinfo">
<div class="content">
<div class="tableList1">
Style
</div>
<div class="tableList2">
<span><input type="checkbox" name="style[]" value="Style1" checked="checked" /> Style1</span>
<span><input type="checkbox" name="style[]" value="Style2" /> Style2</span>
<span><input type="checkbox" name="style[]" value="Style3" checked="checked" /> Style3</span>
<span><input type="checkbox" name="style[]" value="Style4" checked="checked" /> Style4</span>
<span><input type="checkbox" name="style[]" value="Style2" /> Style5</span>
</div>
</div>
</div>
</form>
but with :
style:$('#browseForm').serialize()
it sends this (checked on Fiddler)
style: style%5B%5D=Style1&style%5B%5D=Style3&style%5B%5D=Style4
not :
style[]: Style1
style[]: Style3
style[]: Style4
The last is a real/comprensive HTML array...
What about :
$.post('my-url', $(':checkbox').serialize(), function(data, textStatus, jqXHR){
// my callback body
});
EDIT: Actually the serialize function only works on form (and thus serialize form fields). So you have to wrap your fields in a form. See bellow.
When you finnaly have your string submitted style%5B%5D=Style1&style%5B%5D=Style3&style%5B%5D=Style4 you can retrieve the comprehensive array like that:
parse_str($_POST['style'], $data);
The the $data variable contains:
array(
"style" => array(
0 => "Style1",
1 => "Style3",
2 => "Style4",
)
)
Does it solve your problem ?
First, your callback does not seem to be consistent :
function(data) {
$("#browseList").html(msg);
}
You might want to say :
function(data) {
$("#browseList").html(data);
}
Also have you check firebug or your explorer javascript debuger to see if there is any error. Also can you show us the actual submited data. Finnaly what is the result of a call to :
$(':checkbox').serialize()
Yes, this should work.
style:$('#browseForm').serialize()
At the end I strongly advise you to inclue all your post data in the form so that you can simply do:
$.post('my-url', $('form').serialize(), function(data){
$("#browseList").html(data);
});
It is cleaner, straightforward and easier to maintain. After that your PHP script should handle the rest.
Related
I've search form that have part like this :
<input type="checkbox" id="checkboxlist-field-[29]" name="CategoryField[9][]" checked="checked" value="bed">
<input type="checkbox" id="checkboxlist-field-[30]" name="CategoryField[9][]" checked="checked" value="almari pakaian">
<input type="checkbox" id="checkboxlist-field-[31]" name="CategoryField[9][]" value="tv">
<input type="checkbox" id="checkboxlist-field-[32]" name="CategoryField[9][]" checked="checked" value="ac">
<input type="checkbox" id="checkboxlist-field-[33]" name="CategoryField[9][]" checked="checked" value="wifi-internet">
<input type="checkbox" id="checkboxlist-field-[34]" name="CategoryField[9][]" checked="checked" value="meja cermin rias">
<input type="checkbox" id="checkboxlist-field-[36]" name="CategoryField[9][]" checked="checked" value="sekamar berdua">
When they're checked and form is submited, it generates url into something like this :
http://localhost/index.php/category/akomodasi?CategoryField[9][]=bed&CategoryField[9][]=almari pakaian&CategoryField[9][]=ac&CategoryField[9][]=wifi-internet&CategoryField[9][]=meja cermin rias&CategoryField[9][]=bisa pasutri&CategoryField[9][]=sekamar berdua&CategoryField[10]=1
The search works fine, but I want to modify the url into something like this :
http://localhost/index.php/category/akomodasi?CategoryField[9]=bed,almari pakaian,ac,wifi-internet,meja cermin rias,bisa pasutri,sekamar berdua&CategoryField[10]=1
So values of CategoryField[9] are separated with ",".
How to modify the url? btw, I'm using Yii2 Framework.
Thank you.
Do you just want to get the category fields separated with ","? or actually need to change the url? If it's the first option you can do that with:
$categoryField = implode(', ', $_GET['CategoryField'][9]);
I was previously helped to get a javscript function using jquery working - see :
JS Fiddle working example
$("[name='COLUMN35']").on('change', function() {
var val = $(this).val();
var reverseVal = (val == 'Yes' ? 'No' : 'Yes')
$("input[value='" + reverseVal + "']:not([name='COLUMN35'])").prop('checked', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span>Option 1</span><br />
<form>
<label><input type="radio" name="option1" id="option1Yes" value="Yes">Yes</label>
<label><input type="radio" name="option1" id="option1No" value="No">No</label>
<br /><br />
<span>Option 2</span><br />
<label><input type="radio" name="option2" id="option2Yes" value="Yes">Yes
</label>
<label><input type="radio" name="option2" id="option2No" value="No">No</label>
<hr />
<span>Unsubscribe from all</span><br />
<label><input type="radio" name="COLUMN35" id="unsubYes" value="Yes">Yes</label>
<label><input type="radio" name="COLUMN35" id="unsubNo" value="No">No</label>
<br /><br />
<input type="submit" value="submit">
</form>
Upon implmenting that same code into the generated form page i am not sure why it does not work - see:
Webform with code not working
Unfortunately I am not able to edit the any of the form elements as they are generated automatically but hoping someone might have a different idea to implement - usually the messier the better E.G target the relevant ids to change and maybe not using jquery
try putting your code in $(document).ready(function(){})
eg
$(document).ready(function(){
$("[name='COLUMN35']").on('change', function(){
var val = $(this).val();
var reverseVal = (val == 'Yes' ? 'No' : 'Yes')
$("input[value='"+reverseVal+"']:not([name='COLUMN35'])").prop('checked', true);
});
});
I have a HTML code of :
<form method="POST" action="FeedBack.aspx.cs">
<div class="container">
<h2>FeedBack Area</h2>
<br />
<h4>Comfort</h4>
<br />
<form role="form">
<label class="radio-inline" name="radio1">
<input type="radio" value="1" name="optradio1">Bad
</label>
<label class="radio-inline">
<input type="radio" value="2" name="optradio2">Good
</label>
<label class="radio-inline">
<input type="radio" value="3" name="optradio3">Excellent
</label>
<br />
</form>
</form>
And a C# code :
protected void Page_Load(object sender, EventArgs e)
{
if (IsPostBack)
{
string r1, r2, r3, r4;
r1=string.Format("{0}", Request.Form["radio1"]);
r2=string.Format("{0}", Request.Form["radio2"]);
r3=string.Format("{0}", Request.Form["radio3"]);
r4=string.Format("{0}", Request.Form["radio4"]);
FeedBackService.InsertIntoReviewes(r1,r2,r3,r4);
MessageBoxShow(Page,"FeedBack Sent.");
}
}
And I want that when you hit a radio button value the value will pass into C# and will get into the function : InsertIntoReviews that put the r1,r2,r3,r4 values into Access dataset.
Note that Ive attached only quarter of the code since it is too long. Btw I closed the first form tag because it is only a part of the code (it closed at the end of the full code).
Thank you very much. :)
Maybe help you.
$('input[type=radio]').change( function() {
$.ajax({
url: 'controller/InsertIntoReviewes',
data: { radios : $("formName").serializeObject() },
success: function(result){
}
});
});
I need to update the form divs after an ajax was successfully called via jQuery. There're some form elements on my page. And I'd like to fill it with the values sent back from ajax call. Which is in json format.
While #inst_name is an input[type=text] in which doing 2 things.
As an autocomplete input via jquery autocomplete.
As a name reference for mysql query in this script.
HTML :
<input type="text" name="inst_name" id="inst_name" />
<form method="post" action="">
<textarea name="inst_addr" id="inst_addr"></textarea>
<select name="inst_prov" id="inst_prov">
<option value="1">Bangkok</option>
<option value="2">Chiang Mai</option>
<option value="3">Samui</option>
<option value="4">Phuket</option>
</select>
<input type="text" name="inst_tel" id="inst_tel" />
<input type="text" name="inst_fax" id="inst_fax" />
<label><input type="radio" name="inst_dep" id="inst_dep1" value="1" />Dep 1</label>
<label><input type="radio" name="inst_dep" id="inst_dep2" value="2" />Dep 2</label>
<label><input type="radio" name="inst_dep" id="inst_dep3" value="3" />Dep 3</label>
</form>
jQuery :
$('#inst_name').keyDown(function(){
$.ajax({
url: 'inc/form_institute.json.php',
dataType:'json',
data: {name:$('#inst_name').val()},
success: function(data){
$('#inst_addr').html(data.addr);
$('#inst_prov').val(data.prov);
$('#inst_zip').val(data.zip);
$('#inst_tel').val(data.tel);
$('#inst_fax').val(data.fax);
$('#inst_dep').val(data.dep);
}
});
});
JSON :
{
"addr":"123/4 Kitty Ave.",
"prov":"80",
"zip":"12345",
"tel":"0753245675",
"fax":"075123456",
"dep":"2"
}
Try using:
$(document).on("keyup", "#inst_name", function(){
//you're ajax here
}
That way the more you type the more specific the response will be.
Good luck :)
I am having some difficulty in using the jQuery Validator plugin. I have a list of checkboxes with different name attributes and I can't seem to figure out how to ensure that at least one of them has been checked. Everything that I find on Google seems to only work when the name attribute is the same.
Here is some sample code (updated):
<ul id="email_lists">
<li>
<input name="checkbox1" type="checkbox" /> List 1
</li>
<li>
<input name="checkbox2" type="checkbox" /> List 2
</li>
<li>
<input name="checkbox3" type="checkbox" /> List 3
</li>
<li>
<input name="checkbox4" type="checkbox" /> List 4
</li>
</ul>
I want to make sure that at least one of those is checked. Unfortunately, I cannot make the names the same as it is form that submits to a third-party email marketing application and it is expecting specific name attributes for these checkboxes.
Update
I am aware of how to do this using plain jQuery, but I would prefer to use the jQuery Validator plugin since that is how all of the other validation on the page is done.
I can group those checkboxes using jQuery by saying $('#email_lists li');, but I'm not really sure how to use something like that and tell the jQuery Validator plugin to use that as a group.
Assuming that you can give the checkboxes a class name (the jQuery needs something to work with):
<input class="validationGroupOne" name="checkbox1" type="checkbox" />
<input class="validationGroupOne" name="checkbox2" type="checkbox" />
<input class="validationGroupOne" name="checkbox3" type="checkbox" />
<input class="validationGroupOne" name="checkbox4" type="checkbox" />
You should be able to plug in the .validationGroupOne class-selector in place of the, usual, name attribute.
This was my solution :-)
Use:
<div id="list">
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
<input name="chkbox" type="checkbox" />
</div>
<input type="hidden" name="the_real_field_name" />
Then in jquery validate plugin block:
rules : {
chkbox: "required"
},
Then store the values as an array into a single hidden field like:
function updateInput() {
var allVals = [];
$('#list :checked').each(function() {
allVals.push($(this).val());
});
$('#the_real_field_name').val(allVals);
}
$(function() {
$('#list input').click(updateInput);
updateInput();
});