Here is how the form is supposed to execute:
<script>
$(document).ready(function(){
$("#submit").click(function(){
//access token stuff
var token = $("#link_input").val(); ... etc</script>
.
I am trying to auto submit this info once it exceeds 10 characters. Normally you fill out the text area in the input field and you click submit. Upon clicking the submit button the JS validates the text in the input box and if it's valid it executes. How can I auto-submit the text in the input box without having to click the submit button?
<script language="JavaScript" type="text/JavaScript">
var x=10;//nr characters
function submitT(t,f){
if(t.value.length==x){
f.submit()
}
}
</script>
<input id="link_input" onkeyup="submitT(this,this.form)" autofocus="true" autocomplete="off" placeholder="http://www.facebook.com/connect/login_success.html#access_token=AAAZDCiOS6Ls0BAMUKJDvLZCTgZDZD" style="width: 600px;margin-left: -11%;" value="" name="url">
<br/>
<div id="Wait" style="display:none;"><center>Processing your form<br><img src="http://i.imgur.com/kKqSe.gif"></center></div>
<br/>
<center>
<img src="http://i.imgur.com/eA6fv.png" style="border:0px;padding-top:5px;">
$('#link_input').on('keyup', function() {
if($(this).val().length > 10) {
$('form').submit();
}
});
Just test against keyup similar to what you have already.
<form action='someplace' id='myform' method='post'>
<input type='text' id='link_input' ...other stuff />
</form>
jquery:
$('#link_input').on('keyup',function(){
var val = $(this).val();
var len = val.length;
if(len == 10){
$('#myform').submit();
}
});
Rename your btn from submit to btnSubmit.
The id of submit is going to mess with f.submit()
Related
now i have a input text, radio, and a submit button ..
lets say my url = image-search.php
<form>
<input type="text" name="name"><br>
<input type="radio name="arrange" value="horizontal"><br />
<input type="radio name="arrange" value="vertical"><br>
<input type="submit" name="submit"><br>
when i click the button..
it redirect same page but url = image-search.php?name=ss&arrange=horizontal
and this page still have the button..
the question is .. after i click button at 1st page = image-search.php
i want the user input value remain in the input text of name..
and how to make the checkbox as checked based on user choose?
If the page is reloaded when you submit the form you could use php to set default values for your form fields
<form>
<input type="text" name="name" value="<?php echo isset($_GET["name"])?$_GET["name"]:""; ?>"><br>
<input type="radio" name="arrange" value="horizontal"<?php echo (isset($_GET["arrange"])?($_GET["arrange"]=="horizontal"?" checked='checked'":""):""); ?>><br />
<input type="radio" name="arrange" value="vertical"<?php echo (isset($_GET["arrange"])?($_GET["arrange"]=="vertical"?" checked='checked'":""):""); ?>><br>
<input type="submit" name="submit"><br>
</form>
Here is the answer to your question.. hope this will help everyone..
#Macke - your approach for setting values after submission is really good, but when we have lot of elements on form.. let's say 1000 - it become pain in AS*..
Add this script tag in your HEAD tag of the page -
<script language="javascript" type="text/javascript">
var obj = JSON.parse('<?= json_encode($_REQUEST) ?>');
console.log(obj);
function __setPostBackValue(element){
if(obj.length <= 0) return;
var type = element.type;
var fval;
console.log('Processing...'+ element.name);
try{
eval('fval = obj'+'.'+element.name);
}
catch(ex){
}
if(type == 'text'){
element.value = fval;
}
if(type == 'checkbox'){
if(fval != undefined)
element.setAttribute("checked","on");
}
if(type == 'radio'){
if(fval != undefined && element.value == fval)
element.setAttribute("checked","on");
}
}
</script>
and at the bottom of the page, yes at the bottom of the page (before body ends) add another script tag -
<script language="javascript" type="text/javascript">
var fields = document.getElementsByTagName('input');
for(var i=0;i<fields.length;i++){
__setPostBackValue(fields[i]);
}
</script>
What it does ?
When you submit your form, var obj = JSON.parse('<?= json_encode($_REQUEST) ?>'); this creates local JSON Object usable by Javascript - and the script we added at the end of the page.. loop through all elements and call __setPostBackValue function. Where we are setting the values of the elements by Javascript.
This is little bit tricky but it works..!!
PS: I had no radio button in my page, but if you have you can add it easily.
-Paresh Rathod
I have a registration form that is currently in a popup modal window coded in jQuery. I have a PHP submit button on the bottom and I have added jQuery code that stops the button from submitting. This is because it will stop my modal window from closing when I submit the page. My issue now is that submitting the form would be impossible. Is there a way to submit my form over all this crowded pop-ups and jQuery? Say is it possible to use AJAX or jQuery to submit the form and allow my PHP to handle it.
Since I am writing in PHP, there is quite a bit of server side validation going on, so the point of this is to allow my viewers to fix their validation mistakes before the modal window closes.
Here is my jQuery, I didnt bother to mess with that anymore as it does what I need.
$(document).ready(function() {
$('a.modal-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
$(loginBox).fadeIn(300);
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
Here is the code I used to stop the form from submitting:
$(function () {
$(':submit').click(function (event) {
event.preventDefault();
// submit the form dynamically
});
});
and below is my form, it might not matter although its there for the viewing.
<form method="post" id="loginform" action="<?php echo $_SERVER['PHP_SELF']?>">
<table style="color: white;">
<tr><th style="float:left;">Register a new account with us.</th></tr>
<tr><td>Username</td><td><input type="text" name="txtUser"/></td></tr>
<tr><td>Password</td><td><input type="text" name="txtPass"/></td></tr>
<tr><td>Email</td><td><input type="text" name="txtEmail"/></td></tr>
<tr><td>Confirm Email</td><td><input type="text" name="txtEmail2"/></td></tr>
<tr><td>First Name</td><td><input type="text" name="txtFname"/></td></tr>
<tr><td>Last Name</td><td><input type="text" name="txtLname"/></td></tr>
<tr><td>Address</td><td><input type="text" name="txtAddress"/></td></tr>
<tr><td>City</td><td><input type="text" name="txtCity"/></td></tr>
<tr><td>Postal Code</td><td><input type="text" name="txtPostal"/></td></tr>
<tr><td>Birth Year</td><td><input type="text" name="txtBirth"/></td></tr>
<tr><td>Gender</td><td><input type="radio" id="radio-1-1" name="radicalSex" class="regular-radio" value="m" selected="true" /><label for="radio-1-1"></label> Male</td></tr>
<tr><td></td><td><input type="radio" id="radio-1-2" name="radicalSex" class="regular-radio" value="f"/><label for="radio-1-2"></label> Female</td></tr>
<tr><td colspan='2' style="color: #FF6600;float:left;font-size:70%;"><?php echo $Error;?></td></tr>
<tr><td colspan="2"><input type="submit" name="btnRegister" ID="btnBlueTemp" value="Submit Registration" /></td></tr>
<tr><td colspan='2' style="float:left; font-size:70%;">Address information is optional</td></tr>
</table>
</form>
Let me give you an example of how you can do that .
<html>
<head>
<title></title>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
function validate(name, addr){
if(name=="") {
alert('Name is Blank');
return false;
} else if(addr=="") {
alert('Address is Blank');
return false;
} else {
return true;
}
}
$("#save").click(function(event){
event.preventDefault();
var name = $("#name").val();
var addr = $("#addr").val();
if(validate(name,addr)){
$.ajax({
type:'POST',
data:'name='+name+'&addr='+addr,
url:'test2.php',
success:function(data) {
alert(data);
}
})
}
});
});
</script>
</head>
<body>
<form name="frm" method="POST" action="">
<input type="text" name="name" id="name" value=""/><br>
<input type="text" name="addr" id="addr" value="" /><br>
<input type="submit" name="save" id="save" value="Save"/>
</form>
</body>
</html>
Now in test2.php You can do your php codes
<?php
if(isset($_POST['name'])) {
echo $_POST['name'];
}
?>
Hope this gives you an Idea.
You need to serialize the form data before posting it to PHP.
<script type="text/javascript">
var frm = $('#loginform');
frm.submit(function () {
$.ajax({
type: frm.attr('method'),
url: frm.attr('action'),
data: frm.serialize(),
success: function (data) {
alert('submitted');
}
});
return false;//stop actual form submit
});
</script>
Then, submit your form via ajax
Jquery AJAX
On AJAX URL on which the request is sent, you can write necessary codes for validation and return accordingly. For eg. if some one the form element doesn't meet the validation, you can throw the flag accordingly as json value.
Its possible, why not.
Once you have done all the input validation at client side, just submit the form...
$("#loginform").submit();
Then you will have your server do the rest of the validation.
If you want to stay in the page and show the validation output from server, the. You should submit using Ajax.
It will send your form data to server, then you can do server validation, and output any errors. You will get this in your Ajax complete handler, which you can use to show error messages to user.
To stop the form from reloading the page you needn't call any prevent methods as a simple script request would do the trick.
For instance,
$('#loginForm').submit(function() {
// Do the relevant tasks needed here, form is already prevented from being submitted
});
Check out this demo for more information on what I am referring to
I want to update marks of a particular student in particular subject out of eight subjects.
My question is how to identify that a particular text box value has been changed after clicking submit button, then the updation task is forwarded to the update.php. Please give me your valuable answer. Thanks in advance.
Since your button click event is occured on client side, you can identify it by client side scripting.
<script lang='javascript'>
$(document).ready(function(){
$('#button_id').click(function(){
/* Do whatever you want to do right here*/
});
});
</script>
For identifying the change on text box after clicking submit button, first change the input type from submit to button as as soon as you click submit, it redirects the page.
<input type='button' onClick='your_function()' id='btn_submit' name='btn_submit' />
<input type='text' id='text_box' name='text_box' onchange='$('#flag_value_changes').val('1')' />
<input type='hidden' id='flag_value_changes' name='flag_value_changes' />
<script lang='javascript'>
function your_function()
{
flag_value_changes = $('#flag_value_changes').val();
if(flag_value_changes == 1)
alert('Value has been changed');
else
alert('Value has not been changed');
}
</script>
the scripting language can help you in this situation.use javascript for the event of the submit button click.
do whatever you needed in that event..happy coding :)
As stated by hsuk. You can do it on the client side using javascript.
I've provided an example using textarea and no inline javascript.
HTML
<div>
<textarea id= "math">Math</textarea>
<textarea id= "english">English</textarea>
<textarea id= "french">French</textarea>
<textarea id= "spanish">Spanish</textarea>
<input type="submit" value="submit"/>
</div>
And the following javascript(Using Jquery)
$(document).ready(function(){
var initialValues = [];
var i = 0;
//Gets values on load
$("div textarea").each(function(){
initialValues[i] = this.id+" had "+$(this).val();
i++;
});
//Checks values on click
$("input").click(function(){
i = 0;
$("div textarea").each(function(){
value = initialValues[i].split(" ");
if($(this).val() != value[2]){
alert(value[0] + " was Changed.");
}
i++;
});
});
});
DEMO
[+] //each time I click this button the textbox will generate and I want to have a link beside each textbox, link is "remove" when I click "REMOVE" the textbox will remove..
[hello1] Remove
[hello2] Remove
[hello3] Remove
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
var i=0,j=0;
var t1= new Array();
function createtext(){
i++;
t1[i]=document.createElement('input');
t1[i].type='text';
t1[i].name='text'+i;
t1[i].value = "hello"+i;
t1[i].size = 10;
document.forms[0].appendChild(t1[i]);
var mybr=document.createElement("br");
document.forms[0].appendChild(mybr);
}
</SCRIPT>
</HEAD>
<BODY >
<form action="" method="get" name="f1">
<input name="b1" type="button" onClick="createtext()" value="+">
<input name="b1" type="Submit"><br>
</form>
</BODY>
</HTML>
Well this is simple.
Just add a id attribute with your text field array that will be assigned to each newly created textarea like this:
t1[i].id='some_unique_suffix'+i
t1[i].onClick='remove("some_unique_suffix"'+i+')'
Then you can go on creating a remove link after each textfield via your loop and pass the id of that particular textfield to a remove function that will be called upon clicking on the remove link like this:
function remove(id)
{
$('#some_unique_suffix'+id).remove();
}
Hope you get the idea.
You can add a remove button along with the input tag like this:
var i=0,j=0;
var t1= [];
function add(){
i++;
var parent = document.forms[0];
var div = document.createElement('div');
var input = document.createElement('input');
input.type='text';
input.name='text'+i;
input.value = "hello"+i;
input.size = 10;
t1.push(input);
div.appendChild(input);
var removeButton = document.createElement("button");
removeButton.innerHTML = "Remove";
removeButton.onclick = function(e) {
this.parentNode.parentNode.removeChild(this.parentNode);
return(false);
};
div.appendChild(removeButton);
parent.appendChild(div);
}
Working demo: http://jsfiddle.net/jfriend00/ky9nv/
This code makes it easier to remove an input element and it's associated button by enclosing them in a containing div. A clicked button can then just get it's parent container and remove that.
And, since your question is tagged with jQuery (thought it doesn't save you a lot here), here's a version that uses jQuery:
var i=0,j=0;
var t1= [];
function add(){
i++;
var div = $('<div>');
var input = $('<input>')
.attr({
size: '10',
type: 'text',
name: 'text' + i,
value: 'hello' + i
}).appendTo(div).get(0);
t1.push(input);
$('<button>Remove</button>')
.click(function() {
$(this).parent().remove();
}).appendTo(div);
$("#myForm").append(div);
}
add();
add();
$("#add").click(add);
Working example: http://jsfiddle.net/jfriend00/nbXak/
<script type="text/javascript">
var i=0;
function createtext() {
i++;
$('<div id="field'+i+'"><input type="text" name="text'+i+'" value="Hello'+i+'" size="10" /> Remove</div>').appendTo('#inputsPlaceholder');
}
function removeField (id) {
$('#'+id).remove();
}
</script>
HTML:
<form action="" method="get" name="f1" id="f1">
<input name="b1" type="button" onclick="createtext();" value="+" />
<div id="inputsPlaceholder"></div>
<input name="b1" type="submit" />
</form>
Try it: http://jsfiddle.net/Z3L5C/
Hi i'm using php and jquery. I have create dinamically a list of a div like that
<div class="divclass" id="<?php echo $i-1;?>">
<a href=" <?php echo $this->url(array('controller'=>'controller name','action'=>'action name'));?>">
<span>Date: </span>
</a>
</div>
My javasctipt script is, i pick the name of the id clicked, i set the hidden parameter to the name of the id and i want to submit the form
<script type="text/javascript">
$(document).ready(function() {
$('.divclass').click(function(){
var idarray = $(this).attr("id");
document.getElementById('testo').value=idarray;
document.forms["prova"].submit();
});
});
The form is:
<form id="prova" method="post" action="<?php echo Zend_Controller_Front::getInstance()->getBaseUrl().'/controller-name/action-name';?>">
<input type="hidden" value="" id="testo">
</form>
</script>
But in the next page i don't have the post parameter.
You need to give name attribute to #testo and then try this:
e.g
<input type="hidden" value="" id="testo" name="testo">
Your form is within <script> tag, Place it outside of <script> tag.
and write following code within DOM ready like follwing:
<script type="text/javascript">
$(function() {
// after DOM ready
$('.divclass').click(function(){
var idarray = $(this).attr("id"); // or this.id do the same thing
$('#testo').val(idarray); // set value to testo
$("form#prova").submit(); // submit the form
});
});
</script>