Form under Loop construct not working as expected - javascript

Improper Form Submission
For the below code snippet, I am not able to get any value for the input hidden field in my request.
In the form table created:
It is working fine, if I click the Approve button of the first row.
Issue is faced when Approve button of intermediate row is clicked.
There is no any value passed in the request for the id="hidinput";
<script>
function fetchID(){
var contentID = document.getElementById("testID").innerHTML;
document.getElementById("hidinput").value=contentID;
}
</script>
<%for (APPL_Testimonial_Txn testimonial_Txn : results) {%>
<tr>
<form action="<%=approve.toString()%>" method="POST">
<td id="testID"><%=testimonial_Txn != null ? testimonial_Txn
.getTestimonialId() : ""%></td>
<input type="hidden" name="rowId" id="hidinput" value=""/>
<td><button class="button-continue ContinueNew" type="submit"
onclick="fetchID()">APPROVE</button></td>
</form>
</tr>
<%}%>
Please find below screen capture of the table.

As per the code above, there is no way to figure out the row in which approve button was clicked. You can pass the testimonial Id to a fetchID function.
<script>
function fetchID(contentID){
document.getElementById("hidinput").value=contentID;
}
<script>
<tr>
<form action="<%=approve.toString()%>" method="POST">
<td><%=testimonial_Txn != null ? testimonial_Txn
.getTestimonialId() : ""%></td>
<input type="hidden" name="rowId" id="hidinput" value=""/>
<td><button class="button-continue ContinueNew" type="submit"
onclick="fetchID('<%=testimonial_Txn != null ? testimonial_Txn
.getTestimonialId() : ""%>')">APPROVE</button></td>
</form>
</tr>
<%}%>

Thanks for the suggestion.
I changed the position of form tags, means kept form tag outside the loop construct keeping form as unique and it worked. :)

Related

Get the value from the form and insert that value in the table by using JavaScript

I have created simple form and table.. So I need to add values from the form. I have created the code but it is not working.
<html>
<body>
<script>
function clickFunction(){
document.getElementByName('inputvalue').innerHTML = document.getElementByName('name');
}
</script>
<form>
Name: <input type="text" name="name">
<input type="submit" value="Done" onclick="clickFunction()">
</form>
<table border="1">
<tr><td>Data input: </td><td><label name="inputvalue" > null </label></td></tr>
</table>
</body>
</html>
There are few things you have to fix first:
It should be document.getElementsByName, you are missing a 's'.
Since, the submit is in a form element. Once you click it, it will submit the form. So, you should stop it by using return false in the function.
To get the value from the input box, you should add 'value' after document.getElementByName('name'). it should be document.getElementByName('name').value.
I have added e.preventDefault. In-case, it tries to submit. In that case, there is a slight change in HTML.
...
<input type="submit" value="Done" onclick="clickFunction(event)">
...
The corrected source code: https://jsfiddle.net/gy03xz4b/4/
HTML is fine, the js will change a bit:
function clickFunction() {
document.getElementsByName('inputvalue')[0].innerHTML = document.getElementsByName('name')[0].value;
return false;
}
Hope that helps!
Refers:
https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName
http://www.irt.org/script/155.htm (What does 'return false' do?)
https://developer.mozilla.org/en/docs/Web/API/Event/preventDefault (e.preventDefault)

Access sibling variable of text-field

I have a simple form, just a single text field containing a email from a MySQL database. The user has 2 buttons one can completely update the email with what they replace it with or they can choose to return the email to a default state i.e. the original email. It all works OK if you have the 2 buttons immediately 'in-situ' with the relevant text-field. But if you put the 'reset' button in a separate table cell, the 'onlick' set-email-back-to-default function stops working, and I don't understand how to fix it.
It will work like this because the reset button is slap-bang next to the text field:
<input name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
<input id="reset-cc" name="add" type="button" value="Set to default" />
Here's the JavaScript:
$(document).ready(function() {
$('#reset-cc').click(function() {
$(this).siblings('input[name="cc_email"]').val('<?php echo $_SESSION['admin_username'] ?>');
$('#update_cc').submit();
return false;
});
But if I place the reset button in a separate table cell as follows the function ceases to work as if it can no longer access the text field:
<td>
<input name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
</td>
<td>
<input id="reset-cc" name="add" type="button" value="Set to default" />
</td>
I assume I need to modify the JavaScript so it can still access the text field even though it is now separated by a table-cell but I don't know how to do it.
Your problem lies here:
$(this).siblings('input[name="cc_email"]')
By moving the input button into a different TD it is no longer a sibling (as the other answers have indicated). You may want to just give the button an ID and reference it that way:
//this bit |
// v
<input id="cc_email" name="cc_email" type="text" value="<?php echo !empty($_SESSION["cc-email"]) ? $_SESSION["cc-email"] : $_SESSION['admin_username'];?>" />
//...
$("#cc_email")...
Which will be easier than making convoluted parent/find calls. This button is unique, is it not?
The .siblings() function searches in a collection of siblings within the same parent. If you put them into different parents then they are not siblings. Try replacing it with something like:
$(this).parent().prev().find('input[name="cc_email"]').val('<?php echo $_SESSION['admin_username'] ?>');
If the input will always be in the same tr as the button, search for the input field within the row:
$('#reset-cc').click(function() {
$(this).closest('tr').find('input[name="cc_email"]').val('original#example.com');
$('#update_cc').submit();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
<tr>
<td>
<input name="cc_email" type="text" value="loaded#example.com" />
</td>
<td>
<input id="reset-cc" name="add" type="button" value="Set to default" />
</td>
</tr>
</table>

jQuery, javascript: several forms same submit button text - how to determine value of closest hidden value box

I have several forms in HTML, each with a submit button and a hidden field. The same javascript function is called when any of the submit buttons are pushed. I want to know which submit button has been pushed. I think I can do this by finding out what the hidden field value is of the corresponding form - but I'm having difficulty with this. My HTML is:
<div id="existingPhotosList">
<table><tbody><tr><td>
<img src="./userPictures/IMG0001.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0001.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
<tr>
<td>
<img src="./userPictures/IMG0002.jpg">
</td>
<td>
<form class="deleteFiles">
<input type="hidden" name="picture" value="IMG0002.jpg">
<input type="submit" name="deleteFile" value="Delete File">
</form>
</td>
</tr>
</tbody>
</table>
</div>
There may be more or less table rows with images and forms on them - depending on how many images are found on the server.
The javascript I have right now is:
$('.deleteFiles').submit(deleteFile);
function deleteFile() {
var myValue = $(this).parent().closest(".picture").val();
alert(myValue);
return false;
}
I'm currently getting undefined as the result of the alert.
I want to know which submit button has been pushed.
As each of your forms only has one submit, you don't have to change your code much.
this in your submit handler will refer to the form, and the element is within the form, so:
var myValue = $(this).find("input[name=picture]").val();
No need to go up to the parent, and closest goes up the ancestry (through ancestors), not down. find goes down (descendants).
the simplest way I think will be:
var myValue = $('input[name=picture]', this).val();
should be:
var myValue = $(this).closest(".deleteFiles").find("input[type=hidden]").val();
here is the demo http://jsfiddle.net/symonsarwar/963aV/
$('.deleteFiles').click(deleteFile);
function deleteFile() {
var me=$(this).closest('tr').find('td:eq(1) input').val();
alert(me)
}

Is it possible to construct a link, navigate to it and print the response in C# programmatically? How?

I have a webpage written in C#/Razor. I am printing all the values from a database on this page like so :
<div style="min-height: 150px; font-size: 1.25em">
<div style="margin-bottom: .5em">
<table>
<thead>
<tr>
<th>Name</th>
<th>Branch</th>
<th>Phone No.</th>
<th>Extension</th>
<th>Email</th>
</tr>
</thead>
<tbody>
#foreach (var prod in Model)
{
<tr>
<td>#prod.FullName</td>
<td>#prod.Branch</td>
<td>#prod.PhoneNo</td>
<td>#prod.Extension</td>
<td>#prod.Email</td>
#if (User.IsInRole(#"Admins") || User.Identity.Name == prod.DomainAC)
{
<td>edit</td>
}
else
{
<td>User => #User.ToString()</td>
}
<td>
<input type="checkbox" name="message" value="#prod.PhoneNo">Message<br>
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
This works fine to display their info. What I would like to do now is a small bit more difficult.
Below this, I have a form with a username, password and message. Using this form, I would like to have the behaviour that on submit, it will take the values in the input boxes of the form and the above C#, construct a link, navigate to the link and print the response of the server
So I have :
#{if (IsPost)
{
//handle and print response
}
else
{
<form method="post" action="">
Username:<br />
<input type="text" name="u" /><br />
Password<br />
<input type="text" name="p" /><br />
<br />
Password<br />
<textarea name="m" cols="25" rows="5">
Enter your comments here...
</textarea><br>
<br />
<input type="submit" value="Submit" class="submit" />//when this is clicked, construct url and navigate to it.
</form>
}
}
The URL I want to construct from this form is :
http://webaddress.com/web/d.php?u=<Username entered by user>&p=<Password entered by user>&s=<List of Phone Numbers from the C# above where the checkbox is selected, comma separated>&m=<Comment submitted by user>
So, if my name is "John", Password is "Password1", Comment is "Test" and I have selected one checkbox for a user with the phone number "12345678", the URL I will navigate to is :
http://webaddress.com/web/d.php?u=John&p=Password1&s=12345678&m=Test
Ideally I would like to print the response of the webpage in a <div> while still on the same parent web page rather than going to a new one if this is possible.
I have no idea where to begin with this, how to do it or even if this is possible. Can anyone help me please ?
UPDATE :
Trying this JQuery which does not alert me so I cannot debug :
<script>
$("#thebutton").click(function() {
var form = $(document.getElementById('FormID'));
var urlToConstruct = 'http://webaddress.com/web/d.php';
urlToConstruct += '?u=' + form.find('#u').val();
urlToConstruct += '&p=' + form.find('#p').val();
('#employeeTable tbody tr').has(':checkbox:checked').find('td:eq(2)').each(function() {
urlToConstruct.append($(this).text());
alert(urlToConstruct);
})
});
</script>
$("#SubmitButtonID").click(function() {
var form = $(document.getElementById('FormID');
var urlToConstruct = 'http://webaddress.com/web/d.php';
urlToConstruct += '?u=' + form.find('#iDoFInputControl1').val();
urlToConstruct += '&p=' + form.find('#iDoFInputControl2').val();
form.submit();
});
this example uses jQuery, a javascript library (jquery.com), i'm using getElementById to find your form, faster then the native jQuery() selector. This example assumes all your controls are inside your form (but if they are not it wouldn't be a train smash, just cant use (jQuery obj).find).
.val() gets the value, and it should work for checkboxes too, but if it doesn't, a quick google search for getting values from checkboxes using jquery will return loads of results.
p.s. I've written that code mostly freehand, not checked it in a browser to make sure that it is completely correct.
Update... to answer your follow up question...
If you are using mvc (assumed as you using razor), inside your controller you can use Request.Params["urlParameter"] or Request.Form["controlID"] to access what you've received from the browser. Then once you've got those values, you should place them inside the 'ViewBag' (ViewBag.yourVariableHere="val") for them to be accessible in your view via #ViewBag.yourVariableHere, or you can include the required data in your model which can also be accessed in your view

how to invoke a jsp method onclick/on form submit

I have a jsp page with this code:
<script type="text/javascript">
function getWithdrawAmmount()
{
var withdraw=document.forms["WithdrawDeposit"]["AmountToWithdraw"].value;
document.getElementById('hidden').type = withdraw;
}
</script>
<form method="POST" name="WithdrawDeposit" onsubmit="getWithdrawAmmount()">
<table>
<tr><td><input type="text" size=5 name="AmountToWithdraw"></td>
<td><input type="button" value="Withdraw"></td></tr>
</table>
</form>
<input type="hidden" name="hidden" value="">
<% String AmountWithdraw = request.getParameter("hidden"); %>
<%!
public void Withdraw(){
int Amount = Integer.parseInt("AmountWithdraw");
Deposit deposit = new Deposit();
deposit.WithdrawMoney(AmountWithdraw);
} %>
I need to activate the Withdraw() method on form submit and get the text input.
the javascript hold the value inserted in 'hidden' and i can access it later.
but i can't call to : <% Withdraw(); %> from inside javascript.
how can i call Withdraw() after button click?
10x
First off your line of code has issues
document.getElementById('hidden').type = withdraw;
It is looking for an element with an id of hidden. Not a name, an id. So add an id to the element you are referencing.
Second you are setting a type. Don't you want to set the value?
So the HTML would look like
<input type="hidden" name="hidden" id="hidden" value="" />
and the JavaScript would be
document.getElementById('hidden').value = withdraw;
Now if you want to call a function on the server, you either need to post back the form or make an Ajax call.

Categories