Can't get input value with click event with jquery - javascript

I am dynamically creating a table which includes some dynamically generated buttons. I have done the same thing before using POST and it worked. Now I'm using AJAX so I need to get the value of the hidden form element via the click event. But, it always gives me the first value (first row/form).
Below is example of stripped down code.
Must I have a different name for each button? If so, how would I bind all those to a click event?
<pre><code>
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="assets/js/jquery.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(document).on("click", "input[name='vsu']", function(event){
console.log('sliste'+$("input[name='sliste']").val());
event.preventDefault();
});
});
</script>
</head>
<body>
<table id="slist">
<tbody>
<tr>
<td>user1</td>
<td>
<form>
<input type="hidden" name="sliste" value="1">
<input name="vsu1" type="submit" value="view">
</form>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<form>
<input type="hidden" name="sliste" value="2">
<input name="vsu2" type="submit" value="view">
</form>
</td>
</tr>
</tbody>
</table>
</body>
</html>
</pre></code>

You need to find the input element which is the previous sibling of the clicked button so
$(document).ready(function () {
$(document).on("click", "input[name='vsu']", function (event) {
console.log('sliste' + $(this).prev("input[name='sliste']").val());
event.preventDefault();
});
});
When you use $("input[name='sliste']") as the selector it will find all the input elements with the given name then when you use .val() as a getter it will return the value of the first element in the given set of elements.
$(document).ready(function() {
$(document).on("click", "input[name='vsu']", function(event) {
console.log('sliste' + $(this).prev("input[name='sliste']").val());
event.preventDefault();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="slist">
<tbody>
<tr>
<td>user1</td>
<td>
<form>
<input type="hidden" name="sliste" value="1">
<!-- changed the button type since the code snippet does not allow submit requests-->
<input name="vsu" type="button" value="view">
</form>
</td>
</tr>
<tr>
<td>user2</td>
<td>
<form>
<input type="hidden" name="sliste" value="2">
<input name="vsu" type="button" value="view">
</form>
</td>
</tr>
</tbody>
</table>

Related

Hide form after submit JQuery

I have a html form inside the table and i want to make it disappear after the user submits the form
Form:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function() {
$(this).hide();
});
</script>
After the submission, the form is still visible and nothing happening.
The problem is the selector:
$('#form')
The <form> element does not have the attribute id="form" — (that's the <div id="form"> - not a form and therefore not submittable) — all you need to do is target the actual <form> element. Change your code to this:
$('form').submit(function(e) { //NOTE: Removed "#"
e.preventDefault();
$(this).hide();
})
And it will work:
$('form').submit(function() {
$(this).hide();
})
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
You have to prevent the default action first in order to hide the form using event.preventDefault()
Further if you're working on a commercial level and you want your form to be submitted without redirection, then you can use XHR request
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr>
<td colspan="3">
<h6>Have Discount Coupon? Apply it here...</h6>
</td>
<td>
<div id="form">
<form class="coupon" method="post">
<input type="text" name="coupon" placeholder="Enter Coupon Code" autocomplete="off">
<input type="submit" name="coupon" value="Apply Coupon">
</form>
</div>
</td>
</tr>
<script type="text/Javascript">
$('#form').submit(function(event) {
event.preventDefault();
// ... XHR request to submit form
$(this).hide();
});
</script>
There is a Problem in the approach that You use.Each time you run click the submit button in the page your page gets reloaded **this will hide the form when you click and again render the whole page from the begining. because of that you want be able to get what you want.Instead try to send data using Ajax by having a button rather than using the default form submission approach

Cannot get the "save changes" button to be ungreyed once the jQuery datepicker is used

For some reason, my code seems to ignore the fact that when a date is selected using the jQuery date picker, it should re-enable my "save changes" button. If I change a value in any of the other input boxes it seems to work just fine. I can't seem to quite figure this out and wrap my head around the problem.
<!doctype html>
<html>
<head>
<title>jQuery UI Datepicker - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
$('.check input').keyup(function() { $('#save').attr('disabled', false); });
$( "#save" ).click(function() { $('#save').attr('disabled', true); });
});
</script>
</head>
<body>
<table class="check">
<tr>
<td><input type="text" id="txt1" value="text1"></td>
<td><input type="text" id="txt2" value="text2"></td>
<td><input type="text" id="txt3" value="text3"></td>
</tr>
<tr>
<td><input type="text" id="txt4" value="text4"></td>
<td><input type="text" id="txt5" value="text5"></td>
<td><input type="text" id="txt6" value="text6"></td>
</tr>
<tr>
<td><input type="text" id="txt7" value="text7"></td>
<td><input type="text" id="txt8" value="text8"></td>
<td><input type="text" id="datepicker" />Date Picker</td>
</tr>
</table>
<input id="save" type="button" value="save changes" disabled>
</body>
</html>
Use .onSelect and .prop().
the .prop() method provides a way to explicitly retrieve property values, while .attr() retrieves attributes.
$("#datepicker").datepicker({
onSelect: function () {
$('#save').prop('disabled', false);
}
});

radio button value pass undefined in parent page

i am using tow pagge one is parent page and other is child window page for pass the radio button value from child window page to parent page but i have getting error undefined in parent page text fields...
parent page
<form method="post" action="" name="f1">
<table border=0 width=550>
<tr>
<td>
Your Name
<input id="OPRID" name="OPRID" type="text" value="<?php echo (isset($_POST
['OPRID']) ? $_POST['OPRID'] : ""); ?>" />
<a href="javascript:void(0);" name="My Window Name" title=" My title here "
onClick="window.open
('popwindow.php','Ratting','width=650,height=550,0,status=0,scrollbars=1');" />
Click here to open the child window
</a>
</td>
</tr>
</table>
</form>
**child window page**
<html>
<head>
<script langauge="javascript">
function post_value(){
opener.document.f1.OPRID.value = document.frm.OPRID.value;
self.close();
}
</script>
<form name="frm" method="post" action=''>
<tr>
<td><div align="center">
<input type="radio" name="OPRID" id="radio" value="<?php echo $objResult ["OPRID"];?
>" /></div></td>
<td><div align="center"><?=$objResult["OPRID"];?></td>
<td><div align="center"><?=$objResult["OPRDEFNDESC"];?></td>
</tr>
<?
}
?>
</table>
<br />
<tr>
<td><div align="center"> <input type="button" value='Submit' onclick="post_value();"> </div>
</td>
</tr>
</form>
but in text fields i have getting undefined error.
What you are trying to achieve can be done with using HTML5 sessionStorage feature.
Check this link: http://playground.html5rocks.com/#sessionstorage
use this
window.opener.document.f1.OPRID.value = document.frm.OPRID.value;
instead of this
opener.document.f1.OPRID.value = document.frm.OPRID.value;
hope this helps...

Jquery cancel button input placeholder text

I asked this question earlier, but asked without the proper info, here it goes again. What i need to happen is for the cancel button "list_btn_cancel" to close the popup activity and to replace what was imputed with the inputs placeholder.
This table is the input.
<table width="100%" style="line-height:0px" >
<tr>
<td><p>1.</p></td>
<td><input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button >" /></td>
<td><input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="List >" /></td>
</tr>
</table>
**this table is the popup**
<div id="popup_activity" class="box_list">
<div id="list_question_btn"></div></div>
</div>
<div id="activity_area_content" style="padding-bottom:5px;" >
<form name="form1">
<table class="style2" width="100%">
<tr><br />
<td width="8%" align="right"><input name="thoughts_list" id="thoughts_list_0" class="thoughts_list" type="radio" value="It is just terrible that my child will not be a normal kid" /></td>
</table>
</form>
</div>
</div>
<div><table><td><a style="margin-left:290px" onclick="closeDialog('popup_activity');"><input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel >" placeholder="Type or click list button >" /></a></td> <td><a onclick="closeDialog('popup_activity');"><input style="margin-left:10px" type="button" id="close_thoughts" class="list_btn list_btn_close" value="Close >" /></a></td></table></div></div>
**Here is the script**
$('.list_btn').button();
$('#popup_activity').css("display","none");
$('#list_help').css("display","none");
$('.ext_thoughts').click(function(){
openDialog('popup_activity');
btn_id= $(this).attr('id');
});
$('.thoughts_list').click(function(){
( $(this).attr('id'));
$("#activities_" +btn_id).val($(this).val());
});
Okay don't quite understand what you want but here is what i think you want:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('.ext_thoughts').click(function(){
$("#popup_activity").toggle();
});
$('.list_btn_cancel').click(function(){
$("#popup_activity").hide();
$("#activities_thoughts_1").val('');
});
});
</script>
</head>
<body>
<input name="activities_thoughts_1" id="activities_thoughts_1" type="text" style="width:345px;" placeholder="Type or click list button " />
<br>
<input type="button" id="thoughts_1" class="list_btn ext_thoughts" value="Show/Hide List" />
<input type="button" id="thoughts_cancel" class="list_btn list_btn_cancel" value="Cancel" />
<br>
<div id="popup_activity" class="box_list" style="display:none;">
This is the pop up division
</div>
</body>
</html>
FIDDLE HERE
It's hard to figure out exactly what you're trying to do from your question but if all you want is for the text input to revert to its placeholder text simply set its value to blank.
$("#activities_thoughts_1").val('');
Here's an example http://jsfiddle.net/arG5f/

Generalizing jQuery dynamic add/remove form input for multiple forms

Currently I have a functioning code for dynamically adding and removing form inputs on my page. I have multiple forms that I need to include on the page, so I made an event action where they could press a button and it would hide all the forms except the relevant one. This worked fine, but it created a conflict with my jQuery/javascript code because the code uses a class name to dynamically add or remove input fields. Both forms would have to be under the same class name for me to use the jQuery function as is, but that creates conflict and the function stops working. I could just write two versions of the function (one for each class), but I'm trying to find a way to generalize this, so that I don't have to have so many functions. I was thinking about doing something like this:
$('.ccinput').addClass('dinput').removeClass('ccinput');
where I would change each form's class name accordingly, so that they would be the only ones communicating with the jQuery function. This method seems to be very error prone, especially with more than 2 forms (I plan on having 4 forms total). Do you guys know of another way that I can accomplish this? Here is my html code for reference:
EDIT: I've made significant changes to the code, so here is the new version. I removed all the ID values from the form inputs and changed the jQuery function so that it does not use ID values as selectors. This removed some conflicts. And I'm now trying to use attr('class','newclass') so that the jQuery function works for both codes. It seems to work perfectly for the first form, but it refuses to function for the second. I have no idea why.
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table1").hide();
$("#table2").hide();
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
$('#btnAdd').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.dinput:last').clone();
// insert the new element after the last "duplicatable" input field
$('.dinput:last').after(newElem);
$(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('#btnDel').attr('disabled','');
$(".date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
$('.dinput:last').remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('#btnDel').attr('disabled','disabled');
});
$(".date").mask("99/99/9999");
});
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">
<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
<td> 1 </td>
<td> <input type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input type="int" name="cc_amnt[]" /> </td>
<td> <input type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add CC" />
<input type="button" id="btnDel" value="Remove CC" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">
<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
<td> 1 </td>
<td> <input type="text" name="db_num[]" /> </td>
<td> <input type="int" name="db_amnt[]" /> </td>
<td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" id="btnAdd" value="Add DB" />
<input type="button" id="btnDel" value="Remove DB" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>
</html>
Okay, I solved it. There were multiple issues with my selectors that I had to fix, but after that the following solution works perfectly:
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
This basically changes the class attribute of each table according to which button is pressed. Theoretically, this should work for 4 forms, though I have not tried it yet. This is the updated code (I've changed a lot since the first code) for those that want to see what I did:
<html>
<head>
<title></title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#table1").hide();
$("#table2").hide();
$("#cc_button").click(function(){
$("#table1").show();
$("#table2").hide();
$("#cctable tr").attr('class', 'dinput');
$("#dbtable tr").attr('class', 'dbinput');
});
$("#db_button").click(function(){
$("#table2").show();
$("#table1").hide();
$("#dbtable tr").attr('class', 'dinput');
$("#cctable tr").attr('class', 'ccinput');
});
$('.btnAdd').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
var newNum = new Number(num + 1); // the numeric ID of the new input field being added
// create the new element via clone(), and manipulate it's ID using newNum value
var newElem = $('.dinput:last').clone();
// insert the new element after the last "duplicatable" input field
$('.dinput:last').after(newElem);
$(".dinput:last td:first").replaceWith( "<td>" + newNum + "</td>" );
// enable the "remove" button
$('.btnDel').attr('disabled','');
$(".date").mask("99/99/9999");
// business rule: you can only add 20 names
if (newNum == 20)
$('.btnAdd').attr('disabled','disabled');
});
$('.btnDel').click(function() {
var num = $('.dinput').length; // how many "duplicatable" input fields we currently have
$('.dinput:last').remove(); // remove the last element
// enable the "add" button
$('.btnAdd').attr('disabled','');
// if only one element remains, disable the "remove" button
if (num-1 == 1)
$('.btnDel').attr('disabled','disabled');
});
$(".date").mask("99/99/9999");
});
</script>
</head>
<body>
<div id="tablebuttons">
<button type="button" id="cc_button">CC</button> <button type="button" id="db_button">DB</button>
</div>
<div id="table1">
<form id="ccards" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th># (last four digits)</th>
<th>Amount</th>
<th>Approval</th>
<th>Date Received</th>
</tr>
<tbody id ="cctable" >
<tr class="ccinput">
<td> 1 </td>
<td> <input type="text" name="cc_num[]" maxlength="4" /> </td>
<td> <input type="int" name="cc_amnt[]" /> </td>
<td> <input type="text" name="cc_app[]" maxlength="10" /> </td>
<td> <input class="date" type="text" name="cc_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
<div id="table2">
<form id="db" method="post" action="<?php echo htmlentities($PHP_SELF); ?>">
<table border="1" cellspacing="0">
<tr>
<th></th>
<th>DB #</th>
<th>Amount</th>
<th>Date</th>
</tr>
<tbody id="dbtable">
<tr class="dbinput">
<td> 1 </td>
<td> <input type="text" name="db_num[]" /> </td>
<td> <input type="int" name="db_amnt[]" /> </td>
<td> <input class="date" type="text" name="db_date[]" /> </td>
</tr>
</tbody>
</table>
<div>
<input type="button" class="btnAdd" value="Add" />
<input type="button" class="btnDel" value="Remove" />
</div>
<input type="submit" value="Submit" name="submit" />
</form>
</div>
</body>
</html>
You can use something like this.
//when the Add Field button is clicked
$("#add").click(function (e) {
//Append a new row of code to the "#items" div
$("#items").append('<div><input type="text" name="input[]"><button class="delete">Delete</button></div>');
});
for detailed tutorial http://voidtricks.com/jquery-add-remove-input-fields/

Categories

Resources