This has probably been answered before, and I'd like to apologize for reposting, but since I'm not sure where to start fixing it, I'm not sure what to try and look up for a solution. So bear with me please.
I've got a form for a CMS where I've used a tutorial to dynamically add fields where I need them. EX: The form loads with 0 field entries for bullet points, but if they want some, they can click a button that says add bullet, and voila, a entry field appears. It's in an array. Submits to the DB just fine. The delete button is disabled if there's no fields displayed. All that works fine. If you start out with no fields, on a fresh form. The problem falls into the edit version of this form.
Here's my code:
<div id="bullets">
<?php
$sql_bullet_display = 'SELECT * FROM exampleDB.prod_feature_bullets WHERE product_name ="'.$row_product_details['product_name'].'";';
$res_bullet_display = mysql_query($sql_bullet_display) or die(mysql_error().'<br />bad query<br />'. $sql_bullet_display);
$newNum = 1;
while($row_bullet_display = mysql_fetch_assoc($res_bullet_display)){
?>
<div id="bullet<?php echo $newNum; ?>" class="clonedInput2">
<input type="hidden" id="bullet_order<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_order]" value="<?php echo $newNum; ?>" />
<input type="text" id="bullet_text<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_text]" value='<?php echo $row_bullet_display['bullet_text']; ?>' />
<input type="text" id="bullet_subtext<?php echo $newNum; ?>" name="bullet[<?php echo $newNum; ?>][bullet_subtext]" value='<?php echo $row_bullet_display['sub_text']; ?>' />
</div>
<?php
$newNum++;
}
?>
</div>
<div>
<input type="button" id="btnAdd" value="Add Bullet" />
<input type="button" id="btnDel" value="Remove Bullet" />
</div>
and this is the Javascript that goes with it.
<script type="text/javascript">
$(document).ready(function() {
$('#btnAdd').click(function() {
var num = $('.clonedInput2').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
$('<div id="bullet' + newNum + '" class="clonedInput2"><input type="hidden" id="bullet_order' + newNum + '" name="bullet[' + newNum + '][bullet_order]" value="' + newNum + '" /><input type="text" id="bullet_text' + newNum + '" name="bullet[' + newNum + '][bullet_text]" /><input type="text" id="bullet_subtext' + newNum + '" name="bullet[' + newNum + '][bullet_subtext]" /></div>').appendTo('#bullets');
// enable the "remove" button
$('#btnDel').attr('disabled','');
// business rule: you can only add 15 bullets
if (newNum == 15)
$('#btnAdd').attr('disabled','disabled');
});
$('#btnDel').click(function() {
var num = $('.clonedInput2').length; // how many "duplicatable" input fields we currently have
$('#bullet' + num).remove(); // remove the last element
// enable the "add" button
$('#btnAdd').attr('disabled','');
// if no element remains, disable the "remove" button
if (num == 0)
$('#btnDel').attr('disabled','disabled');
});
$('#btnDel').attr('disabled','disabled');
});
This has worked really well for me in the past, but like I said, it only works on a fresh form that's starting out at 0 bullet entry fields. My problem lies in creating the edit form. I've already got two bullets in the DB that are displayed when you hit edit. The add button shows enabled. The delete button is always disabled when the form first comes up. Even if there's two entries displayed and everything is filled correctly.
However if I click the add button, so a third entry field will show up, it will enable the delete button. Very frustrating. I'm not sure what to go about editing so it'll say: okay, on the page load, we recognize that the DB already filled out two bullets, so the delete button should be active from the start. Every change I've tried so far just breaks the button.
Thanks in advance for the help!
In your javascript code, you have initiliazed the deletebutton to be disabled. you need to check the number of bullets you have created from db...
Modify your last code from:
$('#btnDel').attr('disabled','disabled');
to
if($('.clonedInput2').length<=0){
$('#btnDel').attr('disabled','disabled');
}
Try this to remove the disabled attribute
$("#btnDel").removeAttr("disabled");
Related
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();
I'm trying to use the javascript character counter below in multiple textareas within my table. The problem is the counter only functions in the first row of my table. Subsequent rows with textareas echo "250 characters remaining", but do not function as intended. I'm not sure how to assign each character counter with a unique id so it functions in all textareas. Any help would be appreciated.
PHP:
echo "</td><td>";
echo '<form action="peerflagreview.php?foorbar=' . $foobar . '" method="post" id="FlagPeerReview">
<A NAME="#peer' . $foobar . '"> (Report)
<textarea class="PeerFlag" value="" name="PeerFlag" id="PeerFlag2"></textarea>
<input type="hidden" value="Post" name="submit" />
<span id="PeerFlag2Span">250 characters remaining</span>
<input type="submit" value="Submit"></form>';
echo "</td></tr>";
JAVASCRIPT:
<script type="text/javascript">
$("#PeerFlag2").on('change keydown paste input', function(){
updateCounter('#PeerFlag2');
});
function updateCounter(theTextAreaID) {
var remaining = 250 - jQuery(theTextAreaID).val().length;
jQuery(theTextAreaID + 'Span').text(remaining + ' characters remaining.');
}
$('textarea').on('keydown', function(event) {
if (event.keyCode == 13)
if (!event.shiftKey) $('#PeerFlag').submit();
});
</script>
This is a very simple demo so I don't see of much explain needed other than this will target the next span of the textarea in use.
I see you already have jQuery so this demo will also use jQuery.
$(document).ready(function(){
$(".UserInput").on('input', function(){
$(this).next("span").html(250 - this.value.length + " characters remaining");
}).trigger('input');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea class="UserInput"></textarea><span>this is filled automatically</span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
<textarea class="UserInput"></textarea><span></span><br/>
If you have any questions please leave a comment below and I will get back to you as soon as possible.
I hope this help. Happy coding!
On my site I have a main search (powered by Google, placed throughout the site) and I have now created a second search (on its own page, which searches my DB for images based on user input text) which is a totally separate search to the google one.
What I want to do -
I want both Search forms to share a single text input field, but allow the user to choose which search to use (Google or Images Only) via radiobutton.
So we'd have:
[search input field][go] (o)Use Google (o)Image Search only
I'm no coder but can hack enough to just about get by, it just takes me a day or two to figure out and get working.
What I need and would save me a great deal of time, as I'm stumped on how to proceed with this or if it is even possible! If someone could tell me A) If it's possible, and B) A few pointers if it is. For instance I'm guessing it will probably need a bit of JavaScript to make it possible?
Any pointers would be appreciated, then I can see what I can do.
All the best,
Chris
// My Stand-alone Image Search Page ////////////////////////////////
<form method="post" action="imagesearch?go" id="search-form">
<input type="text" name="name">
<input type="submit" name="submit" value="Search">
</form>
// code for above form //
if(isset($_POST['submit'])){
if(isset($_GET['go'])){
if(preg_match("/^[ a-zA-Z]+/", $_POST['name'])){
$name=$_POST['name'];
$sql="SELECT ID FROM ImageTable WHERE Name LIKE '%" . $name . "%' Order by Date Desc LIMIT 50";
//-run the query against the mysql query function
$result=mysql_query($sql);
// Create while loop and loop through result set//
$content .= ' <p><div id="wrapper">';
while($row=mysql_fetch_array($result)){
$id=$row['ID'];
$img = new Image($id);
// Format results//
$content .= '<div id="imgrt"><img src="/img/M/'.$img->ID.'.jpg" class="searchimg"><br>'.$img->Name.'';
$content .= '</div>';
}
$content .= '';$content .= '</div>';
}
else{
$content .= ' <p>Please enter a search query</p>';
}
}
}
// End of Stand-alone image search page /////////////////////////
---------------------------------------------------------------------------
// My sites main Google powered Search
<form action="http://www.example.com/gsresults" id="cse-search-box" class="searchmain">
<input type="hidden" name="cx" value="partner-pub-XXXXXXXXXXXXXXX" />
<input type="hidden" name="cof" value="FORID:XX" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" name="q" class="mainsearch">
<input type="submit" name="sa" value="Go" class="mainsearchbutton"/>
</form>
<script type="text/javascript" src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang="></script>
OK so here we go. If you plonk this in an empty html file you can see it in action (Tried to make a jsfiddle but didnt work for some reason). What this does is set an "active" id on the selected combo option, and when you click the submit button it grabs the value of the combo option with that id, and goes to the page of that value. so if you click google and then the button you go to google.html, and same goes for image, image.html. If you want some more specifics you can ask, but thats the main logic there.
<script>
function replaceActive(obj) {
var activeElm = document.getElementById("active");
activeElm.id = activeElm.id.replace("active", "");
obj.id = "active";
}
function formFunction(obj) {
obj.action = document.getElementById("active").value + ".html";
}
</script>
<form action="#" onsubmit="return formFunction(this);" method="post">
<input type="text" />
<select>
<option value="google" id="active" onclick="replaceActive(this);">Google</option>
<option value="image" onclick="replaceActive(this);">Images</option>
</select>
<input type="submit" />
</form>
Basically you can change that "formFunction()" function's code and and use "document.getElementById("active").value" to do what ever you wanted to do.
I'm currently studying html and php and I made this little project about a "notification system". I guess I first have to explain this before I go in detail on my real problem.
My table looks like this:
My first php command would get the values of each feature column and store them into $a, $b, $c, $d and $e.
My second php command would echo 5 textboxes and mark them as checked based on the value of $a,$b,$c,$d and $e so the output based on my table would show five checkboxes with the 1st, 2nd and 4th checkbox with a check.
My third php command would gather the values from the checkboxes because the user might want to change his preferred notifications. After clicking submit the code would update the new values of the textboxes.
Below is the code on my current progress:
<?php
mysql_connect('localhost','root','') or die(mysql_error());
mysql_select_db('main_database') or die(mysql_error());
$fetchchoice=mysql_query("SELECT * FROM notification_table WHERE username='carl'");
while($getchoice=mysql_fetch_assoc($fetchchoice)){
$a=$getchoice['feature1'];;
$b=$getchoice['feature2'];
$c=$getchoice['feature3'];
$d=$getchoice['feature4'];
$e=$getchoice['feature5'];
}
?>
<html>
<head>
</head>
<body>
<form method="POST">
<?php
echo
'
<input type="hidden" name="choice1" value="">
<input type="checkbox" name="choice1" value="checked" '.$a.' > Feature 1 <br>
<input type="hidden" name="choice2" value="">
<input type="checkbox" name="choice2" value="checked" '.$b.' > Feature 2 <br>
<input type="hidden" name="choice3" value="">
<input type="checkbox" name="choice3" value="checked" '.$c.' > Feature 3 <br>
<input type="hidden" name="choice4" value="">
<input type="checkbox" name="choice4" value="checked" '.$d.' > Feature 4 <br>
<input type="hidden" name="choice5" value="">
<input type="checkbox" name="choice5" value="checked" '.$e.' > Feature 5 <br>
';
?>
<input type="submit" name="submit" value="Submit">
</form>
<?php
if(isset($_POST['submit']))
{
$f1choice = $_POST['choice1'];
$f2choice = $_POST['choice2'];
$f3choice = $_POST['choice3'];
$f4choice = $_POST['choice4'];
$f5choice = $_POST['choice5'];
echo "1.";
echo $f1choice;
echo "<br />";
echo "2.";
echo $f2choice;
echo "<br />";
echo "3.";
echo $f3choice;
echo "<br />";
echo "4.";
echo $f4choice;
echo "<br />";
echo "5.";
echo $f5choice;
$kweri = "UPDATE `main_database`.`notification_table` SET `feature1` = '".$f1choice."', `feature2` = '".$f2choice."', `feature3` = '".$f3choice."', `feature4` = '".$f4choice."', `feature5` = '".$f5choice."' WHERE `notification_table`.`username` = 'carl'";
mysql_query($kweri);
}
?>
</body>
</html>
PROBLEM
My problem now is that I have to refresh the page to have the updated checkbox to appear since this was only done on php, I have no experience in javascript at all but I think it's the best way to show my current textbox on realtime, however, I have no idea where to start or if there is another way I could go about showing my checkbox on realtime.
EXTRA PROBLEM (This has something to do with my system but not regarding this code. If you guys could take a look at this problem it would mean a lot.)
As you guys have seen, the table above was just to keep track of what a user's preference regarding notifications would be. But the system doesn't stop there, I need to figure out how to pass notifications after a feature has been used. What my idea was is that I should add an extra sql command after every feature to put what has happened on a different table. Example would be registration, after the insert command for the registration details to be saved, I would also insert that, user "example" has "registered" on "date" in a separate table, namely "notif_table". My columns would be, username, action and date so my notifications page can show that "User" has "Registered" on "January 18, 2015".
But then again, that was just my theory on notifications and I'm very open to suggestions and corrections.
Just put the part with if(isset($_POST['submit'])) prior to your select statement.
EXTRA PROBLEM:
Just add a column to your existing table (e.g. 'created') and put now() into it when inserting the row.
So I am relatively new to JavaScript but I have experience with programming. I have this code which allows the user to define how many addresses they would like to enter so then I can query google maps and find the geographic center. The problem with this is that it looks very unprofessional in the sense that they have to enter the number of fields on one page and then they are prompted with that many boxes on the next page. Is there any way to make only one form(with all the parameters I require for one entry) and then after they click submit, I append it to an array and then when they decide they have enough addresses they hit the final submit so then I can process the data using a PHP call? Any help would be great, but I am new to this so I might need more spelt out explanations, sorry. Thanks again!
TL;DR: I want to create a single entry field which when submit is clicked, the page does not refresh or redirect to a new page and appends the data entry to an array. From there the user can enter a new input and this input would also be appended to the array until the user has decided no more inputs are necessary at which point they would click the final submit allowing me to process the data.
Here is the code I have so far:
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var c = 0;
$("#button1").click(function(){
c = $("#inputs").val();
$("#mydiv").html("");
for(i=0;i<c;i++){
$("#mydiv").append('<input type="text" id="data'+i+'" name="data'+i+'" /><br/>');
}
});
$("#button2").click(function(){
$.post("getdata.php",$("#form1").serialize(),function(data){
});
});
});
</script>
</head>
<body>
<form id="form1">
Type the number of inputs:
<input type="text" id="inputs" name="inputs" />
<input type="button" id="button1" value="Create" />
<div id="mydiv"></div>
<input type="button" id ="button2" value="Send" />
</form>
</body>
</html>
getdata.php
<?php
for( $i=0; $i<$_POST["inputs"] ; $i++){
echo $_POST["data".$i]."\n";
}
?>
Here is code:
EDIT: I rewrite the code, so you can also delete each address
$(document).ready(function(){
$("#add-address").click(function(e){
e.preventDefault();
var numberOfAddresses = $("#form1").find("input[name^='data[address]']").length;
var label = '<label for="data[address][' + numberOfAddresses + ']">Address ' + (numberOfAddresses + 1) + '</label> ';
var input = '<input type="text" name="data[address][' + numberOfAddresses + ']" id="data[address][' + numberOfAddresses + ']" />';
var removeButton = '<button class="remove-address">Remove</button>';
var html = "<div class='address'>" + label + input + removeButton + "</div>";
$("#form1").find("#add-address").before(html);
});
});
$(document).on("click", ".remove-address",function(e){
e.preventDefault();
$(this).parents(".address").remove();
//update labels
$("#form1").find("label[for^='data[address]']").each(function(){
$(this).html("Address " + ($(this).parents('.address').index() + 1));
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form1" method="post">
<div class="address">
<label for="data[address][0]">Address 1</label>
<input type="text" name="data[address][0]" id="data[address][0]" />
</div>
<button id="add-address">Add address</button>
<br />
<input type="submit" value="Submit" />
</form>
After form submit you can loop through addresses like this:
foreach ($_POST['data']['address'] as $address){
...your code
}
Hope this help! :)
Normally how I do this kind of stuff is to provide a user ability to add many input fields at client level and send them all in one array when submitting the form. That is more professional I believe. Try this JSFiddle to see what I mean.
<input type="text" name="address[]" />
if you want to POST dynamic value in a form you can do it like this:
<input type="text" name="adress[]" />
so in your case you could add new fields with javascript or jquery with the same name name="adress[]".
and in your PHP you get an array:
$adresses= $_POST['adress'];
foreach ($adresses as $adress) {
echo $adress;
}
FIDDLE DEMO
To process an array of inputs you can use the following convention:
HTML: simply add square brackets to the name attribute
<input type="text" id="data'+i+'" name="data[]" />
PHP: Post returns an array
for( $i=0; $i<$_POST["data"] ; $i++){
echo $_POST["data"][$i]."\n";
}
JAVASCRIPT: $("#form1").serialize() will retrieve all the inputs data as name=value pairs even the inputs that are added dynamically. There's no need to keep an array you can just process all of them at the end.
You don't need to create an array, $_POST is actually doing it all for you already.
So I suggest you do the following: using javascript (or jQuery), keep the button clicks, but make sure the form submission is prevented (using preventDefault on the form) [EDIT: You actually won't need this, as if the buttons are just buttons, no submit inputs, the form will not submit anyway], and just make sure you append another element every time they click a plus button or something; make sure you increment the name attributes of each input element that gets created.
When the user then creates submit, use submit the form via js, then on your getdata.php you can simply loop through all the values and use them that way you want. You will even be able to know the exact number by calculating the number of times a new input element has been added to the form.
I'll try to write up something for you in a minute, but if I was clear enough, you should be able to do that too.
EDITED: So here is what I've come up with; give it a try and see if this is something for you.
This is how the form would look like:
<form id="form1" name="myform" method="post" action="getdata.php">
Enter address 1: <input type="text" name="address-1" /> <input type="button" value="More" onclick="createNew()" />
<div id="mydiv"></div>
<input type="submit" value="Send" />
</form>
And this would be the js code:
var i = 2;
function createNew() {
$("#mydiv").append('Enter address ' + i +': <input type="text" name="address-' + i +'" /> <input type="button" value="More" onclick="createNew()" /><br />');
i++;
}
...and then getdata.php:
foreach ($_POST as $key => $value) {
echo 'The value for '.$key.' is: '.$value.'<br />';
}
here is a fiddle demo