I've looked through some topics but they either have auto-submit where each checkbox is as a separate parameter in the URL or they need submit button. What I am trying to achieve is:
My current HTML form:
<form name="status" id="status" method="get">
<input type="checkbox" name="status[]" value="0" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="1" onchange="document.getElementById('status').submit()" />
<input type="checkbox" name="status[]" value="2" onchange="document.getElementById('status').submit()" />
</form>
With this, I have auto-submit whenever a checkbox is checked, but I have an URL like ...&status%5B%5D=0&status%5B%5D=1
What I need is a comma-separated parameter in the URL like &status=0,1 while keeping the auto-submit option. Also, there are some more parameters in the URL, so this must be appended at the end while keeping the rest parameters.
Is this possible? I'm not familiar with javascript but I think there might be a way ...
Related
I have a form running a shopping cart style application on my site. To add items, I POST values to a form using a submit button. To remove items, I have to use a GET command.
What I want to do is to limit the selection possibilities - as you select one option, others are removed. For instance, if I have three options: Apples, Oranges, Bananas you are only able to select one.
Apples
Oranges
Bananas
If you select Apples, I want to post the value "Apples" whilst using a GET command to remove "Bananas" and "Oranges".
Currently I am doing this to post the values:
<form method="post">
<fieldset>
<input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" />
<input type="hidden" name="id" value="Apples" />
<input type="hidden" name="name" value="Apples" />
<input type="hidden" name="color" value="red" />
<input type="hidden" name="shape" value="round" />
<div id="apples" >
<input type="submit" name="my-add-button" class="add" value=" "/>  Apples
</div>
</fieldset>
</form>
And to remove the items I do this:
remove Bananas and Oranges
Is there a way to do both at the same time? I have tried doing an onclick event like this:
<div id="Apples" >
<input type="submit" name="my-add-button" class="add" value=" " onclick="location.href='index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges';" />  Apples
</div>
and I have also tried to use an action at the start of the form
But neither of these work - they will still submit the new item, but will not remove the item. Any idea of a good way to do both together?
Technically, yes, but it's a hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
If the form is set to POST, then any <input> and <textarea> within the form will go as POST data, but any query strings you place into the action's url will show up at the server as GET data:
$_GET['x'] -> 'y'
$_POST['a'] => 'b'
$_POST['x'] => undefined index
But note that clicking a link that's inside a <form> does NOT submit the form. it's like clicking any other link and will just go to the new address.
You can use $_REQUEST. As per the php documentation, quoted as follows:
An associative array that by default contains the contents of $_GET, $_POST and $_COOKIE
As above, you can then use the following hack:
<form method="post" action="foo.php?x=y">
<input type="text" name="a" value="b" />
</form>
EDIT: If both of the GET and POST requests work individually, it is possible that your PHP is where the problem lies - You haven't posted it, so I can't see where the issue could be. You could just put together some javascript to fire the remove request then fire the add request when clicked:
jQuery("input[name|='my-add-button']").click(function() {
var addform = jQuery(this);
event.preventDefault();
$.get("index.php?jcartRemove[]=Bananas&jcartRemove[]=Oranges", function(data) {
addform.submit();
});
});
I seem to have an issue with passing a value between two hidden fields.
I'm using a jquery plugin for for geolocation from google maps. The plugin uses a fieldset which includes two hidden fields, one for lat and one for lon. Each time then pin is moved the two values change, which is definitely happening and can be viewed in the developer tools.
I have a form that I'm bringing all of my values into to be sent to a php file all in one go. I've managed to get it working for all the other inputs I need but this one just wont work.
Heres the map with the two hidden fields. The hidden classes come with a value of 20 preset which changes.
<div class="gllpMap">Google Maps</div>
<input type="hidden" class="gllpLatitude" value="20"/>
<input type="hidden" class="gllpLongitude" value="20" />
<input type="hidden" class="gllpZoom" value="3"/>
</div>
And here is my search that is going to be sent to the php.
<form method="post" action="getData.php">
<input type="text" name="username" class="mySearch" value="" />
<input type="hidden" name="fromTest" id="fromTest"/>
<input type="hidden" name="untilTest" id="untilTest"/>
<input type="hidden" name="lat" id="lat"/>
<input type="hidden" name="long" id="long"/>
<input type="submit" class="myButton" value="">
</form>
For some reason I just cant get this to work. What I'm looking for is the simplest way to get this lat and long to equal the values set by the two hidden fields. The simpler the better, I'm pretty new to coding and this is just a first mock-up which I hope to revisit properly when I have more time available.
You can take and set the value using JQuery .val()
$("#lat").val($(".gllpLatitude").val());
$("#long").val($(".gllpLongitude").val());
DEMO
I have the below code for checkboxes on a page. I need to have both of them checked by default when the page loads. This displays a result of the query. Now when one of the checkbox is unchecked the form needs to be submitted and a different query results needs to be displayed. The checkboes are always being checked even I uncheck one box. Can someone please guide me here? thanks
<form action="abc.cfm?show=yes" method="post" name="myform">
<table align="center"><tr>
<td>
<input type="checkbox" checked="checked" name="chkbox" id="chkbox1"> <font size="3+"><strong> Agreement Only</strong> </font>
<input type="hidden" name="chk" id="chk1">
<input type="checkbox" checked="checked" name="chkbox" id="chkbox2"> <font size="3+"><strong>Active Employees</strong> </font>
<input type="hidden" name="chk" id="chk2">
</td>
<td>
<input type="Submit" name="submitnow" value="View now">
</td>
</table>
</form>
<cfif isdefined("form.chk1")>
query 1
<cfelseif isdefined("form.chk2")>
query 2
</cfif>
You could use a <input type="hidden" value=" (the value of your checkbox here) "/> for storing and then sending the checked value.
Just what exactly do you mean by 'save the selected radio button state' ?
In the page your form is posted to, you will know which checkbox is checked by examining your post variables. If your idea is to display the page with the above code again, with the user-selected checkbox checked, you may take a look at the following (jQuery 1.6+) :
$("#chkboxId").prop('checked', true); //check the checkbox with id chkboxId.
$("#chkboxId").prop('checked', false); //uncheck it.
var states = [false, false, true];
function saveStates()
{
var context = $("#chk1,#chk2,#chk3");
$(context).each(function (index) {
states[index] = $(context[index]).prop("checked");
});
}
I didn't test this, maybe there is a syntax error somewhere, but you get the idea. You need to use jQuery to apply my solution.
How can I submit the values of the textbox and radio button with "testLink1" in the following code:
<cfform name="frmEdit" method="POST" >
<INPUT type="text" name="txtName" value ="" >
<INPUT type="radio" name="typeA" value ="exempt" checked> Exempt
<INPUT type="radio" name="typeA" value ="non_exempt"> Non-exempt
testLink1
</cfform>
I have my own reason to use <a> tag instead of a submit button.
In order to submit the form via a link you will need to use JavaScript. I have rewritten your code below:
<form name="frmEdit" action="test1.cfm" method="POST">
<input type="text" name="txtName" value="" >
<input type="radio" name="typeA" value="exempt" checked="checked"> Exempt
<input type="radio" name="typeA" value="non_exempt"> Non-exempt
testLink1
</form>
Or as Travis suggested below, change the <a> tag like so:
testLink1
This should work for your simple example. All of the fields will be available to you in the FORM scope in ColdFusion.
There is also no reason to use cfform if you are not using any of it's functionality (which your example is not).
Really new to using jQuery and trying to find an example I need.
1) if I have, say, 5 radio buttons to choose an item, how do I pass the selected item to a hidden form field?
2) same question for a textarea. How do I pass the text written to a hidden form field and make sure it's escaped safely for a form submission?
Thanks for any help.
You can just bind to the change event:
<input type="hidden" id="myradiovalue" />
<input type="radio" name="myradio" value="0" />
<input type="radio" name="myradio" value="1" />
$('input[name=myradio]').change(function() {
$('#myradiovalue').val($(this).val());
});
And almost the same for textarea:
<input type="hidden" id="mytextarevalue" />
<textarea id="mytextareavalue"></textarea>
$('textarea').change(function() {
$('#mytextareavalue').val($(this).val());
});
For both <input type="radio"> and <textarea>, you will want to use jQuery change() method. If you want to sanitize the input before it is inserted into a <input type="hidden"> then you will need to use some regex or a library that does it for you, like jQuery Validation Plugin. Keep in mind that any sanitation/validation you do with javascript/jQuery will need to be double-checked server-side after the form is submitted.
But I don't know why you are copying data from one form input to another, can't you just use the form input as it is? What is the point of having the data in both a <textarea> and a <input type="hidden">?