I have an issue where my trigger event is not happening in Firefox and Safari but works in Chrome.
The trigger event is called here:
<script>
function capture() {
//console.log("function is running");
jQuery('#square').html2canvas({
onrendered: function (canvas) {
var url;
url = canvas.toDataURL("image/png");
jQuery('#img_val').val(canvas.toDataURL("image/png"));
jQuery("#buttonSubmit").trigger( "click" );
}
});
}
</script>
It's triggered from a button in a form:
<form name="addpro" style="float:right;" method="post">
<input id="textInput" name="textInput" type="hidden" value="Vælg tekst, farve mv. under skiltet">
<input id="text2Input" name="text2Input" type="hidden" value="">
<input id="størrelseInput" name="størrelseInput" type="hidden" value="155x60">
<input id="formInput" name="formInput" type="hidden" value="Firkant">
<input id="farveInput" name="farveInput" type="hidden" value="Sort">
<input id="typeInput" name="typeInput" type="hidden" value="Messing Standard">
<input id="fastgøringInput" name="fastgøringInput" type="hidden" value="Skruer">
<input id="fontInput" name="fontInput" type="hidden" value="Arial">
<input id="fontSizeLine1Input" name="fontSizeLine1Input" type="hidden" value="6">
<input id="fontSizeLine2Input" name="fontSizeLine2Input" type="hidden" value="6">
<input id="priceInput" name="priceInput" type="hidden" value="470">
<input type="hidden" name="img_val" id="img_val" value="tape.png" />
<button onclick="capture();" class="buttonSign" value="Læg i kurven" />Læg i kurven</button>
<input class="buttonSign hidden" id="buttonSubmit" type="submit" name="addcustomcarts" value="Læg i kurven" />
</form>
As you can see I want to run the function capture(); before submitting the form! This works in chrome but not in firefox and safari - what's wrong here?
I was initially unable to replicate the issue via JSFiddle. I had to adjust a few things. With the following HTML:
<div id="square">
</div>
<form name="addpro" style="float:right;" method="post">
<input id="textInput" name="textInput" type="hidden" value="Vælg tekst, farve mv. under skiltet" />
<input id="text2Input" name="text2Input" type="hidden" value="" />
<input id="størrelseInput" name="størrelseInput" type="hidden" value="155x60" />
<input id="formInput" name="formInput" type="hidden" value="Firkant" />
<input id="farveInput" name="farveInput" type="hidden" value="Sort" />
<input id="typeInput" name="typeInput" type="hidden" value="Messing Standard" />
<input id="fastgøringInput" name="fastgøringInput" type="hidden" value="Skruer" />
<input id="fontInput" name="fontInput" type="hidden" value="Arial" />
<input id="fontSizeLine1Input" name="fontSizeLine1Input" type="hidden" value="6" />
<input id="fontSizeLine2Input" name="fontSizeLine2Input" type="hidden" value="6" />
<input id="priceInput" name="priceInput" type="hidden" value="470" />
<input type="hidden" name="img_val" id="img_val" value="tape.png" />
<button id="buttonCart" class="buttonSign" value="Læg i kurven" />Læg i kurven</button>
<input class="buttonSign hidden" id="buttonSubmit" type="submit" name="addcustomcarts" value="Læg i kurven" />
</form>
I could execute the following JQuery:
jQuery(document).ready(function(){
jQuery("form[name='addpro']").submit(function(e){
e.preventDefault();
console.log("Form Submitted");
});
jQuery("#buttonCart").click(function(){
html2canvas(jQuery("#square"),{
onrendered: function(canvas){
var imgVal = canvas.toDataURL("image/png");
jQuery("#img_val").val(imgVal);
console.log("Image rendered: " + imgVal);
},
logging: true
});
jQuery("#buttonSubmit").click();
});
});
My jsfiddle: http://jsfiddle.net/Twisty/673q4dmm/10/
This includes the html2canvas v0.4.0 and does seem to work, yet submits the form twice. This might be an issue with the way this plugin works. I have yet to found a work around.
I have this form
<form role="search" method="get" id="searchform" class="searchform" action="http://search.site.com/Archive/search/read" >
<div>
<input type="text" value="" placeholder="text" name="query" id="?" />
<input type="submit" id="searchsubmit" value="." />
</div>
</form>
I need to add this suffix at the end of the url: &title=&start_year=&end_year=
For example:
http://search.site.com/Archive/search/read?query=pertini&title=&start_year=&end_year=
Where the query is: pertini
Is it possible in JavaScript or jQuery or in PHP?
Site only support GET method.
I am working in WordPress.
Just add hidden fields for all the ones you need:
<form role="search" method="get" id="searchform" class="searchform" action="http://search.site.com/Archive/search/read">
<div>
<input type="text" value="" placeholder="text" name="query" id="?" /><input type="submit" id="searchsubmit" value="." />
</div>
<input name="title" type="hidden" value="" />
<input name="start_year" type="hidden" value="" />
<input name="end_year" type="hidden" value="" />
</form>
I have a GET form at the top of my page, but it is not yet configured. All I have for it is this:
<div class="top-search">
<form method="get" id="searchform" action="#">
<div>
<input type="text" value="Search..." name="s" id="s" onfocus="defaultInput(this)" onblur="clearInput(this)" />
<input type="submit" id="searchsubmit" value=" " />
</div>
</form>
</div>
How can I manipulate this to use Google CSE?
Seeming as no one decided to answer it, I found out for myself.
<div class="top-search">
<form id="searchform" action="http://www.google.com/cse">
<div>
<input type="hidden" name="cx" value="xxxx" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="text" value="" name="q" id="q" autocomplete="off" />
<input type="submit" id="searchsubmit" name="sa" value=" " />
</div>
</form>
</div>
Where "xxxx" is your Search Engine Unique ID, found on the Basics page of your control panel.
I have multiple forms and I have one php script that I want to use to process these forms but when I click on submit for any of the forms...the script is processed by the number of forms with the submit button named 'submitForm' in this case, the alert will show 3 times instead of once! What am I not doing right?
NB. I hope this makes much sense?
html code
<form action="" name="form1" method="post">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
<form action="" name="form2" method="post">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
<form action="" name="form3" method="post">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
php script
<?php
if (isset($_POST['submitForm'])) {
echo('<script>alert("Form Submitted")</script>');
}
?>
when I click on submit for any particular form, it submits all the forms.
this is not true.
Once your forms have proper formatting, your browser will submit only current one.
(and PHP has nothing to do here)
however, whole page will be reloaded, if you mean that. That is okay - when you submit a form, a page is intended to reload. If you need another behavior, you have to explain your wishes.
Also note that none of your text fields being sent to the server as they have no names.
I guess the question I should be asking is, how do I pass a particular form to php instead of writing multiple php scripts to handle each form!!!
well, it seems you want to ask how to distinguish these forms.
add a hidden field into each
<input type="hidden" name="step" value="1" />
and then in PHP
if ($_POST['step'] == 1) {
//first form
}
if ($_POST['step'] == 2) {
//second
}
This submits one form of many to php. Copy, paste, test, and study.
<?php
if (isset($_POST['submitForm'])) {
print_r($_POST);
}
?>
<form action="" name="form1" method="post">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
<form action="" name="form2" method="post">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
<form action="" name="form3" method="post">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
Using a,b,c,d for the first form, e,f,g,h for the second form and i,j,k,l for the third form and submitting the second form yields the following output:
Array
(
[A] => e
[B] => f
[C] => g
[D] => h
[submitForm] => Submit Form
)
#Jay
Actually its not hard.
Once you supply form names, your work is done. the DOM does the rest.
write one php block to do your functions (create/update/retrieve/delete)
Whichever button is clicked, by default it submits only the elements enclosed together with it.
if(!empty($_POST)){
if(isset($_POST['submit'])){
print "<pre>";
var_dump($_POST); // write your code here as you would
print "<pre>";
}
}
try this with your form above.
I know this is an old post but here's how I solve this very problem.
All you need to do is make sure the submit buttons in each form have different names. Eg:
<form action="" name="form1" method="post">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="Submit" value="Submit Form" name="submitForm1" />
</form>
<form action="" name="form2" method="post">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="Submit" value="Submit Form" name="submitForm2" />
</form>
<form action="" name="form3" method="post">
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="text" value="" />
<input type="Submit" value="Submit Form" name="submitForm3" />
</form>
Then, you simply check which form's submit button was pressed.
<?php
if (isset($_POST['submitForm1'])) {
echo('<script>alert("Form 1 Submitted")</script>');
} elseif (isset($_POST['submitForm2'])) {
echo('<script>alert("Form 2 Submitted")</script>');
} elseif (isset($_POST['submitForm3'])) {
echo('<script>alert("Form 3 Submitted")</script>');
}
?>
If you need dynamic forms, you may try below code. While statement can be changed to fetch data from DB and use foreach instead. Hope you know this.
Here, I used while($n<10) for 10 dynamic forms.
You can also use tag as below if you need separate form names.
<form action="" name="form<?=$n?>" method="post">
This will create separate form names such as form1, form2, etc but not necessary here.
<?php
if (isset($_POST['submitForm'])) {
echo '<pre>';
print_r($_POST);
echo '</pre>';
}
$n=0;
while($n<10) {
$n++;
?>
<form action="" name="form1" method="post">
<input type="text" value="" name="A" />
<input type="text" value="" name="B" />
<input type="text" value="" name="C" />
<input type="text" value="" name="D" />
<input type="Submit" value="Submit Form" name="submitForm" />
</form>
<?php
}
?>
Sample page with output when I click row 5..
update
I just try to call the farbtastic color picker, all scripts are included in the Html. the following code is a form with the color picker as placeholder. How can I call my farbtastic color picker? I'm using the following javascript code enclosed.
enter code here <form action="controller.php" method="post" class="popupform" id="form_changecolor">
<div id="colorpicker"></div>
<table>
<tr><th>huidige:</th><th>nieuwe:</th></tr>
<tr><td><input type="text" name="oldcolor" disabled="disabled" id="oldcolor" />
</td><td><input type="text" name="newcolor" id="newcolor" /></td></tr>
</table>
<div class="buttonrow">
<input type="hidden" name="page" value="{$PAGE}" />
<input type="hidden" name="module" value="changecolor" />
<input type="hidden" name="id" id="parameter_key" value="" />
<input type="submit" class="btnOk" value="Aanpassen" />
<input type="button" class="btnCancel" value="Annuleren" />
</div>
enter code here // color picker.
$("#content").dblclick(function() {
alert('color picker');
$("#colorpicker").farbtastic("#color");
});
See Basic Usage on the plugin's site.
Make sure you have the empty div in place in your code. And place the jQuery script first before the farbtastic script
<form>
<label for="color">Color:</label>
<input id="color" type="text" value="#123456" />
<div id="colorpicker"></div>
</form>
<script type="text/javascript">
$(function() {
$("#colorpicker").farbtastic("#color");
});
</script>