Develop Reference

How do I pass a program name from php/html, as a variable to javascript rather than hard coding it in the ' $.get' statement

I have a dropdown that uses JQuery/Javascript within my php/html program.
This works fine if I hard code the name of the program that runs the SQL to load data into the dropdown list.
I would like this code to be re-usable rather than duplicate it for each dropdown list (I want 2 in the current instance) so I would like to know how to pass different program names as each dropdown list accesses different files. Example: ClubID dropdown requires data from clubs using clubsSearch.php but MemberTypeID requires data from memtyp using memtypSearch.php.
Here is the Javascript including my latest effort to pass the program name as a variable:
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.search-box input[type="text"]').on("click input", function()
{
/* Get input value on change */
var srchName = <?php echo $SearchName?>;
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get(srchName, {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
});
});
</script>
If I use
$.get("clubsSearch.php", {term: inputVal}).done(function(data){
it works fine.
The relevant section of the form is:
<div class="col-6 col-md-4">
<div class="form-group <?php echo (!empty($ClubIDer)) ? 'has-error' : ''; ?>">
<label>Club ID:</label>
<div class="search-box">
<input type="hidden" name="clubID" value="<?php $SearchName = "\"clubsSearch.php\"";?
>" >
<input type="text" name="ClubID" autocomplete="off" class="form-control"
value="<?php echo $ClubID; ?>" >
<?php echo $SearchName?>
<div class="result">
</div>
<span class="help-block"><?php echo $ClubIDer;?></span>
</div>
</div>
</div>
The **$SearchName** displays as "clubsSearch.php" but in Chrome's developer tools I can see the javascript has not recognised the variable var srchName = ; x and no dropdown list appears.
Can anyone tell me how to present the search name to the javascript as I am completely unfamiliar with it. Any assistance would be appreciated.

Pass the program name in the data- attr like
<select name="WHATEVER" id="WHATEVER" data-program="YOUR_PROGRAM_NAME">
in JS get it like
var srchName = $(this).attr("data-program");

Resolved: In the html
<input id="ClubID" data-pgm="\"clubsSearch.php\"">
and in the Javascript
var srchName =input.dataset.pgm

HIdden input value, non unique ID in form loop

I'm trying to prep forms with multiple (dynamic) inputs to insert correctly via ajax.
Currently, using my php loop, I have 4 div/forms. Each form has a starting input, and upon clicking the moreItems_add button, it dynamically adds another input, up to 10 per form/div.
This works fine. But I added a variable and console.log to log the value of my hidden input though, which should be getting an ID (<?php echo $ticker['ticker'] ?>) for each form, but it's currently only logging '1'. So when I clicked the button in the first form it looked right, but when I click the others, it's still 1. I think this is because I don't have a unique ID on the hidden input?
How can I change the way I'm keeping track of the hidden input so that I can make an ajax call that will only make an insert on the inputs of the given form WITH the correct ticker ID?
<?php foreach($tickerDisplays as $key => $ticker):?>
<form id="Items" method="post">
<label id="ItemLabel">Item 1: </label>
<input type="text" name="Items[]"><br/>
<button type="button" class="moreItems_add">+</button>
<input type="hidden" name="tickerID" id="tickerID" value="<?php echo $ticker['ticker'] ?>">
<input type="submit" name="saveTickerItems" value="Save Ticker Items">
</form>
<?php endforeach;?>
<script type="text/javascript">
$("button.moreItems_add").on("click", function(e) {
var tickerID = $('#tickerID').val();
var numItems = $("input[type='text']", $(this).closest("form")).length;
if (numItems < 10) {
var html = '<label class="ItemLabel">Item ' + (numItems + 1) + ': </label>';
html += '<input type="text" name="Items[]"/><br/>';
$(this).before(html);
console.log(tickerID);
}
});
</script>

To generate a unique id attribute you should append your ticker value from php to... the id attribute. Or if not the ticker value, at least something that makes it unique. But you don't really need to.
Since all your elements are wrapped in a form tag and are at the same level, you can find to which ticker corresponds the clicked button by finding the hidden input among its siblings:
var tickerID = $(this).siblings('input[name="tickerID"]').val();

Use JQuery to copy value from table to modal

I have a table with a list of all my data. The data is printed in a for loop so there are many rows in the table. how can i get the userid in the row with the button clicked?
<table>
<td>
<input type="hidden" value="<c:out value="${user.id}" />" name="userId" />
</td>
<td>
<button class="btn btn-default fileUpload" data-toggle="modal" id="btnUpload" data-target="#file-modal" value="<c:out value="${user.id}" />">Upload</button></td>
</table>
and i have a modal container. When the upload button in the table is clicked, the modal will open up for a file upload.
<form action="${pageContext.request.contextPath}/UserServlet" enctype="multipart/form-data" method="post">
<input type="hidden" value="5519" name="OPS" />
<input type="hidden" name="uploadUserId" />
<div class="form-group">
File : <input type="file" class="file" name="uploadFile"><br />
<button type="submit" class="btn btn-default">Upload</button>
<br /><br />
</div>
</form>
What i am trying to do is on the click of btnUpload the value in the hidden input type userId will be copied over to the hidden value type uploadUserId
I have tried doing the following but neither works
1
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).closest("tr").find("#userId").text();
$("#uploadUserId").val($userId);
});
});
2
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).closest("tr").children()[2].text();
$("#uploadUserId").val($userId);
});
});

This will do the trick without changing the html
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $(this).parent().prev("td").children("input:hidden").val();
$("#uploadUserId").val($userId);
});
});
Another solution by adding ID to the input element as shown below,
<input id="userVal" type="hidden" value="<c:out value="${user.id}" />"name="userId" />
then you can get the value from the following jquery
$("#userVal").val();

This should work. Just select and grab the user Id txt and then pass it to the uploadUserId value.
$(document).ready(function () {
$("#btnUpload").click(function(){
var $userId = $('#userId').text();
//$("#uploadUserId").val($userId);
$('input[name="uploadUserId"]').val($userId);
});
});
UPDATE
OK. I reviewed this again using your HTML structure and got this all worked out. The code below works.
$('[type="submit"]').on('click', function(e){
e.preventDefault(); // prevents the button default action. You can remove this if you want the form to submit after click.
var $userId = $(this).prev().prev().val(), // this gets the input value. based on your html it is the previous previous element.
fix1 = $userId.replace(/(?:\..+)$/, '').split('\\'), // this is a regex that replces the file extention then splits the string on the back slash turning it into an array.
fix2 = fix1.length -1; // gets the length of the array and subtracts 1 to get the last array index of the array. This i to get the file name.
$('[name="uploadUserId"').val(fix1[fix2]); // this assigns the uploadUserId value to the name of the file using the array and the index.
});

Trouble with getting right value from html input using jquery

I have this at the end of my PHP file:
<script type="text/javascript>"
$("#id").on("click", "#otherId", function(e)
{
var html = "<input class='id' type='text' size='5' />";
var row = $(this).closest("#addoid").html(html);
row.find("input").focus();
row.find('input').change( function(e)
{
var value = $(this).val();
var fid = $("input#idName").val();
$.ajax({
type: "POST",
url: "page.php",
data: { entryId: fid, val: value }
})
.done(function( msg ) {
alter("data: " + msg);
});
});
</script>
</body>
The html is something like this:
<div id="id">
<div id="otherId">
<input id="idName" type="hidden" value="1234" />
<button type="button" id="otherId">Add</button>
</div>
<div id="otherId">
<input id="idName" type="hidden" value="1235" />
<button type="button" id="otherId">Add</button>
</div>
<div id="otherId">
<input id="idName" type="hidden" value="1236" />
<button type="button" id="otherId">Add</button>
</div>
</div>
I left the earlier jquery code out, but basically, when the Add button is pressed, it is changed to an input field, if the user puts an id into the input field, it will display a link (on blur) or go back to the add button if nothing is entered.
So far it is working, however
var fid = $("input#idName").val();
is taking the next id (instead of 1234, it is posting 1235).
I am new to jquery. I have searched around and tried several different things but I am getting nowhere.
Thanks.
ADDITION
To make this more clear, I have a table that is being populated with a foreach loop (using php) it is pulling records from a database.
looks something like this:
<div id="list">
<table>
<?php foreach ($data as $value):?>
<tr>
<td>
<div class="row">
<button class="add">Add</button>
<input class="hiddenId" type="hidden" name="hiddenName" value="<?php echo $value['id']?>" />
</div>
</td>
</tr>
<?php endforeach?>
</table>
</div>
Like I explained earlier, when the "Add" button is clicked, it turns into an input field.
On change (of the input field), I need the ajax to send a request containing the values of the two input fields.
The problem I am having is I am not able to get the correct value of the hidden input. jquery is grabbing a value from another row, not the correct row.
I can't seem to figure this out and have honestly tried many different ways, including some that would probably be considered unconventional.
Thanks for any help.

Please first rename input ids, since ID has to be unique.

How can a radio button trigger a counter and print output to the viewer's box?

How can I pass a javascript variable into the text value box below four radio buttons when one of them is selected.
//something like
var new ="somethign";
<a href="javascript:insertText(' var new ' ,'user_location');"
onClick="void(0)">Insert 'Hello'</a>
...so that when they click it, the counter and or a message is displayed in an empty form box...?
I want to output the contents of the variable. into a form-field entry type of box.

Using jQuery you could do something like this:
from your question i'm not getting much of idea.but if you want to put some text to div on click of radio button then may be try in this way:
<script>
$(document).ready(function(){
$('input[type=radio]').click(function() {
$('#viewer').html($(this).val());
});
});
</script>
<input type='radio' name ="r"value="something1">1
<input type='radio'name ="r" value="something2">2
<input type='radio' name ="r"value="something3">3
<input type='radio'name ="r" value="something4">4
<div id="viewer" ></>