Develop Reference

how to give name in auto submit form javascript

This is my code that I am using to submit form with post value
<form action="<?php echo DOMAIN; ?>contact/booking-form.php" method="post">
<input type="text" name="name" value="<?php echo $name; ?>" />
<input type="text" name="email" value="<?php echo $email; ?>" />
<input type="submit" name="submit" id="submit" />
<script>document.getElementById('submit').submit();</script>
</form>
Can anybody help me to pass name="submit" value of submit button to another page?

A submit button is only going to be a successful control if it is used to submit the form (and even then only if it has a name and a value … which yours does not).
If you want submit=submit in your form data when you submit the form with JavaScript, then don't use a submit button to put that data in the form in the first place. Use a hidden input.
<input type="submit">
<input type="hidden" name="submit" id="submit" value="submit">
Then you have two other problems.
First, submit is a method of form elements, not inputs. So you need to change your script to call the right element.
<script>document.getElementById('submit').form.submit();</script>
Second, if a form has a control called submit then that will clobber the submit method. So you need to get one from a different form (not supported in old versions of Internet Explorer):
<script>
var form = document.getElementById('submit').form;
var submit_method = document.createElement("form").submit;
submit_method.call(form);
</script>

<form id=submit action="<?php echo DOMAIN; ?>contact/booking-form.php" name="form1" method="post">
<input type="text" name="name" value="<?php echo $name; ?>" />
<input type="text" name="email" value="<?php echo $email; ?>" />
</form>
<script >
document.form1.submit()
</script>

there is no sumit button in your code. first add in html
<input type="submit" value="submit" id="submit"/>
<script>
document.getElementById("submit").value = "newSubmitButtonValue";
</script>

Multiple Forms on Same page AJAX

I'm having troubles on making this work.
I need to have multiple forms on the same page... I've tried countless things, but nothing seem to work.
What I'm trying to do here is identify every form (in some way) in order to submit that one instead of the FIRST form on the page. Code below, works but submits always the same form, the first one!
Here's my current code
JS:
$(document).ready(function(){
$('.submit').on("click", function() {
var artworkId = $("#inquirebox").data("artworkid");
$.post("send.php";, $("#artinquire"+artworkId).serialize(), function(response) {
$('#success').html(response);
});
return false;
});
});
HTML:
<div id="inquirebox" data-artworkid="<?php echo 456;?>">
<form action="" method="post" id="artinquire<?php echo 456;?>" data-artworkid="<?php echo 456;?>">
<label for="name">Name:</label><br />
<input type="text" name="name" id="name" /><br />
<label for="email">Email:</label><br />
<input type="text" name="email" id="email" /><br />
<label for="message">Message:</label><br />
<textarea name="message" id="message"></textarea><br />
<input type="hidden" name="id" value="<?php echo 456;?>">
<input type="hidden" name="artist" value="<?php echo $title1; ?>">
<input type="hidden" name="url" value="<?php echo $uri1; ?>">
<input type="hidden" name="artwork" value="<?php echo $artwork1; ?>">
<input type="button" value="send" class="submit" id="submit" data-artworkid="<?php echo 456;?>">
<div id="success"></div>
</form>
</div>

You're using the same ID on all the DIV wrappers around the forms.
ID's must be unique, so you could use a class instead, but you really don't need any identifiers at all, nor do you need data attributes, the .submit button is inside the form, so all you need is this.form, or more jQuery'ish $(this).closest('form') to get the parent form
$(document).ready(function(){
$('.submit').on("click", function() {
var form = $(this).closest('form');
$.post("send.php", form.serialize(), function(response) {
form.find('.success').html(response);
});
return false;
});
});
You should however use a class on the #success element to find it based on the form.

Pass input textbox value in onClick function - php

I have a input text field. I need to pass the values entered inside the element through onClick of javascript.
<form>
<fieldset>
<label>Common Site ID: </label><span><?php echo $commonsiteid ?></span><br>
<label>Acres: </label><input id="acre_value" name="acre_value" type="text" value="<?php echo $acre; ?>">
</fieldset>
</form>
<input type="submit" value="submit" onclick="saveValue('<?php echo $_REQUEST['acre_value'] ?>')">
I am passing the value through submit onClick, Which is going empty. How do i pass value in this onclick function.

Try this:
<input type="submit" value="submit" onclick="saveValue(document.getElementById('acre_value').value);">

Have you tried writing something like following.
<input type="submit" value="submit" onclick="saveValue(document.getElementById('acre_value').value)">

I try this, and worked:
<script>
function saveValue(){
alert(document.formName.hiddenField.value);
/*do something*/
return false;
}
</script>
<form name="formName" method="post">
<input type="hidden" name="hiddenField" value="<?php echo $_REQUEST['acre_value'] ?>"/>
<input type="submit" value="submit" onclick="saveValue()">
</form>
As you can see, i pass the value by a hidden field, and on the Js function i get the value of this field.If you need a php function instead off a js, it's the same logic.

Realtime form - on submit clear textfield

I have been looking through StackOverflow a lot and found SOME solutions but they don't work for me :( Probably because I can't place the strings of code correctly.
I have a form which submits content to a database - and a script that loads the database inputs into a div below the form. It works realtime with a small delay.
<div id="addCommentContainer">
<form id="addCommentForm" method="post" action="">
<div>
<input type="hidden" name="name" value="<?php echo $loggedInUser->display_username; ?>" id="name" />
<input type="hidden" name="email" value="<?php echo $loggedInUser->email; ?>" id="email" />
<textarea name="body" id="body" cols="20" rows="5"></textarea>
<input type="submit" id="submit" value="Submit" />
</div>
</form>
It works. I also have this script:
http://sandbox.jinoh.dk/script.js
I tried a solution onclick - but it made the content disappear not being posted. I tried onsubmit - but it didn't work. What I want is the "comment" to be posted and then disappear from the form aka the form to be cleared.
Chatchatchat-div is the one that the comments are loaded into.

$('#addCommentForm').submit(function(e){
var form = this;
.....
....
$.post('submit.php',$(this).serialize(),function(msg){
if(msg.status){
form.reset(); // if you want to reset on msg status
}
....
});
this.reset(); // just reset the form what happen
});

jQuery serialize function with multple forms

I'm using the jQuery .serialize function and can't get it to serialize the proper form on submit.
my js code:
function getquerystring(form) {
return $("form").serialize();
}
my forms:
<div class="leave_message_box">
<form name="leave_message_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="leave_message" />
<input value="Leave Message" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "leave_message_form")'></p>
</form>
</div>
<div class="outside_job_box">
<form name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
I must be doing something wrong in passing the variable. the full code # pastie. The function I have does work, however, its always the last form that gets submitted.

Using this code:
$("form")
will find all the <form> elements in your document.
Given that form is a string containing the name of the form, what you want instead is this:
$("form[name='" + form + "']")
Looking at your supplied code, I have this suggestion. Instead of passing the form name to your function, why not just pass the form itself?
<button onclick="xmlhttpPost('blah', this.form)">
You also don't need to put javascript: in the onclick, onfocus, onwhatever properties.

I would suggest putting an ID attribute on the form and then using that ID as an explicit selector for jQuery:
<div class="outside_job_box">
<form id="outside_job_form" name="outside_job_form">
<input type="text" name="clock_code" placeholder="Clock Code" />
<input type="text" name="message" placeholder="Message (Blank for none)"/>
<input type="hidden" name="type" value="ouside_job" />
<input value="Outside Job" type="button" onclick='JavaScript:xmlhttpPost("clockin.php", "outside_job_form")'></p>
</form>
</div>
Then you would select and serialize it like this;
var f = $("#outside_job_form").serialize();
Not only making your code more effecient but more readable, in my opinion.

If the sole purpose is to encode simple text into URL format then use encodeURIComponent().