I have a web page, at the top is a set of radio buttons and a submit button. Here is the code for that:
<form action="/batch" method="POST">
With checked selection you may:
<input type="radio" name="bulk" value="broadcast">Broadcast</input>
<input type="radio" name="bulk" value="unbroadcast">Unbroadcast</input>
<input type="radio" name="bulk" value="delete">Delete</input>
<input type="submit" value="Run batch on checked items" />
</form>
Below that i have a table consisting of a bunch of rows with checkboxes at the beginning. Code for that is:
<td><input type="checkbox" name="{{ md5_name }}" class="box"/></td>
Is there a way to have the form submit a list of what the checkboxes are and whether they're checked regardless of the fact that the checkboxes are not within the form? Perhaps naming it the same or shared class?
While searching around before posting i found the following snippet from this page which looked promising, but i don't know how running it alongside my POST method would work, or how i would include the result in my POST method.
function getRadioValue (theRadioGroup)
{
for (var i = 0; i < document.getElementsByName(theRadioGroup).length; i++)
{
if (document.getElementsByName(theRadioGroup)[i].checked)
{
return document.getElementsByName(theRadioGroup)[i].value;
}
}
}
You could, in the HTML 5 doctype, simply associate those form-elements with a specific form, using the form attribute:
<td><input form="formElementID" type="checkbox" name="{{ md5_name }}" class="box"/></td>
This attribute:
Indicates the form that is the owner of the element1
References:
MDN: HTML Attribute reference.
Bibliography:
HTML forms reference.
You could bind a function to the submit method of the form to retrieve the values of the checkboxes, and add them into hidden fields in the form.
Alternately add the default values of the checkboxes to hidden fields, and bind a change method to the checkboxes to update the hidden field.
Related
How can I add objects that I have already returned from my database to an array on form submit? I am retrieving all of my players from my database like so,
$players = Player::all();
and outputting them like this:
<form>
#foreach($players as $player)
<ul>
<li>
<input type="checkbox" name="{{ $player->id }}">
{{ $player->fn }} {{ $player->ln }}
</li>
</ul>
#endforeach
<input type="submit" value="Submit">
</form>
This is what I consider my "player pool", where all players are loaded and available to be "checked" in. I am simply trying to have two sections on this page, one that has the player pool, and one that shows the selected players from the players pool. When a player is checked in they are added to the "players in game" section below the "player pool", and will be part of a new form that can again be submitted, but to the database instead of the same just to the page. How would I achieve this with JSON and PHP?
To be honest, I'm not sure how you want to use JSON for this, but you probably want to use the player ID as the value for the checkbox rather than the name.
<input type="checkbox" name="player_ids[]" value="{{ $player->id }}">
Then you will have an array of player IDs in $_GET['player_ids'] (or $_POST['player_ids'] if this ends up being a POST form.)
You will want to give you form a class so you can begin building a jQuery function to select the players as a checkboxes within the form become checked.
Say,
<form class="player_form">
</form>
With the form structure you propose in your question, the firstname and lastname (I am assuming) are just echoes next to the box. If you are wanting submit these in a later form you will need to have these as input fields, like your checkbox:
<input type="text" name="player_name" value="{{$player=>fname}}" />
I think you want to move all of the information within a li element if the checkbox within that li is checked. To do this, you can add a listener to the checbox using change. You can also use click but this won't listen on the event where the box is checked by keyboard!
$(document).ready(function(){
$(".player_form :checkbox").change( function() {
var player = $(this).closest("li");
//Now add this point into your new form
$(".my_submit_form").append(player);
)}
});
The closest function will traverse up the dom and find the closest li element and then append this data to your new form.
I would suggest you reconsider your form naming convention. As you have it you will be submitting a unique name with every checkbox, I don't think this is what you mean to say.
<li>
<input type="checkbox" name="player_id[]" value="{{$player->id}}" />
<input type="text" name="player_fname[]" value="{{$player=>fname}}" />
<input type="text" name="player_lname[]" value="{{$player=lname}}" />
</li>
Would be something like what you want, for form handling. Don't forget the names must be submitted as an array (i.e player_id[]) because you will be submitting multiple players within a form!
Consider the following form:
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo">
<input type="checkbox" value="1" name="foo">
</form>
When submitting the form, the URL ...?foo=0 will be requested if the checkbox is not checked. If the checkbox is checked, the URL ...?foo=0&foo=1 will be requested. In PHP, query string arguments override any previous arguments with the same name, so foo will have the value 1 in the PHP script handling the latter request.
What is the best way to obtain the value foo would have in the PHP script using JavaScript, when not knowing anything about the form? In theory, there could be an arbitrary number of inputs named foo of different types, and I would like to know the value that foo would have in the PHP script handling the request if the form was submitted.
As I understand it, the answer is the value of the last enabled input element named foo. By enabled, I mean that the input element is not disabled and that it is not a button (the button's name and value are not added to the query string unless the button is used to submit the form) or an unchecked checkbox or radio button.
Maybe there is an easy way to get this value using jQuery?
Edit
Loads of people suggest that I rename the input elements to foo[] or similar. I guess I was not clear enough that I actually want all the input elements named foo, and to only receive one of the values in the php script.
My questions is how to determine which value the php script will receive using JavaScript.
use this:
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo[]">
<input type="checkbox" value="1" name="foo[]">
</form>
and in PHP, use:
$params = $_GET['foo']; //params would hold array
it would be good to use.
You can do a loop on the global variable $_GET
foreach($_GET as $key=>$val) {
echo "key = $key , val = $val";
}
if you have multiple inputs with the same name you will need to append []to the name so you can get all the values as a array
<form method="get" enctype="multipart/form-data">
<input type="hidden" value="0" name="foo[]">
<input type="checkbox" value="1" name="foo[]">
</form>
to get the values in jquery you do the following:
$('input[name="foo[]"]').each(function(){
console.log($(this).val());
});
if you only want one value of foo but you have multiple elements with that name you will need to change your logic to using radio buttons
This is really bad design. You should check checkbox state in your php (backend) code. Get rid of the hidden input:
<form method="get" enctype="multipart/form-data">
<input type="checkbox" value="1" name="foo">
</form>
and put this in your php code:
if (isset($_GET['foo'])) {
$foo = 1;
} else {
$foo = 0;
}
If you want to use javascript, you can try this on form submit:
var checkboxValue = $("input[name='foo']").prop("checked");
checkboxValue would be true or false depending on checkbox status.
I have a checkbox and a few input elements related to this checkbox as shown below
<input name="balanceFeaturesOn" id="balanceFeaturesOn" type="checkbox" disabled="disabled" checked="" />Control
<input name="IntervalDays26566521" type="Text" onclick="" onchange="" value=" 31 ">
<input name="IntervalHours26566521" type="Text" onclick="" onchange="" value=" 12 ">
For some reasons, I will have to keep my checkbox always disabled.
On the submit of above form (Say that the checkbox and inputs are inside a form), in the server code, I want to grab the text inputs based on if the checkbox was checked/unchecked. However since the checkbox is disabled, the request parameter does not contain the balanceFeaturesOn property.
So when I execute the below line:
String[] balanceFeatArr = request.getParameterValues("balanceFeaturesOn");
I am not getting any value...
So my question is how do I be able to get the value of the checkbox while still keeping it disabled on the UI?
Try the following code,
In the form use javascript function to submit the form,
<input type='submit' onclick='javascript:submitMe()' />
Javascript function,
function submitMe(){
$('#balanceFeaturesOn').removeAttr('disabled');
$('#formId').submit(); //Replace with the actual id of the form
}
Make sure you have included jquery library in your code.
Use Hidden Fields.
Hidden fields are similar to text fields, with one very important difference!
The difference is that the hidden field does not show on the page. Therefore the visitor can't type anything into a hidden field, which leads to the purpose of the field:
To submit information that is not entered by the visitor.
http://www.echoecho.com/htmlforms07.htm
Considering the following HTML:
<form id="upvoteForm" method="post" action="/post/upvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<form id="downvoteForm" method="post" action="/post/downvote">
<input type="text" name="post_id" id="post_id"/>
</form>
<input type="hidden" id="_postid" value="1"/>
I'm trying to set the two input fields with the name post_id to to value from _postid using this JavaScript and jQuery:
$(document).ready(function() {
$('#post_id').val($('#_postid').val());
});
However, as you can see in this jsFiddle, it's only setting the value of the first one. How do I set the value of both of them? I thought the selector would end up grabbing both.
Now, I realize you might be wondering why I have two forms on this page. The basic reason is I have button inputs that I've styled the way I want but then I use the onclick to call the submit of the appropriate form here. I am ultimately going to be leveraging AJAX here, but that's coming later.
id is always unique. you cannot select 2 elements with same id. select by name
$(document).ready(function() {
$('input[name=post_id]').val($('#_postid').val());
});
Having two HTML elements with the same ID is illegal and will cause undefined behavior such as what you're experiencing. Using the same name is valid, however. Therefore you could use a selector like $('form > input[name=post_id]'), which would look for an input inside of a form with the name attribute set to post_id.
I have a form in HTML with multiple inputs of type submit:
<form id = "myForm1" action="doSomethingImportant/10" class="postLink" method="post">
<input type="hidden" id="antiCSRF" name="antiCSRF" value="12345"></input>
<input type="submit" value="clickThisLink"></input>
<input type="submit" value="Don'tclickThisLink"></input>
</form>
What I want to do is select only the first input with type submit while ignoring the others, the snippet of code I currently have is as follows, note it is within a for-each loop that goes through all forms on my page, hence (this) to avoid confusion:
var name = $(this).find("input[type='submit']").val();
I'm thinking this already grabs the first input of type submit by default, I'm not sure if that assumption is correct or if there's a more formal way of going about it, thanks.
Try:
$(this).children("input[type='submit']:first").val();
how about the first selector
var name = $("input[type='submit']:first").val();