I am using Javascript to pass form variables to the PHP page sprcial_action.php but it is not redirecting to that page. My code is given below, please tell me where is the problem?
<script>
function formSubmit(index)
{
var image = document.getElementById("hdnimage" + index);
var email = document.getElementById("email" + index);
window.location.href = "sprcial_action.php?name=" + image;
}
</script>
<form enctype="multipart/form-data" id="form1" name="form1" method="get">
<div class="offers">
<div class="offer-banner">
<img src="/images/specialoffer/offer-1.png" />
</div>
<div class="mobile">
<input type="text" value="Mobile" name="mobile" />
</div>
<div class="or-button"></div>
<div class="email">
<input type="text" value="Email Address" name="email" id="email0" />
</div>
<input type="hidden" name="hdnimage0" id="hdnimage0" value="/images/specialoffer/offer-1.png" />
<div class="redem-copon">
<!--<img src="/images/specialoffer/copun.png" />-->
<input type="image" src="/images/specialoffer/copun.png" onclick="formSubmit(0)" />
</div>
</div>
</form>
window.location.href needs full path starting with http://. and add .value to image object
you should be writing as
window.location.href = "http://mydomain.com/sprcial_action.php?name=" + image.value;
Your image variable refers to the input object, not its value. To get its value, add .value:
window.location.href = "sprcial_action.php?name=" + image.value;
// here -------------------------------------------------^
But note that you're getting the email field but not then doing anything with it, and setting the href does not submit a form, it just takes you to the given page.
If you want to change the location the form submits to, you have to set the action property on the form object (and not change location.href):
var form = document.getElementById("form1");
form.action = image.value;
I'm not 100% certain you can change that during a form submit reliably across browsers, you'll need to test on your target browsers.
If 'sprcial_action.php' page is in the same application then please refer to the above answer(#Rab'a Answer), you have to use image.value instead of image( As it will be treated as a object). You don't need to give the full path.
But if this page is outside the current application then you have to specify the full address.
window.location.href = "http://imagesheaven.com/sprcial_action.php?name=" + image.value;
Try using document.location.href also. Thanks!!
have the answer:
<script>
function formSubmit(index)
{
var image = document.getElementById("hdnimage" + index);
var email = document.getElementById("email" + index);
var data=image.value;
window.location.href = "http://yourservername/sprcial_action.php?name=" + data;
}
</script>
<form enctype="multipart/form-data" id="form1" name="form1" method="get">
<div class="offers">
<div class="offer-banner">
<img src="/images/specialoffer/offer-1.png" />
</div>
<div class="mobile">
<input type="text" value="Mobile" name="mobile" />
</div>
<div class="or-button"></div>
<div class="email">
<input type="text" value="Email Address" name="email" id="email0" />
</div>
<input type="hidden" name="hdnimage0" id="hdnimage0" value="/images/specialoffer/offer-1.png" />
<div class="redem-copon">
<!--<img src="/images/specialoffer/copun.png" />-->
<input type="image" src="/images/specialoffer/copun.png" onclick="formSubmit(0)" />
</div>
</div>
</form>
Related
I am trying to figure out a way to get the value of an input box that is not in a form and put it in the URL of a form under it. Here is what I am talking about:
<div id="wrapper">
<h1>[ <input type="text" name="to" id="to" placeholder="To"> ]</h1>
<div id="menu">
<p class="welcome">Welcome, <b><?php echo htmlentities($user); ?></b></p>
<p class="logout"><a id="exit" href="#">Logout</a </p>
<div style="clear:both"></div>
</div>
<div id="chatbox"></div>
<form name="message" action="../new_private.php?n=<?php echo $_POST['to']; ?>" method="post">
<input name="usermsg" type="text" id="usermsg" size="63">
<input name="submitmsg" type="submit" id="submitmsg" value="Send">
<input name="from" type="hidden" value="<?php echo $user; ?>">
</form>
</div>
When I try it this way, I get an undefined error saying $_POST['to'] is not a valid index.
I would like to get the value of the input box "to" and put into the URL for the form under it. How can I achieve this?
Thanks in advance!
Alex
In HTML5, you can include <input> elements outside the <form> by using the form attribute with the value of the form's id.
For example...
<h1>[ <input type="text" name="n" id="to" placeholder="To" form="message"> ]</h1>
<!-- snip -->
<form id="message" action="../new_private.php" method="post">
The only difference here would be that the n field will be in $_POST instead of $_GET.
If you really need the value in the URL, you'll need some JavaScript. Something like this
<h1>[ <input type="text" name="to" id="to" placeholder="To"> ]</h1>
<!-- snip -->
<form name="message" action="../new_private.php" method="post">
<!-- form contents, etc -->
</form>
<script>
(function() { // IIFE so as not to pollute the global scope
const form = document.forms.message
const action = form.action // original action
document.getElementById('to').addEventListener('input', function() {
form.action = action + '?n=' + encodeURIComponent(this.value)
}, false)
})()
</script>
When the user clicks at the "Add New Job" link, a new form containing three fields will appear. That's the main form:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<h1>ADD NEW JOB +</h1>
//When clicked, it will show another form, with the same fields from the form above.
<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
<input type="text" value="Company" name="company2" />
<input type="text" value="Course" name="course2" />
<input type="date" value="Date" name="date2" />
</div>
I appreciate any help.
You can use jQuery .clone() to copy the original .job-content and then increment the form item names to replicate your example output.
This will also allow you to expand on the number of inputs if needed in the future without updating your JavaScript code.
$(function () {
var duplicates = 0,
$original = $('.job-content').clone(true);
function DuplicateForm () {
var newForm;
duplicates++;
newForm = $original.clone(true).insertBefore($('h1'));
$.each($('input', newForm), function(i, item) {
$(item).attr('name', $(item).attr('name') + duplicates);
});
$('<h2>JOB EXPERIENCE ' + (duplicates + 1) + '</h2>').insertBefore(newForm);
}
$('a[href="add-new-form"]').on('click', function (e) {
e.preventDefault();
DuplicateForm();
});
});
Working example - JSFiddle
Updated to clone the original job-content on page load so original form values are preserved.
It will add more form if u click "ADD NEW JOB +";
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<div id="concat"></div>
<h1>ADD NEW JOB +</h1>
<script>
$("#addfield").click(function(){
var detailContent = '<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>';
$('#concat').append(detailContent);
});
</script>
Use Jquery append method when the Button is clicked using click event
$('#id').click(function() {
var x=$("#formid").html();
$("body").append(x);
});
Working Fiddle: http://jsfiddle.net/2JgtT/
Note: you need somekind of logic to add more than 2 job fields.. this is just a sample.
HTML:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<div class="jobfields">
<h2>JOB EXPERIENCE 2</h2>
<div class="job-content">
<input type="text" value="Company" name="company2" />
<input type="text" value="Course" name="course2" />
<input type="date" value="Date" name="date2" />
</div>
</div>
<h1>ADD NEW JOB +</h1>
Jquery:
$(document).on("click", ".addjob", function (e) {
e.preventDefault();
$('.job-content').next('.jobfields').show();
});
OR this may be: http://jsfiddle.net/2JgtT/3/ look at the html, i have wrapped the divs in container
$(document).on("click", ".addjob", function (e) {
e.preventDefault();
addJobField();
});
function addJobField() {
$('.container').append("<div class='job-content'> " +
"<input type='text' value='Company' name='company' />" +
"<input type='text' value='Course' name='course' /> " +
"<input type='date' value='Date' name='date' /> </div>");
}
test
<div id="test1"></div>
<script>
$("#test").click(function(){
var detailContent = '<div>what portion need to add there</div>';
$('#test1').append(detailContent);
});
</script>
Try this:
Edited HTML:
<h2>JOB EXPERIENCE 1</h2>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
<h1 id="add_job">ADD NEW JOB +</h1>
JavaScript:
var i = 1;
$("#add_job").click(function() {
$("body").append("<h2>JOB EXPERIENCE "+ ++i + "</h2>");
$("body").append($(".job-content:nth-child(2)").clone());
});
HTML Explanation:
Nothing much edited but on the click of the hyperlink I made sure that it should return false or else it would link to another page.
JavaScript Explanation:
First I set a variable to one which is the number of job experiences that will be incremented every time the button is clicked. Then on the click of the h1 of the link I append two things in the body. The first is the h2 which is the heading for the job experiences and the second thing is the copy of the first form that is present already their.
A quick JQuery solution:
$("#add-new-form").on("click",function{
var form = '<form>
<div class="job-content">
<input type="text" value="Company" name="company" />
<input type="text" value="Course" name="course" />
<input type="date" value="Date" name="date" />
</div>
</form>';
$('body').append(form);
});
I have no means of testing but is this like something you were looking for?
I have two different forms which are being included in a php file. Their visibility is based on a onClick JS toggle function. The toggle works great. However if I was to fill only one of the forms out and click its respective submit button, I get sent back to the same page rather than the action.php file that i have specifed with this in the broswer:
http://localhost/?user_temp=f&pass_temp1=f&pass_temp2=ff&email_temp=f&answer1=3&submitbtn=Signup+Now
And this Javascript error: "TypeError undefined document.hform.sSecureUser
Both Forms also have their own javascripts to MD5 some data and sSecureUser comes from the Signup Form.
Interestingly, if I was to remove one of the inlcude forms leaving only the Submit form lets say, it would work. It seems that these forms' javascript is clashing with one another :/ ...
I tried this but it didnt work for me since each one of my forms is using java script. PLEASE HELP AND THANKS IN ADVANCE!!!... Let me know if you would like to see any of my forms, javascript, or php files...
Toggle Code:
<div>
Login
<div id="login-div" style="display:none">
<?php include($_SERVER['DOCUMENT_ROOT'].'/forms/login-form.php');?>
</div>
Sign up
<div id="signup-div" style="display:none">
<?php include($_SERVER['DOCUMENT_ROOT'].'/forms/signup-form.php'); ?>
</div>
<script type="text/javascript">
<!--
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == 'block'){
e.style.display = 'none';
}
else{
e.style.display = 'block';
}
}
//-->
</script>
</div>
Login Form:
<div id="hasJavaScript1" style="display:none">
<form name="login">
Username:
<input type="text" name="user_temp" size=32 maxlength=32><br>
Password:
<input type="password" name="pass_temp" size=32 maxlength=32><br>
<input onClick="passResponse(); return false;" type="submit" name="submitbtn" value="Login now">
</form>
<form action="/action/login-action.php" METHOD="POST" name="hform">
<input type="hidden" name="secureuser">
<input type="hidden" name="securepass">
</form>
</div>
<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript1').style.display = 'block';
function passResponse() {
document.hform.secureuser.value = MD5(document.login.user_temp.value);
document.hform.securepass.value = MD5(document.login.pass_temp.value);
document.login.pass_temp.value = "";
document.hform.submit();
}
// -->
</script>
SignUP Form:
<?php include ($_SERVER['DOCUMENT_ROOT'].'/functions/functions.php');?>
<div id="hasJavaScript" style="display:none">
<form name="signup">
<label>Username</label> <input type="text" name="user_temp" size=32 maxlength=32><span>alphanumeric, no spaces</span><br>
<label>Type password</label> <input type="password" name="pass_temp1" size=32 maxlength=32><span>alphanumeric, 8-12 long</span><br>
<label>Retype password</label> <input type="password" name="pass_temp2" size=32 maxlength=32><br>
<label>Email</label> <input type="text" name="email_temp" size=32 maxlength=32><br>
<label> What is: </label><?php $captchaArray = myCaptcha(); echo $captchaArray['equation'];?><br>
<label>Answer</label><input type="text" name="answer1">
<input onClick="passResponse1(); return false;" type="submit" name="submitbtn" value="Signup Now">
</form>
<form action="/action/signup-action.php" METHOD="POST" name="signup-hform">
<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">
<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
</form>
</div>
<script language="javascript" src="/js/md5.js"></script>
<script language="javascript">
<!--
document.getElementById('hasJavaScript').style.display = 'block';
function passResponse1() {
document.signup-hform.sSecureUser.value = MD5(document.signup.user_temp.value);
document.signup-hform.sSecurePass1.value = MD5(document.signup.pass_temp1.value);
document.signup.pass_temp1.value = "";
document.signup-hform.sSecurePass2.value = MD5(document.signup.pass_temp2.value);
document.signup.pass_temp2.value = "";
document.signup-hform.secureEmail.value = MD5(document.signup.email_temp.value);
document.signup-hform.answer2.value = document.signup.answer1.value;
document.signup.answer1.value = "";
document.signup-hform.submit();
}
// -->
</script>
One problem I see is that you do not specify any value attributes or values in your hidden fields:
<input type="hidden" name="sSecureUser">
<input type="hidden" name="sSecurePass1">
<input type="hidden" name="sSecurePass2">
<input type="hidden" name="secureEmail">
<input type="hidden" name="answer2">
But then in your JS, you're trying to access the value attribute.
document.hform.sSecureUser.value = ...
Try adding values to those. I would also give your hidden forms ids and use the document.getElementById() syntax instead of the document.hform.sSecureUser syntax.
As far as your form submits, you are suppressing the action of the first form, trying to fill in values for the hidden fields in the second form and then submitting that. Both of your scripts use the same name for the forms "hform". They need to be unique. I would also give them a unique id.
Another possible issue is this line:
<input type="hidden" name="checker" value=".<?php echo $captchaArray['answer'];?> .">
You're using the . for string concatenation, but it's not in an echo/print statement. I think it's supposed to be:
<input type="hidden" name="checker" value="<?php echo $captchaArray['answer'];?>">
to start off i am showing the user one file input field and they can click "add one" to add one input field, however when they have already chosen a file and afterwards click "add input field" the chosen files for all previous input fields disappear.
Is there a way to correct this?
here's my javascript function:
function _add_more() {
var txt = "<br><input type=\"file\" name=\"item_file[]\">";
document.getElementById("files").innerHTML += txt;
}
here's my html form:
<div id="form">
<h4>BOWMAN - Add an album back</h4>
<form method="post" action="procesblogpost.php" enctype="multipart/form-data">
<label for="title">Give the album it's name</label><br/>
<input type="text" id="title" name="title" /><br/><br/>
<label for="info">some info about the album?</label><br/>
<textarea id="info" name="info"></textarea><br/><br/>
<div id="uploadpic">
<label for="picturelink">now choose some pictures</label><br/>
<div id="files">
<input type="file" name="item_file[]">
</div>
+
</div>
<br/><br/>
<input type="submit" id="submit" name="submit" value="send it of to the www" />
</form>
</div>
You may try this
function _add_more() {
var txt = document.createElement('input');
txt.type="file";
txt.name="item_file[]";
document.getElementById("files").appendChild(txt);
}
DEMO.
i start with form tag the add name age phonenumber resume input boxes and a captcha but not able to send the form by ajax to a php file which will mail. when i send the mail the screen refreshes**
<form action="#" name="MYFORM" id="MYFORM">
<label>Name</label>
**then i put other labels**
<input name="name" size="30" type="text" id="name">
<br clear="all" />
<label>Email</label>
<input name="email" size="30" type="text" id="email">
<br clear="all" />
<div id="wrap" align="center">
<img src="get_captcha.php" alt="" id="captcha" />
<br clear="all" />
<input name="code" type="text" id="code">
</div>
<img src="refresh.jpg" width="25" alt="" id="refresh" />
<label> </label>
<input value="Send" type="submit" id="Send">
</form>
you can use SESSION in the file get_captcha.php to store the value of the captcha code and when you submit the code the match the post value of the captcha code entered by the user to the value saved in the SESSION .
Assuming you are looking for ajax form submit
$.ajax({
type:'POST',
url: 'yourphpfile.php',
data:$('#formid').serialize(),
success: function(response)
{
// do what ever you want with the repose
}
});
in your php file you specify the validation for the captcha by comparing the captcha value generated and stored in the session . if the captcha fails display the error using javascript based on the response you get