I have a basic form that I am using as a dummy to test some JavaScript functionality. My goal is to click the submit button and have submission paused until a javascript function is executed, then submit the form after that. the code I currently have is below, but the submission of the form is not prevented, and the hidden field's value is never set. can someone explain why this is happening?
NOTE I am aware of a jQuery method of performing the same functionality. I am specifically trying to solve this problem without using jQuery. If your only answer is "jQuery is better", please do not bother.
<html>
<head>
<script type="text/javascript">
function test(){
document.getElementById("hidden").value="hidden";
var queryString = $('#decisionform').formSerialize();
alert(queryString);
document.getElementById("form").submit();
}
</script>
</head>
<body>
<?php
if ($_POST){
foreach ($_POST as $key=>$value){
echo "<b>$key</b> $value<br>";
}
}
?>
<form action="hello.php" method="post" id="form">
<input name="first" type="text" />
<input name="second" type="text" />
<input name="third" type="text" />
<input name="hidden" type="hidden" />
<input name="submit" type="submit" value="Submit" onclick="test();return false;" />
</form>
</body>
</html>
You don't have an element with the id hidden so document.getElementById("hidden").value="hidden"; will throw an error as you can't set properties on undefined. The script will stop running and never reach return false so the form will submit as normal.
try <form action="hello.php" method="post" id="form" onsubmit="test(); return false;">
to prevent a submit, you actually need to have a return false, in the onsubmit even of the form itself
along with not having an id on the hidden field.
<input name="submit" type="submit" value="Submit" onclick="test();return false;" />
use a regular button in this case because your function is performing the submit.
<input name="submit" type="button" value="Submit" onclick="test()" />
You're missing the id attribute from your input element. Modify <input name="hidden" type="hidden" /> to <input name="hidden" type="hidden" id="hidden" />.
You can use
onclick="return test()"
and just return false at the end of the function.
Add id="hidden" to your input, like this:
<input name="hidden" type="hidden" id="hidden" />
Related
I just cant get around this simple requirement. I am new to PHP and need help.
I need to capture the value in a Search Box and then pass it in the URL which opens in a new tab when hit on Submit.
What am I missing here..it seems like I am missing a lot of things for this to work..
<?php
if (isset($_POST["submit"])){
$example = $_post['searchon'];
echo '<a target = '_blank' href=http://www.amazon.in/s/ref=nb_sb_noss_1?url=search-alias%3Daps&field-keywords=.$example.&tag=orientmarketi-21></a>';
}
?>
<form action="index.php" method="post">
<input type="search" name="searchon" id="searchon" />
<input type="submit" name ="submit" />
</form>
try this code instead of your one:
<form action="http://www.amazon.in/s/ref=nb_sb_noss_1" method="get" target="_blank">
<input type="hidden" name="url" value="search-alias=aps" />
<input type="hidden" name="tag" value="orientmarketi-21" />
<input type="text" name="field-keywords"/>
<input type="submit" />
</form>
I'm trying to figure out how to send data from one php function to another through using a submit button. The idea is that a spellchecker will highlight the correct spelling for a word, and the user will click the button to run the program again with the correct spelling.
<form method="post" action="results.php">
<input type="submit" value="Search!" name="submit" id="searchButton"
value="<?php
$search = "dog";
$_POST[$search]
?>"
/>
This is what I have so far...
Also, is it possible for the value of a button to be a variable?
You can use hidden variables as an alternative to ajax.
<input type="hidden" value="dog" id="search" />
<input type="submit" value="Submit" />
I have this javascript line
<script type="text/javascript">document.write(top.location);</script>
and this code
<form action="rating.php" method="post">
<input type="hidden" name="url" value="xxxx" />
<input type="submit" />
</form>
<?
echo $_POST["url"];
?>
Please, How i can add the value of javascript (xxx) in the hidden field?
Also does it possible to let <input type="submit" />have automatic submit ?
Thanks
Do you mean this, in order to feed the hidden field?
<input type="hidden" name="url" value="<? echo $_POST["url"]; ?>" />
Regarding submit, you can use javascript to handle the submit event:
If you add the attribute name="FORMNAME" inside the <form ... > tag, you can use:
document.FORMNAME.submit();
for submitting the form, without using the submit button.
In order to feed a hidden field through javascript, use:
document.FORMNAME.url.value = top.location;
I have this form :
<form action="index.php?explore=browse" method="post">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a onclick="this.form.artist.value=all; this.form.submit();return false" href="#">All</a>
</form>
and I'd like to know :
Why it doenst put the value "all" to the artist field?
Is this Javascript? Or easy HTML?
Is better translate this with jQuery/JS Handler or this is better? (light, crossbrowsers..and so on)
Hope you can help me!
You need to change the
this.form.artist.value=all;
to
this.parentNode.artist.value='all';
The way you use it makes two wrong assumptions
it assumes that links inside a form have a form attribute.. They do not. Only input elements have a form attribute. Using parentNode should do the trick for you particular case since the link is a direct child of the form element.
it expects a variable with name all exists and it tries to put the content of that variable in the input.
Making all be a string by wrapping it to single quotes ' should do what you want.
demo at http://jsfiddle.net/gaby/vzuFD/
With jQuery you could do
<form action="index.php?explore=browse" method="post">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a id="all" href="#">All</a>
</form>
and
<script type="text/javascript">
$(function(){
$('#all').click(function(){
$(this)
.closest('form')
.find(':input[name=artist]')
.val('all')
.end()
.submit();
});
});
</script>
demo at http://jsfiddle.net/gaby/vzuFD/1/
If you want to use this JavaScript line then change your code with: this.form.artist.value="all"
Yes it is HTML with simple inline JavaScript.
You can use JQuery also by following changing :
First change your HTML Code with the following:
<form action="index.php?explore=browse" method="post">
<input type="hidden" id="artist" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a id="linkAll" href="#">All</a>
</form>
Then use the following jQuery :
$('#linkAll').click( function(){
$('#artist').val('All');
});
all is a reference to a variable that does not exist. 'all' is a string containing the text "all".
Additionally, you assume that this.form exists (but it likely doesn't). You could use parentNode instead, but this may stop working if you move the <a> tag.
So:
<form action="index.php?explore=browse" method="post">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
<a onclick="this.parentNode.artist.value='all'; this.parentNode.submit();return false" href="#">All</a>
It's usually preferred not to write onclick handlers inside HTML, instead writing all your Javascript elsewhere in a dedicated Javascript block/file. It keeps things nice and separated.
We also prefer e.preventDefault to return false, here, though that's a little trickier to make cross-browser so I'll leave it for another question.)
Here's an example demonstrating an overall better solution:
<form action="index.php?explore=browse" method="post" id="theForm">
<input type="hidden" name="artist" value="<?=$artist?>" />
<input type="hidden" name="event" value="<?=$event?>" />
<input type="hidden" name="date" value="<?=$date?>" />
All
</form>
<script type="text/javascript">
var theLink = document.getElementById('theLink');
var theForm = document.getElementById('theForm');
theLink.onclick = function() {
theForm.artist.value = 'all';
theForm.submit();
return false;
};
</script>
A version of this with the use of jQuery might look like:
<script type="text/javascript">
var $theLink = $('#theLink');
var $theForm = $('#theForm');
$theLink.click(function() {
$theForm.find('[name=artist]').val('all');
$theForm.submit();
return false;
});
</script>
I'm trying to build a form using php & jquery, but I'm a little confused as to what to do with the jquery portion of it...
Basically, when the user submits the first form, I want to direct them to the "next step" form, but I want to retain the values submitted from the first one in a hidden input field...
If someone can either show me how or point me to a good tutorial, I'd appreciate it...
I don't have any of the php or jquery yet, and this is just a simplified version of the html markup...
//first.php
<form name="form1" method="post" action="second.php">
<input type="text" name="name" value="" />Name
<input type="submit" name="step1" value="Next" />
</form>
//second.php
<form name="form2" method="post" action="process.php">
<input type="hidden" name="name" value="{$_POST['name']}" />
<input type="text" name="message" value="" />message
<input type="submit" name="step2" value="Finish" />
</form>
<input type="hidden" name="name" value="{$_POST['name']}" />
should be,
<input type="hidden" name="name" value="<?php echo $_POST['name']}; ?>" />
and also sanitize the input, if you want
I don't no if there is a better way to do that.
But, when I need to do such thing, I do in this way:
<script>
<?php
foreach($_POST as $key => $valule)
{
echo "$('$key').val('$value')";
}
?>
</script>
So, in your nextstep file, all you'll need to do is set up the hidden fields and then just loop through the post vars and set each one via jquery.