I am trying to create a basic form with one text field. When a user inputs a code into the text field. Then when they click submit I will have an iframe pop up with the url + their text field value.
Everything looks to me like it is setup correctly but the fancybox loading screen never goes away and iframe never shows.
This is my sample of what is not currently working:
<form id="Form" onsubmit="fancybox.iframe('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
<input type="text" name="Event">
</form>
<?PHP
$eventid = $_POST['Event'];
echo '<a class="fancybox fancybox.iframe" href="http://www.regonline.com/eventinfo.asp?eventid='. $eventid .'">Submit</a>';
?>
This does work but it opens another window and I cannot get it working with fancybox iframe:
<form id="Form" onsubmit="window.open('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);return false;" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="/Contact/tabid/59/Default.aspx" method="post" name="Form">
<input type="text" name="Event">
<br>
<a class="event" onclick="window.open('http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value);" href="#">Submit</a>
</form>
I'm sure this is super simple for the right set of eyes, be gentle ;)
It seems like you're missing some code or you didn't paste it all.
Where is the form submission handled? I see you have a link and the href is what you want for the iframe value, but I'm not understanding the connection between it all.
If on clicking the link it populates the input field called Event, then you're actually populating it with the whole url. If you're then using that field to populate the iframe in your onsubmit line, then you're actually appending the whole url to the url again, creating a url like this in the end: http://www.regonline.com/eventinfo.asp?eventid=http://www.regonline.com/eventinfo.asp?eventid=SOME_ID_NUMBER
Without seeing all the code, I'm speculating that you really want the href in the submit link to only include the $eventid value and not the whole URL.
So your code might need to be:
echo '<a class="fancybox fancybox.iframe" href="'. $eventid .'">Submit</a>';
Thanks for the help guys, this is actually what I was looking for and somehow I ended up getting it right. Thanks again for the help
<form id="Form" autocomplete="off" style="height: 100%;" enctype="multipart/form-data" action="" method="post" name="Form">
<input type="text" name="Event">
<br>
<a id="event-link" class="event" href="#">Submit</a>
</form>
<script>
$('#event-link').click(function () {
$.fancybox({
type: 'iframe',
href: 'http://www.regonline.com/eventinfo.asp?eventid=' + document.Form.Event.value
});
});
</script>
Related
i got this annoying problem i can't figure out how to solve
After a quick research i found those links bellow, which i could partially make work
verifying if checkbox is checked in php
How to read if a checkbox is checked in PHP?
This is my html:
<form method="post">
<!-- CHECK BOX TIPO DE PRODUTO (INTEIRO/PEDAÇO) !-->
<input type="checkbox" name="stipo" id="stipo" value="1" onchange="document.getElementById('tipo').disabled = !this.checked;">Tipo
<select name="tipo" id="tipo" disabled="false">
<option value="Inteiro">Inteiro</option>
<option value="Pedaço">Pedaço</option>
</select><br>
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
</form>
and this is my php:
if ($_POST['stipo'] == 1){
echo "123";
} else {
echo "456";
}
Because at the Html code im using form like this:
<form method="post">
</form>
and making the post with a submit button like that:
<input type="submit" href="/consulta/consulta_produto.php" class="loader" value="Consultar">
It doesn't work due to the Href at the submit button.
However, if i do the Html code like this:
<form action="/consulta/consulta_produto.php" method="post">
<input type="submit" class="loader" value="Consultar">
</form>
It will work. But, the problem of the form above is that my script stop working. I Cant use the method above because i need Href into the submit button, because when i submit the form, im loading the next page inside a Div
Just in case it helps, this is my Javascript and why i need the Href
<script type="text/javascript">
$(function() {
$('.loader').click(function(event) {
event.preventDefault(); // stop the link loading the URL in href
$('#content').load($(this).attr('href'));
});
});
</script>
Anyone got some idea on how to make the POST method works with href instead of action on the form?
I am very new to php, I am having a problem passing data from textbox to a php variable to use it in an anchor tag. Below is the code i am using.
<form id="searchform" action="fetchvalues.php" method="get">
<input name="q" id="q" type="text" />
<input name="searchbutton" id="go" type="submit" value="" />
</form>
I want to pass value from searchbutton to anchor tag
Hello"
If you are using jquery in your project and want to do this on the front end, you can do:
<a id="someLink" href="http://www.example.com/?q=var" target="_blank">Hello"</a>
$('#someLink').attr('href', "http://www.example.com/?q=" + $('q').val());
With php you'd only be able to set the entered value of q on a post. (meaning when someone submits the form)
i.e.
Hello"
IF you need to populate the link href without a page refresh, you'll need to use javascript, if you want it to be populated after a form post, you can use php.
Be aware though that the link would need to be on the page set in your forms action attribute to populate the link
You should be aware that you take precautions when echoing out form submissions, however the level of questions suggests you've got more to learn before that. (No offense intended)
<form id="searchform" action="fetchvalues.php" method="get">
<input name="q" id="q" type="text" />
<input name="searchbutton" id="go" type="submit" value="" />
</form>
On your fetchvalues.php page
<?php
$val = $_GET['q'];
?>
then
Hello
You can do like this
<?php
if(isset($_REQUEST['searchbutton']))
{
?>
Hello
<?php
}
?>
Here I used JavaScript to Delete an employee...
<script type="text/javascript">
function delet(emp)
{
var answer = confirm('Are you sure?');
if(answer)
{
window.location='delete.php?emp='+emp;
}
}
</script>
By using anchor tag am calling the function of javascript ....
<a onclick="javascript:delet('<? echo $_GET['emp']; ?>')">
<input type="button" name="delete" id="delete" style="background: url('images/del1.jpg')no-repeat;width:50px;height:50px" value=""/></a>
But my problem is it is working upto showing the alert msg but after answering the alert msg it is not redirecting to the page given by me that is "delete.php?emp=+emp"
Because you're nesting an <input type="Submit"/> inside an <a>, clicking the button is not the same as clicking the <a>, rather it "Submits" nowhere (read to the page you're already on, refreshing the page) before the <a> can do it's job.
Simple demo where you don't go to google.
<input type="Submit"/>
Bergi has pointed out that the behaviour I described is not universal (hello Opera, IE) unless a <form> element is present, so for example the following
<form action="jail.php">
<a href="go.php" onclick="window.location='?collect=£200';">
<input type="submit"/>
</a>
</form>
will send you directly to jail without passing go or collecting £200 across all browsers.
Further, this only really applies to page redirection; other pieces of script may well fire before the page changes, the easiest to observe being console.log, alert, etc.
You're submitting some form by clicking on that button. That submit process will overrule the window.location navigation request. A quick workaround would be to prevent that:
<a onclick="event.preventDefault(); delet('<? echo $_GET['emp']; ?>');">
// cross-browser-safe:
<a onclick="delet('<? echo $_GET['emp']; ?>'); return false">
but actually your markup with the nested button is quite odd. You don't need that link at all, just use
<form action="delete.php" onsubmit="return confirm('Are you sure');">
<input type="hidden" name="emp" value="<? echo $_GET['emp']; ?>" />
<input type="submit" name="delete" id="delete" style="background: url('images/del1.jpg')no-repeat;width:50px;height:50px" value="" />
</form>
I got a newletter php form, so what I need is to hide the html input after the user click the submiting button, my code looks like this:
<form id="addressForm" action="index.php" method="get">
<p id="foarm">
<input type="text" name="address" id="address" placeholder="mail#example.com"/><br />
<input type="submit" value="Notificame" id="gogo" />
</p>
<p id="response"><?php echo(storeAddress()); ?></p>
</form>
Any ideas?
Thanks.
Use jquery to hide the form when the submit button is pressed. Something like
$("form#addressForm").submit(function()
{
$("form#addressForm").hide();
return true;
}
Should do it. You could do it without jquery, just using javascript - basically add an onclick event to change the css of the form to display:none when you click submit. Id probably suggest placing it in a div section for ease.
I'm using a WordPress sidebar widget to capture email addresses. The thing is, it redirects after form submission. I want the visitor to stay on the page they were on after form submission with just a hidden div giving a successful signup message.
I've tried something with javascript like this --
<script type="text/javascript">
function showHide() {
var div = document.getElementById("hidden_div");
if (div.style.display == 'none') {
div.style.display = '';
}
else {
div.style.display = 'none';
}
}
</script>
And that works perfectly for showing the hidden div on submit, but the actual form then doesn't work :(
The form (with what I was trying to do) is like this --
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The problem is coming in somewhere between 'return false' and the form action (which is where the plugin's coder has made it redirect I think). If I remove 'return false', it redirects. With 'return false' there, the form doesn't work. I can't figure out a way to get the form to work but not redirect, ie. just show the hidden div, work, and that's it! No redirect :) Would appreciate your help.
I will show how to submit the form with jQuery, as this is what you have available to you:
First of all, you should make one small change to the form HTML. Namely, change showHide() to showHide(this), which will give showHide() access to the form element. The HTML should be:
<div id="wp_email_capture"><form name="wp_email_capture" method="post" onsubmit="showHide(this); return false;" action="<?php echo $url; ?>">
<label class="wp-email-capture-name">Name:</label> <input name="wp-email-capture-name" type="text" class="wp-email-capture-name"><br/>
<label class="wp-email-capture-email">Email:</label> <input name="wp-email-capture-email" type="text" class="wp-email-capture-email"><br/>
<input type="hidden" name="wp_capture_action" value="1">
<input name="submit" type="submit" value="Submit" class="wp-email-capture-submit">
</form>
<div id="hidden_div" style="display:none"><p>Form successfully submitted.</p>
</div>
The javascript to submit the form and display the div on successful submit is:
function showHide(form) {
var serial = $(form).serialize();
$.post(form.action, serial, function(){
$('#hidden_div').show();
});
};
What this does:
Serializes the form data, i.e. converts it to one long string such as wp-email-capture-name=&wp-email-capture-email=&wp_capture_action=1 that is stored in serial.
Submits the serialized data to the the form's action url (form.action)
If the form submit was successful, it runs the success handler, which is the third parameter to $.post(). This handler takes care of displaying the hidden div. I changed the code to use jQuery's .show() function, which takes care of browser inconsistencies.
Hope this is helpful.