Including a dynamically generated reference in an HTML form - javascript

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.

Related

Returning to previous page without adding a URL parameter

In my website I want to allow to return from 'itemY' page to 'topicX' page.
I don't want to add a get parameter:
mysite.com?ref=topicX
I'm not sure if using document.referrer is the right way.
Also 'itemX' can be reached directly from Google so it doesn't have to show the return link.
Can you add a form with a hidden field on the page. The value of the hidden form field would be the url of the location you want to return to. Then just check for the presence of this hidden form field using js?
<form id="myForm">
<input type="hidden" id="goTo" name="goTo" value="topicX" />
</form>

How would I go about changing the contents of a div after the user searches?

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 :)

How to generate a link for every row/record found in a database to use as a way to populate a form when clicked on?

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

How can I pass data to a Smartsheet Web Form?

I have a html link which opens a Smartsheet form in new window so our online customers can fill out the form.
I would like to pass the value of a TextField (product name or product code) in my existing form to my smartsheet form. This would help my customers as they would not have to write the product name or product code a second time.
I have the following javascript to generate the URL that links to the Smartsheet form.
<script type="text/javascript">// <![CDATA[
var productName="productName.firstChild.nodeValue";
var sampleLink= "Order Sample!";
document.write(sampleLink.link("https://app.smartsheet.com/b/form?EQBCT=fbab5300a6d74cc58ae6326e267b3c4f/label.clsCaptionBold.clsFieldLabel/79019814="+productName));
// ]]></script>
The HTML code for the TextField is below:
<div class="clsField clsTextField"><label onclick="" class="clsCaptionBold clsFieldLabel" for="79019814">Product Name</label><br>
<input type="text" id="79019814" name="79019814" maxlength="4000" value=""></div>
I don't know if my javascript code is correct but when I click the link in the page I get the following message:
the form you are attempting to access is no longer active
What is the correct way to send data to a Smartsheet form?
Can I auto populate form data in a Smartsheet form?
Yes! :-)
How do I populate the form data in a Smartsheet form?
Option 1: Set a default value in the form
If the form data is always the same you can set a default value in Smartsheet's form editor. The screenshot below gives an example of this by setting the default value to 1 for the quantity.
Option 2: Pass a value in the link
A default value can be sent to the form by modifying the link and passing the value in the URL. This can be accomplished by using the field caption (in red below) for the key. For example, if my form looked like the following image I can pass in the quantity by modifying the form URL and adding &Quantity=2 to the end of the URL (note it is case sensitive).
The full URL would look something like https://app.smartsheet.com/b/form?EQBCT=ded979748e9a4a200ff56a46a6e3afae&Quantity=2
Also, the field caption might have spaces or other special characters so it is important to URL encode these as well. For example, If I wanted to pass the "Product Name" in the URL I would add &Product%20Name=laptop to the URL.
Answering the Original Question
To answer the original question, you will want your URL to look like the following to send the Product Name.
https://app.smartsheet.com/b/form?EQBCT=fbab5300a6d74cc58ae6326e267b3c4f&Product%20Name=driveway
This url can be dynamically generated by building the URL with javascript or passing the data via your own custom form. Since you are using a form in your example I will show that approach (which does not require javascript).
<form action="https://app.smartsheet.com/b/form" method="GET" >
<input type="hidden" name="EQBCT" value="fbab5300a6d74cc58ae6326e267b3c4f" />
<label for="productName">Product Name</label>:
<input type="text" name="Product Name" value="">
<input type="submit" name="Send" />
</form>
Note that I added a hidden element containing the EQBCT key that was in the original URL.

How do I use Javascript to force cursor to specific form field when form field has a name with brackets?

I am using CakePHP as my framework.
On page load, I want to force the cursor to a specific form field where name="data[Project][title]"
I'm trying to use javascript:
This works fine if I change the name to something without brackets, but fails to work with this form name. I have to use this form field name because of how CakePHP processes my form data.
Is there a workaround or another simple way to force the cursor to this form field?
Here is the code I currently have (if you change "data[Project][title]" to "formField" it works):
<body onLoad="document.searchForm.data[Project][title].focus();">
<form action="http://beta.industrialinterface.com/users/mainadd/" method="post" id="create-form" name="searchForm">
<input id="main-input" type="text" class="title-limit" name="data[Project][title]" onClick="this.value='';limitText(60);" onKeyDown="limitText(60);return true;" onKeyUp="limitText(60);return true;" />
Example code? Because otherwise you could simply do:
document.getElementById('id_for_your_input').focus();
If you are using a form and have access to the form element you can do
formelement['data[project][title]'].focus();
example at http://www.jsfiddle.net/fqgxv/
You can use getElementsByName() for this. Note that it returns an array.
Ex:
<body onLoad="document.getElementsByName("data[Project][title]")[0].focus();">

Categories

Resources