Form Variable Passing

Question

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">
 <!--<a href="#"><img src="/images/specialoffer/copun.png" /></a>-->
 <input type="image" src="/images/specialoffer/copun.png" onclick="formSubmit(0)" />
 </div>
</div>
</form>

• Zain Abid: my page name is sprcial_action.php not special_action.php

Answer 1

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;

• Alexei Levenkov: +1. Also not canceling default behavior may be the second half of the problem (after this navigation).

Answer 2

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.

Answer 3

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!!

Answer 4

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">
 <!--<a href="#"><img src="/images/specialoffer/copun.png" /></a>-->
 <input type="image" src="/images/specialoffer/copun.png" onclick="formSubmit(0)" />
 </div>
</div>
</form>