current community

your communities

more stack exchange communities

company blog
Stack Exchange Inbox Reputation and Badges
tour help
Join the Stack Overflow Community
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other.
Join them; it only takes a minute:
Sign up
up vote 0 down vote favorite

I'm trying to pass a JavaScript variable to the value of an hidden input button to use in my PHP file output.

My HTML is:

<input type = "hidden"  id = "location2" name = "location2" value = ""/>

I'm using this onclick="myFunction();" in my "Submit Form" input to run the function as it is not able to be done in the window.load()

My JavaScript below is calling indexes from another function and assigning the text to the variable 'location' (I know this sounds strange but it was the only way I have got it to work so far):

function myFunction() {
var x = document.getElementById("box2").selectedIndex;
var y = document.getElementById("box2").options;
var location=(y[x].text);

 document.getElementById("location2").value=(location);

 }

Any help would be hugely appreciated as I am really struggling and have been working on this for some time (as you can probably tell, I dont really know what I'm doing) - I just need to call the value of this variable into my PHP file output and the majority of my web form is completed.

Thanks very much

Marcus

I've just changed my HTML as follows I've removed myFunction from my submit

I've added the following HTML button:

 <button onclick="myFunction();" id = "location2" name = "location2" value="">Click me</button>

The variable is now passing!!!! The only problem is when I press the onclick button, it is now submitting my form!!

Is it okay for me to replace my previous submit button with this code??

THANKS TO EVERYONE FOR THEIR HELP ON THIS!!

share|improve this question
    
Your code looks fine, please verify the browser console for errors – Arvind Mar 31 '15 at 5:15
    
Hi Arvind - sorry, I only just saw your comment. I'm not sure how to verify the browser console, I'll look into how to do that. Thanks for checking my code!! – Marcus Macmillan Apr 2 '15 at 3:33
    
Hi Arvind if I change my function to run from this input button <input type = "button" onclick="myFunction();" id = "location2" name = "location2" value=""/> it actually writes the value of the variable onto the input button!!! – Marcus Macmillan Apr 2 '15 at 3:41
    
Hi Arvin - thanks for your help, have edited my code in my original post and it is now working. Would you mind having a look please and advising on my last question. – Marcus Macmillan Apr 2 '15 at 4:15
up vote 1 down vote accepted

I Was not sure what you doing but below example may help you. It will post the value as well as the option text.

Here we are using print_r to print the $_POST array from the AJAX Request. using this method, you should be able to debug the issue.

<!DOCTYPE html>
<html>
<body>
<?php if($_POST) { 
    print_r($_POST); die;
} ?>
<form name="" id="" method="post" >
Select a fruit and click the button:
<select id="mySelect">
  <option>Apple</option>
  <option>Orange</option>
  <option>Pineapple</option>
  <option>Banana</option>
</select>
<input type = "hidden"  id = "location2" name = "location2" value = ""/>
<input type = "hidden"  id = "locationname" name = "locationname" value = ""/>
<button type="submit" id="submit">Display index</button>
</form>
<script>
function myFunction() {
    var x = document.getElementById("mySelect").selectedIndex;
    var y = document.getElementById("mySelect").options;
        //alert("Index: " + y[x].index + " is " + y[x].text);
    document.getElementById("location2").value=(y[x].index);
        document.getElementById("locationname").value=(y[x].text);
    //alert($("#location2").val());
}

var submit = document.getElementById('submit');
submit.onsubmit = function(e){
    myFunction();
};


</script>
</body>
</html>
share|improve this answer
1  
Thanks r3wt to update – Mukesh25 Mar 31 '15 at 9:17
    
Thanks heaps for this Ashmik, not quite working for me as yet but will continue on with this track - cheers Marcus – Marcus Macmillan Apr 2 '15 at 2:25
up vote 0 down vote

i'm assuming your form method is 'POST' and action value is the same php page where you are expecting to see the 'location2' hidden input value, if that is the case, you can use $_POST['location2'] to get the value in that php page.

share|improve this answer
    
Hi Kris - thanks for your help, this is what I was doing, but for some reason it's not working - very frustrating!! – Marcus Macmillan Apr 2 '15 at 2:26
up vote 0 down vote

Yes it is fine to use button tag by default it acts like the submit button inside the form tag. You can also make it act like button(won't submit the form) by using the attribute type='button'.

Edited

button or input type='submit' can submit the form only when it is placed within the form tag(without javascript).

<form action='http://www.stackoverflow.com/'>
  <button>stackoverflow</button> <!-- this works -->
</form>

<form action='http://www.stackoverflow.com/'></form>
<button>stackoverflow</button><!-- this won't work -->

var go = function() {
  document.forms[0].submit();
};
<form action='http://www.stackoverflow.com/'></form>
<button onclick='go()'>stackoverflow</button><!-- still works -->

share|improve this answer
    
Hi Arvind I just moved my button down the page and commented out my submit button. The form is now not submitting. thanks for your help – Marcus Macmillan Apr 2 '15 at 4:48
    
Sorry Arvind - is working now - thanks heaps, really appreciate your help, I have been working on this problem for a couple of weeks and was giving up hope of getting it resolved, so relieved - can enjoy my easter break now !! – Marcus Macmillan Apr 2 '15 at 5:02
    
@MarcusMacmillan, glad it helped you, now you may accept the answer. – Arvind Apr 2 '15 at 5:07
    
@MarcusMacmillan, glad it helped you, now you may accept the answer. – Arvind Apr 2 '15 at 5:07

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.