CODEWITHSUNDEEP
javascriptphphtmlvariables
Marcus Macmillan
Marcus Macmillan

Reputation: 13

pass JavaScript variable to HTML input box and (to use in PHP file)

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

Upvotes: 1

Views: 2723

Answers (3)

user2575725
user2575725

Reputation:

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

Upvotes: 0

Mukesh S
Mukesh S

Reputation: 377

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>

Upvotes: 1

Sai
Sai

Reputation: 361

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.

Upvotes: 0

Related Questions