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. :)
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)
}
I am using echo nest API and can't find the problem with my button, why doesn't trigger my function at all! I check my button in chrome debug and shows no activity.
If I enter it trigger the function, but when I click on the button it doesn't trigger my function ?!!!
I need another pair of eyes to check my codes , pleaseeee :)
Thank you!
//Search artists.
function search(){
inputField = document.getElementById("inputField");
callApiSearch ( urlRoot + inputField , parseData);
}
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
window.addEventListener( "load", start, false );
</script>
</head>
<body>
<form id="searchForm" action="#">
<center>
<table>
<thead style="align-text:center" ><img src="images/Logo.png" style="align:center"><br/></thead>
<tr>
<td>Search Artist:</td>
<td> <input id="inputField" type="search"> </td>
<td> <input id="searchButton" type="button" value="Search"></td>
</tr>
</table>
<div id="results"></div>
</center>
</form>
</body>
</html>
in chrome --- > F12 --- > Network
should display all the activities; however mine is empty ... please correct me if I'm wrong?
try this one
html
<form action="#" id="searchForm" name="searchForm">
<img src="images/Logo.png" style="align:center" /><br />
<table>
<tr>
<td>Search Artist:</td>
<td><input id="inputField" type="search" /></td>
<td><input id="searchButton" type="button" value=
"Search" /></td>
</tr>
</table>
<div id="results"></div><br />
</form>
javascript
$("#searchButton").click(function() {
inputField = document.getElementById("inputField");
callApiSearch(urlRoot + inputField, parseData);
});
Put your 'script' block at the end of your html code. Browsers parses html document in top-down fashion and when your following method parsed by your browser
//register click event handler for searchButton
function start(){
var searchButton = document.getElementById( "searchButton" );
searchButton.addEventListener("click", search, false);
} // end function start
, it doesnt know what 'searchButton' is, since 'searchButton' hasn't been parsed yet. Thus it is unable to add event listener to your button and it doesn't work on click
I had working code that could reset my form when I click on a reset button. However after my code is getting longer, I realize that it doesn't work anymore.
<div id="labels">
<table class="config">
<thead>
<tr>
<th colspan="4"; style= "padding-bottom: 20px; color:#6666FF; text-align:left; font-size: 1.5em">Control Buttons Configuration</th>
</tr>
<tr>
<th>Index</th>
<th>Switch</th>
<th>Response Number</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<form id="configform" name= "input" action="#" method="get">
<tr>
<td style="text-align: center">1</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" value="" id="number_one"></td>
<td><input style="background: white; color: black;" type="text" id="label_one"></td>
</tr>
<tr>
<td style="text-align: center">2</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id = "number_two" value=""></td>
<td><input style="background: white; color: black;" type="text" id = "label_two"></td>
</tr>
<tr>
<td style="text-align: center">3</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_three" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td style="text-align: center">4</td>
<td><img src= "static/switch.png" height="100px" width="108px"></td>
<td id="small"><input style="background: white; color: black;" type="text" id="number_four" value=""></td>
<td><input style="background: white; color: black;" type="text" id="label_three"></td>
</tr>
<tr>
<td></td>
<td><input type="submit" id="configsubmit" value="Submit"></td>
</tr>
<tr>
<td><input type="reset" id="configreset" value="Reset"></td>
</tr>
</form>
</tbody>
</table>
</div>
And my jQuery:
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Is there some source that I should include in my code in order for the .reset() method to work? Previously I was using:
<script src="static/jquery.min.js"></script>
<script src="static/jquery.mobile-1.2.0.min.js"></script>
and the .reset() method was working.
Currently I'm using
<script src="static/jquery-1.9.1.min.js"></script>
<script src="static/jquery-migrate-1.1.1.min.js"></script>
<script src="static/jquery.mobile-1.3.1.min.js"></script>
Could it possibly be one of the reason?
you may try using trigger() Reference Link
$('#form_id').trigger("reset");
http://jsfiddle.net/8zLLn/
$('#configreset').click(function(){
$('#configform')[0].reset();
});
Put it in JS fiddle. Worked as intended.
So, none of the aforementioned issues are at fault here. Maybe you're having a conflicting ID issue? Is the click actually executing?
Edit: (because I'm a sad sack without proper commenting ability) It's not an issue directly with your code. It works fine when you take it out of the context of the page that you're currently using, so, instead of it being something with the particular jQuery/javascript & attributed form data, it has to be something else. I'd start bisecting the code around it out and try to find where it's going on. I mean, just to 'make sure', i suppose you could...
console.log($('#configform')[0]);
in the click function and make sure it's targeting the right form...
and if it is, it has to be something that's not listed here.
edit part 2: One thing you could try (if it's not targeting it correctly) is use "input:reset" instead of what you are using... also, i'd suggest because it's not the target that's incorrectly working to find out what the actual click is targeting. Just open up firebug/developer tools, whathave you, toss in
console.log($('#configreset'))
and see what pops up. and then we can go from there.
According to this post here, jQuery has no reset() method; but native JavaScript does. So, convert the jQuery element to a JavaScript object by either using :
$("#formId")[0].reset()
// or
$("#formId").get(0).reset()
This is one of those things that's actually easier done in vanilla Javascript than jQuery. jQuery doesn't have a reset method, but the HTML Form Element does, so you can reset all the fields in a form like this:
document.getElementById('configform').reset();
If you do this via jQuery (as seen in other answers here: $('#configform')[0].reset()), the [0] is fetching the same form DOM element that you would get directly via document.getElementById. The latter approach is both more efficient and simpler though (since with the jQuery approach you first get a collection and then have to fetch an element from it, whereas with the vanilla Javascript you just get the element directly).
First line will reset form inputs
$('form#myform').trigger("reset"); //Line1
$('form#myform select').trigger("change"); //Line2
Second one will reset select2
Optional: You can use this if you have different types registered with different events
$('form#myform select, form input[type=checkbox]').trigger("change"); //Line2
A reset button doesn't need any script at all (or name or id):
<input type="reset">
and you're done. But if you really must use script, note that every form control has a form property that references the form it's in, so you could do:
<input type="button" onclick="this.form.reset();">
But a reset button is a far better choice.
jQuery does not have reset() method; but native JavaScript does. So, convert the jQuery element to a JavaScript object by either using :
$("#formId")[0].reset();
$("#formId").get(0).reset();
We may simply use Javascript code
document.getElementById("formid").reset();
I've finally solve the problem!!
#RobG was right about the form tag and table tag. the form tag should be placed outside the table. with that,
<td><input type="reset" id="configreset" value="Reset"></td>
works without the need of jquery or anything else. simple click on the button and tadaa~ the whole form is reset ;) brilliant!
I use this simple code:
//reset form
$("#mybutton").click(function(){
$("#myform").find('input:text, input:password, input:file, select, textarea').val('');
$("#myform").find('input:radio, input:checkbox').removeAttr('checked').removeAttr('selected');
});
By using jquery function .closest(element) and .find(...).
Getting the parent element and looking for the child.
Finally, do the function needed.
$("#form").closest('form').find("input[type=text], textarea").val("");
A quick reset of the form fields is possible with this jQuery reset function.
when you got success response then fire below code.
$(selector)[0].reset();
You can just add an input type = reset with an id = resetform like this
<html>
<form>
<input type = 'reset' id = 'resetform' value = 'reset'/>
<!--Other items in the form can be placed here-->
</form>
</html>
then with jquery you simply use the .click() function on the element with the id = resetform as follows
<script>
$('#resetform').click();
</script>
and the form resets
Note: You can also hide the reset button with id = resetform using your css
<style>
#resetform
{
display:none;
}
</style>
Here is simple solution with Jquery. It works globally. Have a look on the code.
$('document').on("click", ".clear", function(){
$(this).closest('form').trigger("reset");
})
Add a clear class to a button in every form you need to reset it. For example:
<button class="button clear" type="reset">Clear</button>
<button type="reset">Reset</reset>
Simplest way I can think off that is robust. Place within the form tag.
Your code should work. Make sure static/jquery-1.9.1.min.js exists. Also, you can try reverting to static/jquery.min.js. If that fixes the problem then you've pinpointed the problem.
You can use the following.
#using (Html.BeginForm("MyAction", "MyController", new { area = "MyArea" }, FormMethod.Post, new { #class = "" }))
{
<div class="col-md-6">
<div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
#Html.LabelFor(m => m.MyData, new { #class = "col-form-label" })
</div>
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-12">
#Html.TextBoxFor(m => m.MyData, new { #class = "form-control" })
</div>
</div>
<div class="col-md-6">
<div class="">
<button class="btn btn-primary" type="submit">Send</button>
<button class="btn btn-danger" type="reset"> Clear</button>
</div>
</div>
}
Then clear the form:
$('.btn:reset').click(function (ev) {
ev.preventDefault();
$(this).closest('form').find("input").each(function(i, v) {
$(this).val("");
});
});
I would like to hide/show a div based on radio selction.
-On page load the div is hidden and radio "yes" is selected.
-If user selects radio "no" the div would appear.
-If the user then rechecks "yes" the div would hide again.
Could anyone show me how this would work?
The html:
<table width="450px" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="200px" style="padding-top:3px; padding-left:3px;"><strong>Deliver Immediately?</strong>
<input type="radio" name="imm" id="delivernow" checked="true" />Yes
<input type="radio" name="imm" id="deliverlater" />No
</td>
<td width="140px">
<div name="datediv">
<label for="date">Select date:</label>
<input type="Text" id="date" maxlength="25" size="25"/>
<img src="images/cal.gif" onclick="javascript:NewCssCal('date','ddMMyyyy','arrow',true,'12','','future')" style="cursor:pointer"/>
</div>
</td>
</tr>
</table
Something like this? You will need to have jQuery loaded.
$(function(){
$("div[name='datediv']").hide();
$("#delivernow").add("#deliverlater").change(function(){
$("div[name='datediv']").fadeToggle();
});
});
jQuery makes this fairly simple. You could add a click function to the radio group (in this case select using the name "imm") and check the id of the radio button that's been clicked like this:
$("input[name='imm']").click(function(){
if($(this).attr("id") == "deliverlater"){
$("#datediv").show();
}else{
$("#datediv").hide();
}
});
Here's a live example on jsfiddle http://jsfiddle.net/h9H29/
EDIT: Here's jQuery include code for you
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
// We place your page code here
$("input[name='imm']").click(function(){
if($(this).attr("id") == "deliverlater"){
$("#datediv").show();
}else{
$("#datediv").hide();
}
});
});
</script>