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();

Submit arrays from form fields to database [closed]

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 6 years ago.
Improve this question
There is a sewing management app am working on and on the order page, someone can have multiple orders, but all orders are to be invoiced using one reference code. First page, I collected basic details such as pricing, but on next page, each individual order has to be entered in more detail, a sample picture of the material, instructions and style code if any.
So I've been able to successfully create the page where the data entry person can add multiple details and even select whether there's a style or not, but am stuck in the database submission.
Remember, every other pages am working with, like staff management and others are working just fine, so this error of not submitting to the database is not relative to an external page included or any other thing except probably how the arrays are handled. Below is a breakdown of the code;
JavaScript:
<script>
function showfield(name,event){
if(name=='iHaveStyle') {
$(event).next('#div1').html('<label>Enter Style Code</label><br /> <input type="text" name="style[]" />');
} else{
$(event).next('#div1').html('');
}
}
$(document).ready(function() {
var max_fields = 10; //maximum input boxes allowed
var wrapper = $(".form-group"); //Fields wrapper
var add_button = $(".add_field_button"); //Add button ID
var x = 1; //initlal text box count
$(add_button).click(function(e){ //on add input button click
e.preventDefault();
if(x < max_fields){ //max input box allowed
x++; //text box increment
$(wrapper).append('<div style="margin-top:20px; border-top:1px solid #333333;"><label>Upload Sample Material</label><br /><input type="file" name="sample_material[]" style="width:200px; height: 40px;" /><br/><br/><label>Customer&#39s Requirement</label><br /><textarea name="cust_requirement[]" style="width:200px; height: 150px;" /></textarea><br/><br/><label>Do you have a style</label><br /><select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value,this)"><option value="">I don&#39t have a style code</option><option value="iHaveStyle">I have a style code</option></select><div id="div1"></div><br />Remove</div>'); //add input box
}
});
$(wrapper).on("click",".remove_field", function(e){ //user click on remove text
e.preventDefault(); $(this).parent('div').remove(); x--;
})
});
</script>
HTML:
<form action="orderadd1.php?id=<?php echo "".$order_id; ?>" method="post" enctype="multipart/form-data">
<div class="form-group">
<button class="add_field_button">Add another sub-order</button>
<div style="margin-top:20px;">
<label>Upload Sample Material</label><br />
<input type="file" name="sample_material[]" style="width:200px; height: 40px;" /><br/><br/>
<label>Customer's Requirement</label><br />
<textarea name="cust_requirement[]" style="width:200px; height: 150px;" /> </textarea><br/><br/>
<label>Do you have a style</label><br />
<select name="sketch_code" id="sketch_code" onchange="showfield(this.options[this.selectedIndex].value,this)">
<option value="">I don't have a style code</option>
<option value="iHaveStyle">I have a style code</option>
</select>
<div id="div1"></div>
</div>
</div>
<input type="submit" class="btn btn-lg btn-color btn-block" value="Continue Order" name="submit_val">
</form>
PHP Code:
<?php
$order_id = $_REQUEST['id'];
if (isset($_POST['submit_val'])) {
if(is_array($_POST['cust_requirement']))
{
for($i=0; $i < count($_POST['cust_requirement']); $i++ ) {
$cust_requirement = mysql_real_escape_string($_POST['cust_requirement'][$i]);
$style = mysql_real_escape_string($_POST['style'][$i]);
$folder = "sample_material/";
$extention = strrchr($_FILES['sample_material']['name'], ".");
$new_name = $order_id."-".$i++;
$sample_material = $new_name.'.jpg';
$uploaddir = $folder . $sample_material;
move_uploaded_file($_FILES['submit_material']['tmp_name'], $uploaddir);
$data_submit = $pdo->query("INSERT INTO `order_desc` (order_id, sample_photo_url, cust_requirements, style_code) VALUES ('".$order_id."', '".$uploaddir."', '".$cust_req."', '".$style."')");
}}
}
?>
The error it is showing is:
Warning: strip_tags() expects parameter 1 to be string, array given in C:\xampp\htdocs\tms\header.php on line 2
I checked the header.php and this is exactly what I have there:
<?php
$_POST = array_map('strip_tags', $_POST);
?>
I used this header on all my pages and they are fine.

array_map function applies strip_tags() to every element of an array - but the most possible reason of this is that your $POST looks like this ['test1',['test2','test3]], $POST[1] == ['test2','test3] is an array and strip tags cannot be applied. You can do it using loop and checking if item is not an array to be stripped, or use recursion to go all over you $POST array

Your POST superglobal contains arrays that is why you get a warning with array_map. Try replacing it with array_walk_recursive http://php.net/manual/en/function.array-walk-recursive.php

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 I add Masked Input Plugin on yet to be added contents? [duplicate]

So I have a joomla! page that is partly generated by functions based on the user. So parts of the forms that I need to use the 'masked input plug-in' on are loaded via functions on page load. The issue I have is, on the fields that are standard HTML on the page, the plugin works fine but on the fields that are generated by my php functions, the fields lock up and don't allow any input. My guess is that it's an issue with the php functions pulling in the forms after the jquery plugin has fired but I tried placing the .mask call in a $(document).ready and no luck.
here's a snippet...
jQuery(function($){
$("#subNumber").mask("(999) 999-9999");
$(".numFix").mask("(999) 999-9999");
});
THIS WORKS -->
<form name = "subAct" id = "subAct" method="post">
<div class="col1"><input class="subaccountname" name="subName" type="text" id="subName"/></div>
<div class="col2"><input class="subaccountnumber" name="subNumber" type="text" id = "subNumber"/></div>
<div class="col3">Add a New Account</div>
</form>
THIS ONE DOESN'T -->
this function -->
<?php dashboardFunction::displaySubAccount($uid) ?>
loads in this form -->
<form name = "add_reg_num_<?php echo $pin ?>" id = "add_reg_num_<?php echo $pin ?>" method="post">
<div class="regisnumberadd"><input name="regNum" type="text" class = "numFix" />
<input name="regNumPin" type="hidden" value = "<?php echo $pin ?>"/>
</div>
<div class="clear"></div>
<div class="addregisnum">Add Number</div>
</form>

All you need to do is attach an event binding using jQuery .on method and any dynamically created item will be wired to that event.
I answered a similar question here https://stackoverflow.com/a/10203361/12442

I think since the content loads dynamicly you need to use .live
I don't know how to use .live with .mask.
There is also an alternative. You can put .mask code in callback function of dynamic loading.
$("#dynamicContent").load("loadFromMe.php",function(){
$("#subNumber").mask("(999) 999-9999");
$(".numFix").mask("(999) 999-9999");
});

Dynamic Jquery Input mask Solution (swicth masking programatically)
$(document).ready(function () {
$("[data-mask]").inputmask();
// Do something exciting
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
// re-bind your jQuery events here
$("[data-mask]").inputmask();
});
});
if (is_loose == "True") {
$("#it_qty").removeAttr("data-inputmask","'mask': '9{0,20}'");
$("#it_qty").attr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
$("[data-mask]").inputmask();
} else {
$("#it_qty").removeAttr("data-inputmask", "'mask': '9{0,20}.9{0,2}'");
$("#it_qty").attr("data-inputmask", "'mask': '9{0,20}'");
$("[data-mask]").inputmask();
}