Javascript Span as PHP Variable - php

As the title suggests, I have a span that is automatically generated by SimpleCart (Javascript Cart) - I want to use that span with a different checkout gateway then they support. Therefore, I need to take some of their tags and "echo" them into PHP variables.
For example:
<input type="hidden" name="fltAmount" value="###">
<span class="simpleCart_finalTotal">
The SPAN needs to be able to be passed into the INPUT so I can send it off to Paypoint.net

Your code should look something like this:
<input type="hidden" name="fltAmount" value="" id="fltAmount">
<span class="simpleCart_finalTotal" id="finalTotal">
And in the form, you will call a function (onsubmit) that looks like:
<form onSubmit="calledOnSubmit(event)" ... > ... </form>
An the function:
function calledOnSubmit(event) {
var inputAmount = document.getElementById('fltAmount');
var spanTag = document.getElementById('finalTotal');
inputAmount.value = spanTag.innerHTML
}

Related

Text box value instant show calling method

Script
<script type="text/javascript">
function KeyHandler() {
var result = document.getElementById('result');
result.innerHTML=document.getElementById('txtInput').value;
}
</script>
HTML
<input type="text" id="inputField" />
<div id="screen"></div>
This code work good in html but i want
<a href="#?call=limit.lim&height=400&width=400&id={$ID}&team=
{$Name}&val={'**********'}&name={$Name2}&catname={$Cat}"
class="inlinePopup" title="{'Namer'}">{$Single}</a>
val={'****'} What ever i type in the text box that's i want here in the star position how
val={'<div id="screen"></div>'} this not work
Example : type a value 123 in the text box means that's instant like
val = 123
You could change the href attribute of the link in your KeyHandler function.
For example:
function keyHandler(){
var inputText = document.getElementById('inputField').value;
document.getElementById('myLink').href = '#?yourParam=something&val='+encodeURIComponent(inputText);
}
Would work with the HTML:
<input type="text" id="inputField" onkeydown="keyHandler()" />
Link Text
Could you adapt this technique to suit your needs? Alternatively, could you provide more details about your problem? Example code, motivation, context etc?

How to get input value from html form in jQuery?

I want to ask how i can get value of input ONLY ON SUBMIT in Javascript from HTML form when i have many forms with same name on one page.
It's looking like this:
First printed HTML form:
<div id="addCommentContainer3">
<form class="add-comment-form" id="addCommentForm3" method="post" action="">
<input type="hidden" value="3" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
Second printed:
<div id="addCommentContainer2">
<form class="add-comment-form" id="addCommentForm2" method="post" action="">
<input type="hidden" value="2" name="comentonpost" id="comentonpost"/>
<textarea class="commentinput" name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</form>
</div>
And like this there are many more .
I must take the value of comentonpost because i need it in my Javascript so when i post comment it wil appear before addCommentContainer of the submited form.
And there is the whole Javascript:
$(document).ready(function(){
var name_element = document.getElementById('comentonpost');
var x = name_element.value;
/* The following code is executed once the DOM is loaded */
/* This flag will prevent multiple comment submits: */
var working = false;
/* Listening for the submit event of the form: */
$('#addCommentForm'+x).submit(function(e){
e.preventDefault();
if(working) return false;
working = true;
$('#submit').val('Working..');
$('span.error').remove();
/* Sending the form fileds to submit.php: */
$.post('comment.submit.php',$(this).serialize(),function(msg){
working = false;
$('#submit').val('Submit');
/*
/ If the insert was successful, add the comment
/ below the last one on the page with a slideDown effect
/*/
$(msg.html).hide().insertBefore('#addCommentContainer'+x).slideDown();
},'json');
});
});
And in this way when i press the Submit button it's working only for the first form printed in the page.
My question is how i can fix this? How i can make it get the comentonpost value only of the submited form not the first printed, is there any better way this script may work?
Thanks in advance!
This will do what you need:
$(document).ready(function(){
/* Watch OnSubmit for all forms */
$('form').submit(function(e){
e.preventDefault();
/* Show the 'commentonpost' for the submitted form */
alert($(this).children('#comentonpost').val());
});
});
This works, but you should keep in mind that your document is not valid because you have elements that have the same IDs. IDs must be unique within a document for it to be valid.
You may only need to change this part:
$(document).ready(function(){
/* The following code is executed once the DOM is loaded */
/* This flag will prevent multiple comment submits: */
var working = false;
/* Listening for the submit event on all the forms: */
$('form[id^=addCommentForm]').on('submit', (function(e) {
var submitted_form = $(this);
//etc...
when you use jquery to select an ID, it will return 0 or one elements that match, and it will match the first one it finds. from http://api.jquery.com/id-selector/
Calling jQuery() (or $()) with an id selector as its argument will
return a jQuery object containing a collection of either zero or one
DOM element.
whenever you use $("#submit") its parsing through the DOM and finding the first instance of <input type="submit" id="submit" value="Submit" /> and returning that element. what you really want to do in your to scope your search down. you know you want the input from the form that was submitted, so you should try
$(this).find("#submit")
this will start at the form element, and search only elements contained inside the form for the first element with an ID of submit.
update
didnt realize your event was only tied to the first form, this whole things needs some work.
you've got a generic form template, and when you've got multiple forms like this, you really shouldnt be giving them all the same ID. instead, start binding event handlers to classes, and use the dom to store whether a form is 'working' or not as well
http://jsfiddle.net/neKdz/3/
I would suggest something like this
$(document).ready(function(){
$(".add-comment-form").submit(function(e){
var x = $(this).find("#comentonpost").eq(0).val();
// now you have number x of submitted form and you can do the rest
});
});
Edit:
To prevent page reloading because of form submission, add onSubmit="return false;" on form elements, e.g.:
<form class="add-comment-form" id="addCommentForm3" method="post" action="" onSubmit="return false;" >
But because of this we have to follow another approach using click event:
$(document).ready(function(){
$("#submit").click(function(e){
var x = $(this).parent(".add-comment-form").eq(0).find("#comentonpost").eq(0).val();
// now you have number x of submitted form and you can do the rest
});
});
Combination of click event and cancelling submit event should work. But just for the record (you should already know this, but I can imagine you might have a reason for doing it) using same id on multiple html elements is not a good strategy.

Set Call to PHP Function, with POST Variables as Parameters, as HTML Form Action

I currently have an HTML file, with a form in it, that when submitted POSTs the form & calls a simple short PHP file that calls a function within another PHP file using the POSTed variables as parameters. The files are both below. What I am wondering is whether I can somehow skip the middleman PHP file, and simply call the function from my HTML file.
Ideally, this would set the call to the function:
insert_PE(new PE($_POST[Date],$_POST[Participant],$_POST[Time],$_POST[Result],$_POST[Notes]));
as the form action. Does anyone know how/if this can be achieved?
HTML:
<FORM ID="FORM1" METHOD="POST" AUTOCOMPLETE="off" ACTION = "writeToDL.php">
<INPUT TYPE="hidden" NAME="Date" STYLE="WIDTH:0px; " MAXLENGTH="8" TITLE="Enter Date" Value="<?php $dt = date('Y-m-d'); echo $dt ?>"/>
<INPUT TYPE="text" NAME="Time" STYLE="WIDTH:70px; " MAXLENGTH="7" ONCHANGE="validateTime();" />
<SELECT NAME = "Result">
<OPTION VALUE = OK></OPTION>
<OPTION VALUE = C>C</OPTION>
</SELECT>
<SELECT NAME = "Participant" STYLE = "WIDTH: 187">
<OPTION SELECTED VALUE = "">Select...</OPTION>
<?PHP
$allParticipants = getall_participants();
foreach($allParticipants as &$value) {
$val = $value->get_id();
echo "<OPTION VALUE='",$val,"'>";
echo $value->get_first_name()," ",$value->get_last_name();
echo "</OPTION>";
}
?>
</SELECT>
<TEXTAREA NAME='Notes' COLS='28' ROWS='5'></TEXTAREA>
<INPUT TYPE="image" SRC = "images/submit.png" VALUE="Submit Participant"/>
</FORM>
PHP File:
<?php
include_once('database/PE.php');
insert_PE(new PE($_POST[Date],$_POST[Participant],$_POST[Time],$_POST[Result],$_POST[Notes]));
?>
You COULD do something like this:
<?php
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
include_once('database/PE.php');
insert_PE(new PE($_POST['Date'],$_POST['Participant'],$_POST['Time'],$_POST['Result'],$_POST['Notes']));
} ?>
<html>
... rest of your page here ...
</html>
That way the PHP code only fires if an POST was actually performed. Some would suggest checking for the presence of a form field, but that's unreliable - you might change the form down the road and forget to update the if(). Checking the request method is guaranteed to be 100% reliable.
What I am wondering is whether I can somehow skip the middleman PHP file, and simply call the function from my HTML file.
No. The client only knows about URIs.
A URI can map to a PHP program. Multiple URIs can map to the same PHP program. You can use logic to determine what functions to run for a given URI. You can't avoid having that logic in your program.
One option is to put method="_the_main_php_file_containing_function_to_be_called_"
I hope it works fine.
I think you could use a hidden field on the form, and populate it with the name of the function you want to run on "destination.php". Then a switch statement on "destination.php" could pull the name of the function from POST variable.

Trouble passing slider value to php mail script

I want to email the value of the slider along with some things they entered into my form to my php email script. This is how the form looks that will pass data to the POST method of mailer.php:
<form method="POST" action="mailer.php">
Name:
<input type="text" name="name" size="19"><br>
<br>
E-Mail:
<input type="text" name="email" size="19"><br>
<input type="hidden" name="slider_value" size="19" value=document.getElementById('sliderValue').value><br>
<br>
<input type="submit" value="Submit" name="submit">
</form>
document.getElementById('sliderValue').value is the call I make to get the value of the slider but when I pass this to the value of my hidden input slider_value I get back "document.getElementById('sliderValue').value" in the email that is sent by my php script. How would I pass the value instead?
document.getElementById is a Javascript function. It probably won't do what you want it to unless you put it in a place where Javascript is accepted.
One way to pass the slider value is by putting the sliderValue element in the form that you are submitting.
If that is not an option, you can set the value of the slider_value element with Javascript. Either set an onsubmit attribute to the form like this:
<form method="POST" action="mailer.php"
onsubmit="this.slider_value.value = document.getElementById('sliderValue').value">
or add an event listener to do it:
var form = document.forms[0]; //this may need to be changed depending on your form
function addSliderValue() {
this.slider_value.value = document.getElementById('sliderValue').value;
}
if (form.addEventListener) { //most browsers
form.addEventListener("submit", addSliderValue, false);
} else if (form.attachEvent) { //IE
form.onsubmit = addSliderValue;
}
Bind a function to the sliders "onSlide/onChange/whatever it's called" event that will update the hidden input field with the slider value. Also set the input value to the initial slider value on slider init. That should do the trick.

Simple HTML DOM help

How can I extract the value attribute of an input tag? Using SIMPLE HTML DOM
let me give you an example:
<form action="#" method="post" name="test_form" id="test_form">
Name<input type="text" name="name" value="NaMe"/><br />
Address<input type="text" name="address" value="AdDrEsS"/><br />
<input type="hidden" value="sayantest" />
</form>
I want to extract just the value of hidden type input tag, not the others.
You want to put the id (so you can access the value in javascript), as well as a name (if you want to access the value on the server) in the tag you wish to get the value from.
e.g.
<input type="hidden" name="test" id="test" value="sayantest" />
then your javascript is as simple as:
<script type="text/javascript">
var val = document.getElementById('test').value;
alert(val);
</script>
using SIMPLE HTML DOM
Do you mean the PHP library of that name?
If so, you'd have to choose a way to identify the input. If you can't change the markup to add an id or name on the hidden input you want, you'd have to come up with something like “get the first input with type hidden in the form”:
$html= new simple_html_dom();
$html->load('<html><body<form action="#" method="post" name="test_form" id="test_form">Name<input type="text" name="name" value="NaMe"/><br />Address<input type="text" name="address" value="AdDrEsS"/><br /><input type="hidden" value="sayantest" /></form></body></html>');
$input= $html->find('#test_form input[type=hidden]', 0);
$input->value;
The easiest way, as already mentioned, is to give your hidden input an id attribute and then use getElementById and then .value or .getAttribute('value') to select it.
Alternatively, if you want to get the values of all hidden inputs on the page, or can't inject your ID, you could use something like this:
var inputs = document.getElementsByTagName('input');
for(var i = 0; i < inputs.length; i++){
if(inputs[i].getAttribute('type') == 'hidden'){
alert(inputs[i].getAttribute('value'));
}
}
Here is what I came up with... using exactly what you showed in your initial question. Note that all I did was echo the value of all input hidden, where test_form.htm is your original:
<?php
function scraping_form()
{
// create HTML DOM
$html = file_get_html('test_form.htm');
// get input hidden value
$aObj = $html->find('input[type="hidden"]');
foreach ($aObj as $hKey=>$hidden)
{
$valueAttribute = $hidden->value;
echo "*TEST* ".$hKey.": ".$valueAttribute."<br />";
}
// clean up memory
$html->clear();
unset($html);
return;
}
// -----------------------------------------------------------------------------
// test it!
// user_agent header...
ini_set('user_agent', 'My-Application/2.5');
scraping_form();
?>

Categories