I have a html page with a form and input fields. When a user enters text into the input field, at each key a database is searched for corresponding values. This is done through a Javascript call which then does an XMLHttpRequest to a PHP script. In the PHP I return a top 10 list of matches. This list is then shown on the html page.
What I now would like is to make each item in the list clickable and when clicked it should fill the form field with the value. I can make the results linkable by adding <a href> around them, but the onClick doesn't seem to work for it.
Html/PHP page with form:
<form action="index.php?page=n0402" method="post" Name="AddPolish" >
<div id="frmBrandInput">
<label for="frmBrand">Brand name:</label>
<input type="text" name="frmBrand" size="50" onkeyup="n0401CheckRecords(1);" onchange="n0401AddResults_Clear();" maxlength="100" id="frmBrand" />
</div>
<div id="ListResults">
<ul style="list-style-type:none;">
<div class="n0401AddResults" id="n0401AddResults_Status">
</div>
</ul>
</div>
<button type="submit" name="submit" value="submit-value">ADD</button>
</form>
The javascript calls the PHP and changes the n0401AddResults_Status:
function n0401CheckRecords( jsCheck){
---- xmlhttp request code and return snipped out ---
document.getElementById("n0401AddResults_Status").innerHTML = return_data;
}
The PHP page that checks the database:
While ($dbCheck_result = mysqli_fetch_row($result))
{
echo "<li class='CheckListItem' onClick='ClickMe();'><a href='".$dbCheck_result[1]."'>".$dbCheck_result[1] ."</a></li>";
}
What is the best way to structure that return string to make it clickable? Btw, I'm now using a list for it, but that is not a requirement to me.
Btw I'm NOT using JQuery.
I should have used the # for <a href>. Solution was to use this line:
echo "<li class='CheckListItem' onClick='ClickMe(\"".$dbCheck_result[1]."\");'><a href='#'>".$dbCheck_result[1] ."</a></li>";
Related
The code is supposed to be a youtube-like website where users can select a bunch of hashtags (via checkboxes) within a form and then click "search" and it's supposed to make a URL dynamically so that "window.location=dynamicURL" will be something like window.location="http://www.example.com/search.php?input1+input3+input4".
I've tried
var data = $('form').serialize();
to get started however when I type "data" in console, it says the variable isn't in use.
What I'm looking at doing is using some js to re-serialize the form each time a user clicks on a hashtag checkbox, so that each time a hashtag is clicked, a new array is made (clearing the old array) to be put to use in creating the URL.
I've tried several types of form serialize code and it doesn't seem to fill a variable that the console can see.
examples:
function ser()
{
$data = 'asd';
var data = 'add';
var serial = $("#divid").html($('#formid').serialize());
}
and
$('#button1').click(function () {
$("#divid").html($("#formid").find("select,textarea, input").serialize());});
both do naught. The var serial is not defined and button1.click doesn't input any html into #divid.
Here is my html:
<div id="divid">
<form action="" name="formid" id="formid" onsubmit="return false">
<button id="button1" onclick="$('.VideoTagsArraysUniqueId').prop('checked', !($('.VideoTagsArraysUniqueId').is(':checked')));ser();">
<label for="VideoTagsArraysUniqueId" class="VideoTagsArraysUniqueId_label">
<p>#VideoHashTag</p>
<input type="checkbox" class="VideoTagsArraysUniqueId" value="VideoHashTag"></input>
<span class="Checkmark">
</label>
</button>
<button id="button2" onclick="$('.VideoTagsArraysUniqueId').prop('checked', !($('.VideoTagsArraysUniqueId').is(':checked')));ser();">
<label for="VideoTagsArraysUniqueId" class="VideoTagsArraysUniqueId_label">
<p>#VideoHashTag</p>
<input type="checkbox" class="VideoTagsArraysUniqueId" value="VideoHashTag"></input>
<span class="Checkmark">
</label>
</button>
</form>
</div>
What I need to do is (when a user clicks on "search"), Get the values and build a js redirect using "window.location=URL" so that the values are separated by "+" so input2+input3+input4.
Are the form.serialize() vars I'm trying to declare supposed to output something when typed into the console?
Do I need to use ajax and a php script to build this redirecting button?
In my code, under "function ser()" I have "$data = 'asd';" and "var data = 'add';". I'm wondering why $data is populating however "data" is not. Are "$variables" treated differently than "variables"?
How to get the inputs and make the URL?
Thanks.
I have a page with dynamically generated content. In this page there is a form for users to submit questions. How can I include in this form, a reference that is unique to each one of these pages?
<div class="detalle-form-wrap">
<div>
<h1>
Contact us if you are interested!
</h1>
<h2>
REF. VC0171
</h2>
</div>
So the reference is dynamically generated inside the h2 tag. I would like that when a user submits a form, we get that reference as well along with it.
Can use jQuery if necessary.
If that code you posted is inside an HTML form, you can use a hidden input field that contains a variable with your reference as a value:
<h2>
REF. VC0171
<input type="hidden" name="reference_1" value="<?php echo $reference; ?>">
</h2>
That value will be sent with your form on submission, you can get it by its name, like $reference = $_POST['reference_1']; (or $_GET['reference_1'];, if the form method is get)
You can add an additional input-field with type="hidden" and set it's value to the reference:
<input type="hidden" name="reference", value="REF. VC0171" />
You can access it just like any other form variable with $_GET["reference"] or$_POST["reference"]`. But keep in mind that the user can change the value of it using the developer tools in any browser.
So I have this form:
<form method="post" action="index.php" id="searchform">
<input type="text" name="search" placeholder="Search...">
<input type="image" src="img/img1.png" alt="submit" onmouseover="hover(this);" onmouseout="unhover(this);" /></a>
</form>
When the user searches for something I want to change this div:
<div class = "mainText">
<h2>Today's Events: </h2>
</div>
To say this:
<div class = "mainText">
<h2>Results: </h2>
</div>
How can I do this?
EDIT: Is it possible to run this code from within a php if statement?
jquery .text() seems a better fit, so you can just change the text of the tag.
$(".mainText h2").text("Results:");
More on this here:
http://www.w3schools.com/jquery/html_text.asp
The action in your form is the destination of where your form ends up.
If you are looking to control the dom elements you need something like javascript or jquery to control the front end of your application.
You could use jquery to simply listen for when your user has clicked the button or submitted the form and parse the results (in this case, just switching html text). *Remove the the action destination otherwise the page will redirect to index.php
$('form').submit(function(){
$('.mainText').html('<h2>Results: </h2>');
return false;
});
Common usage is to put an ajax call in the submit function to retrieve some data from outside the page source. Hopefully that puts you on track :)
Well, i'm very new to Javascript and PHP, and I have a problem.
The idea: I want to do some post area, where in a single PHP page people will fill a form and it will create a little bootstrap panel. Don't worry about multiple pages, it's like a... wall.
Example:
<div class="col-sm-6">
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">My message</h3>
</div>
<div class="panel-body">
<h6>This is a test!</h6>
</div>
</div>
</div>
I don't know exactly how to do this. What i think is that in another page, there will be a form receiving the html contents for the panel title and body and then the PHP code will create html code [not a file] using this text and will put them in another file.
EDIT: As you can see in the comments, i'll have to use PHP and mySQL. I'm still not sure on how to do that.
Okay, i made this for you. The following is just for give you a start, the code is not correctly written, but it will give you a way to start your "project".
Firstly, create your database for storage your post, as follow :
TABLE_POST
title
content
date
autor
Then wall.php :
Start your file by getting with a query, all existing post in your database :
var post_list = "select id, pseudo, title, date, autor from table_post";
Once you have it, display it as you want :
<div>
foreach (post in post_list) {
echo "<div>";
echo "<h1>".post["title"]."</h1>";
echo "<p>".post["content"]."</p>";
...
echo "</div>";
}
</div>
In an other page, you can have your form :
form.php
<form id='myform' method='post' action='add_post.php'>
<input type='text' id='title'/>
<input type='text id='content' />
<input type='text' id='autor' />
<input type='submit' value='Post it !'>
</form>
And in an other page, you can have the function to insert in the database :
add_post.php
insert into table_post VALUES ($_POST["title"], $_POST["content"], NOW(), $_POST["autor"]);
I repeat, i just give a structure for your achievement, i didn't provide a correct syntaxe of the code.
Hope it can help you
I have a website with members and when members are logged in they have access to a page with a form that they can use to submit information. This form has a hidden input “user_email” with a pre loaded defualt value that is equal to the logged in members email address on file.
<form action="xxx.php" class="well" id="xxx" name"xxx" method="post">
<input type="hidden" id="user_email" name="user_email" value="xxx#email.com">
<input type="text" id="invoice_id" name="invoice_id">
<input type="text" id="other1" name="other1">
<input type="submit" value="Submit">
</form>
I need a script that will take that pre filled value of a forms input named “user_email” and search and fetch every row/record of data in my database that have that same value under the “user_email” column.
Then For every row/record matched/found I'm trying to have a link generated
When any generated link is clicked, It needs a function to pre fill the form with its corresponding fetched row/record data.
I cant imagine how much time it would take for one to posses the skills required to compose the code it takes to achieve the above...Any point of direction or any help is greatly appreciated...thanks for your time.
You could make a request to a PHP script that reads the email, finds the and returns associated data as an array of objects, and outputs the HTML links, with each link containing the data in custom 'data-x' attributes. For example:
//email_details.php
<?php
//your function that returns an array of objects
$rows = find_the_data($_GET['user_email']);
foreach($rows as $row) { ?>
<a class="email_data_link" href="#" data-invoice-id="<?php echo $row->invoice_id ?>" data-other1="<?php echo $row->other1 ?>">A link</a>
<?php } ?>
You could then use a tool like jquery to modify the form when a link is clicked
$('.email_data_link').on('click', function() {
//copy the data embedded in the clicked link to the form
$('#invoice_id').val($(this).data('invoice-id'));
$('#other1').val($(this).data('other1');
});
Without additional context and understanding your level of expertise, it's hard to create a truly helpful example, but this may at least give you some food for thought.
Best of luck