How to submit selected checkbox items? - javascript

I have a list of items that need to be selected and take an action based on user's request.
User selects the items and click on one of the btns to do something on the items.
My code is as following but I am not sure how to complete it. I believe, need to put them in a form to be submitted or pass the but not sure how to have a form with two submit btns, (if I need to have ).
<body>
<p><b>Shopping cart</b></p>
<table>
<tbody>
<c:forEach items="${mycart.items}" var="item">
<tr>
<td>
<input type="checkbox" name="Items"
value="${item.ID}"/>
</td>
<td>
Name : ${item.name}
</td>
</tr>
</c:forEach>
</tbody>
</table>
checkout
Delete

you can easily have two <input type="submit" name="something" /> in one <form>
if you want to differentiate the actions, just use different name for each submit button
EDIT:
<form ...>
...
...
<input id="b1" type="submit" name="edit" value="Edit"/>
<input id="b2" type="submit" name="delete" value="Delete"/>
</form>
If the form above is submitted by clicking #b1, then your request will contain a parameter named "edit". If the submit is triggered by #b2, then it will contain "delete".

I think following script might let you obtain what items are checked.
With jQuery, you need implement your checkout() like this
function checkout() {
$('input[name="Items"]:checkbox').each(function() {
if ($(this).attr("checked")) {
alert($(this).val() + 'is checked');
} else {
alert($(this).val() + 'is not checked');
}
}
);
}

Related

Cypress iterate over the table and click on the matching text passed from gherkin file

I am new to cypress and have a scenario where i need to select 'text2' from below table which is under a view, 'text2' is the value from feature file.
<table>
<tr .............>
<td ..........>
<div ....>
<input class= ' ' ..... value='text1'>
</div>
</td>
</tr>
<tr .............>
<td ..........>
<div ....>
<input class= ' ' ..... value='text2'>
</div>
</td>
</tr>
</table>
i tried with
cy.get('table tr').find('td').contains('text2').click() its not working,
Any Suggestions would be of great help, Thanks.
Good question, this is actually a bit tricky.
If you follow this Cypress example Find the input[type='submit'] by value,
then your inputs must have the type='submit' attribute for contains() to work.
<div id="main">
<form>
<div>
<label>name</label>
<input name="name" />
</div>
<div>
<label>age</label>
<input name="age" />
</div>
<input type="submit" value="submit the form!" />
</form>
</div>
// yields input[type='submit'] element then clicks it
cy.get('form').contains('submit the form!').click()
However, type='submit' produces buttons on the web page.
If you want input boxes (type='text' which is the default if not specified), you cannot use .contains(). You can access the value of a with .invoke('val').
Sadly however, .invoke('val') does not pinpoint the exact element in the same way .contains() does. It simply gets the text value of the first input and returns the text, not the element (so you can't click it).
The best way I found is to construct a selection function inside a then()
cy.get('table tr td input')
.then($inputs => { // pass in all inputs
return Array.from($inputs) // convert to array
.find(input => input.value === 'text2') // use Array.find() to pick the element
})
.should('have.value', 'text2') // in case 'text2' does not exist
.click()
How about just select the element that contains the test:
cy.contains('text2').click();

Use jQuery to Show/Hide a Form on submit

I would like to show the second text field incl. copy button as soon as i submit the the first text field. how i can hide the second text field and show after submit?
I tried as following:
HTML:
First Texfield:
<tr><td><input type="text" id="source">
<button type="submit" id="submit" id="formButton">Submit</button></td></tr>
Second Textfield:
<tr><td><input type="text" size="62" id="target" id="form1">
<button onClick="myFunct()" id="form1">Copy</button></td></tr>
JQuery:
<script>
$("#formButton").click(function(){
$("#form1").toggle();
});
</script>
Thank you so much for your support.
If you intend to submit data to a server normally you should have your inputs and buttons wrapped in a <form> tag, so I added one and set it up so that it sends to a live test server. There's also an iframe added as well to display the server's response. The jQuery is simple:
$('#main').on('submit', function() {...
When form#main "hears" a submit event (i.e. when the button[type=submit] is clicked...
$('.row2').removeClass('hide');
...Remove the class .hide form tr.row2 which removes the style display:none
BTW, ids must be unique. #form1 is duplicated and there's 2 ids on one button in OP code.
Demo
$("#main").on('submit', function() {
$(".row2").removeClass('hide');
});
.hide {
display: none
}
<form id='main' action='https://httpbin.org/post' method='post' target='view'>
<table>
<tr>
<td><input type="text" id="source" name='source'>
<button type="submit">Submit</button></td>
</tr>
<tr class='row2 hide'>
<td><input type="text" size="62" id="target" name='target'>
<button type='button'>Copy</button></td>
</tr>
</table>
</form>
<iframe name='view'></iframe>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
The first problem is that you have duplicate IDs on the button (both submit and formButton). An element can only have one ID. I've gone with the latter in my example.
Second, you have duplicate form1 IDs, which is also invalid markup. Simply make use of classes instead.
Then it's just a matter of hiding these elements by default, and showing them on click of the button. I'd recommend .show() for this instead of .toggle().
This can be seen in the following:
$("#formButton").click(function() {
$(".form1").show();
});
.form1 {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td>
<input type="text" id="source">
<button type="submit" id="formButton">Submit</button>
</td>
</tr>
<tr>
<td>
<input type="text" size="62" id="target" class="form1">
<button onClick="myFunct()" class="form1">Copy</button>
</td>
</tr>

Multiple submit buttons in Chrome Extension Popup Form

I'm developing an extension that saves to storage, If the form has more than one button with the same id (not name so much, id is the identifier for chrome extensions), my check doesn't work.
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
<tr>
<td colspan="2">
<input type="Submit" value="Edit" id="action" name="action" style="width: 100%" /></td>
</tr>
Won't trigger my js (below), but this will
<tr>
<td colspan="2">
<input type="Submit" value="Add" id="action" name="action" style="width: 100%" /></td>
</tr>
JS
function manageItem() {
if (action.value=='Add') {
...
}
}
My intent was to use it like
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
If I only have one button with the id action, this works. If I have more than one button, this doesn't work at all.
For instance, when a browser submits to server side script, only the clicked submit button has its value sent, so this situation would work with that (just as an example).
I've tried testing each row in its own form, but I still get conflict when two elements have the same ID. What can I do?
Edit: I thought I had included in my question that I do know that id's cannot repeat, but I didn't explicitly say that. I know that in well-formed html, IDs cannot repeat, but I don't know how I can achieve this.
You should use class="action" instead of id="action", ids can't repeat.
Also, a typo: replace if (action.value='Edit') { with if (action.value=='Edit') {
In your current html, you don't really need neither ids or classes (but name is still needed) - you can remove these attributes, nor
function manageItem() {
if (action.value=='Add') {
...
} else if (action.value='Edit') {
...
}
}
To distinguish between your buttons, you can just use the following:
document.getElementsByName("action")[0].onclick=function(){
//first button clicked
}
document.getElementsByName("action")[1].onclick=function(){
//second button clicked
}

jQuery $('#id').submit() not working

I am creating a form such that when the user click the "submit" button, it prevents the default action, serializes a subset of the fields, and then proceeds to submit all of the information via the POST array (PHP).
I am encountering a problem where the form is basically not submitting when I use the .submit() method. When I disable my javascript, the form submits fine (just with the wrong information, as the array is not serialized). But as soon as I re-enable my js, clicking the submit button does nothing except show my test console.log(var) in console. Here is some of my code, hopefully you can see what I am doing wrong. All of the online documentation says to use .submit(), but it doesn't seem to work, no matter what I try.
HTML:
<form id="entryForm" action="add_entry.php" method="post">
<div class="leftDiv">
<input type="text" class="inputFormTitle" name="entryName" placeholder="Name your entry..." />
<span class="regText">
<b>Entry Properties</b>
Specify entry properties, permissions, etc.</span>
<table class="formTable">
<tr>
<th>Parameter</th>
<th>Value</th>
<tr>
<td>Group</td>
<td><select name="group"><option></option><option>Graham Test</option></select>
</tr>
<tr>
<td>Project</td>
<td><select name="project"><option></option><option>Project 1</option><option>Project 2</option></select>
</tr>
<tr>
<td>Protocol</td>
<td>
<select id="protocolloader" name="protocol">
<option></option>
<option>PCR & Gel</option>
<option>Item Storage</option>
<tr>
<td>Permissions</td>
<td><input type="radio" name="permission" value="0">Only I can access this entry</input>
<input type="radio" name="permission" value="1">Only group members can access this entry</input>
<input type="radio" name="permission" value="2">Everyone can access this entry</input>
</select>
</tr>
</table>
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
<br/>
</div>
<div class="rightDiv">
<input type="text" class="inputFormTitle" id="ppt" placeholder="Please select a protocol" disabled/>
<div class="formHolder" id="protocolForm">
</div>
</div>
<input type="hidden" id="serialInput" name="protocolValues" value="nuttin" />
</form>
And the accompanying javascript:
var entrySubmit = $('#submitEntry');
entrySubmit.on('click', initEntrySubmission);
function initEntrySubmission(e) {
e.preventDefault();
var serializedProtocol = $("#protocolForm :input").serialize();
console.log(serializedProtocol);
$('#serialInput').val(serializedProtocol);
$('#entryForm').submit();
}
PHP Form (which I don't think is the issue but figured I would include it anyways)
<?php // add_entry.php
session_start();
include_once 'creds.php';
$con=mysqli_connect("$db_hostname","$db_username","$db_password","$db_database");
if (isset($_POST['group'])){
$lab = $_SESSION['labname'];
$author = $_SESSION['username'];
$name = $_POST['entryName'];
$group = $_POST['group'];
$protocol = $_POST['protocol'];
$permission = $_POST['permission'];
$array = $_POST['serialInput'];
$filearray = $_POST['fileArray'];
$project = $_POST['project'];
$query = "INSERT INTO data (protocol, name, lab, author, uniquearray, filearray, group, project, permissionflag)
VALUES ('$protocol', '$name', '$lab', '$author', '$array', '$filearray', '$group', 'project', '$permission')";
mysqli_query($con, $query);
mysqli_close($con);
}
?>
I wouldn't normally include so much HTML but I thought maybe I messed something up in there that may be the issue, and I just don't realize it. I tried to take out most of the break and header tags to clean up the code a bit.
Thanks for any help!
Regards.
The documentation of .submit() states, that
Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures.
You have an input that has the name submit.
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" />
I tried it with and without that name. It works without!
I found the following to work:
<script>
function initEntrySubmission() {
var serializedProtocol = $("#protocolForm :input").serialize();
alert(serializedProtocol);
$('#serialInput').val(serializedProtocol);
return true;
}
</script>
<form id="entryForm" action="" method="post" onSubmit="return initEntrySubmission();">
...
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" value="Submit Entry"/>
</form>
The main things to do are to add an onSubmit to your form tag. The function must return either true or false. Return true will submit the form.
Also, you do need to clean up your HTML, there are select statements in there, without closing tags and your submit button
<input type="submit" id="submitEntry" style="font-family:Raleway;" class="inputButton" type="button" name="submit" value="Submit Entry" /
has no ending >, it also has 2 type attributes type="button" and type="submit"(its both a button and a submit?) and has a name=submit, which is also unnecessary .
You don't have to preventDefault(), the Code will still be run before the Form is submitted.
function initEntrySubmission() {
var serializedProtocol = $("#protocolForm :input").serialize();
console.log(serializedProtocol);
$('#serialInput').val(serializedProtocol);
}
You can try something like below
In HTML just add
<form id="entryForm" action="add_entry.php" method="post" onsubmit="return false;">
And in JS function
function initEntrySubmission(e) {
var serializedProtocol = $("#protocolForm :input").serialize();
$('#serialInput').val(serializedProtocol);
$('#entryForm').removeAttr('onsubmit');
$('#entryForm').submit();
}
Just change:
$('#entryForm').submit();
To:
$('#entryForm')[0].submit();
Also rename your submit element as #Matmarbon has so eloquently explained.
Explanation:
$('#entryForm').submit(); simply triggers the submit event and takes you back to square one.
$('#entryForm')[0].submit(); submits the form ... more like the default action, without triggering the submit event.

Find the value of radio button checked in jquery

I have this table containing 3 radio buttons, I want to find out whether a particular radio button is check or not at given point of time.
<table align="center" width="100%" border="0">
<tbody>
<tr>
<td>
<input type="radio" name="compareRadio" value="all" checked="checked"/>
<label>View All Records</label>
</td>
<td>
<input type="radio" name="compareRadio" value="diff" />
<label>View Differences</label>
</td>
<td>
<input type="radio" name="compareRadio" id="patch" value="patches" />
<label>Compare Patches</label>
</td>
<td>
<input type="button" class="btn" value="Export Into Excel"/>
</td>
</tr>
</tbody>
</table>
I send a request to the server, when the result comes back I want to identify whether patches radio button is selected or not.
So I did something like this.. but it returns all radio button
$.post("/csm/compare.action",
{
sessiontoken: sessiontoken,
compareCategory: "system",
compareSubCategory:"patch",
xml1:absP[0],
xml2:absP[1]},
function(resdata)
{
comparePatchData=resdata;
comparePatchLoading=false;
if($("input:radio[name=compareRadio]").val()=="patches")
{
//Trigger click on radio button for "same" campare
$('input[name=compareRadio]:eq(2)').click(); //so that it refreshes the content
$("input[name=compareRadio]:eq(2)").attr("checked", true);
$('input[type="radio"]').removeAttr('disabled');
}
}
);
If you just want to know if it is checked or not, then you could do this:
if($('#patch:checked').length)
// It is checked.
Or:
if($('input[value=patches]:checked').length)
// It is checked.
The $() function returns an array of matched elements so you can check its length property to see how many things (if any) were matched.
References:
:checked selector
Attribute equals selector
To find out if particular checkbox is checked you can use jQuery's is():
if($('input[value=all]').is(':checked'))
{
//Yep, it's checked
}

Categories

Resources