I know this question has been asked before multiple times on StackOverFlow. I have implemented a method to generate a text box for Button click event. But my issue is text box is already visible before performing the clicking. I need to view the text-box when someone clicks the button. I'll put my coding down below.
Coding for the text-field
<div id="inputField" style="display:none;">
<input type="text" id="textInput" value="" />
</div>
Coding for the Button click event
Click me
Just to make more sense, I'll attach a screenshot of my coding and the graphical view of the form.
I'm kindly requesting from everyone not to mark this question as duplicate. I did my best to fix this issue by my own. Though I'm a newbie to this field I couldn't make it up. Any help would be really appreciated. Thank you!
Try the html with:
<form method="post" action="?btnpressed=1">
Click me
</form>
And in the php:
<?php
if(isset($_GET['btnpressed']{
if(isset($_POST['btn']{ ?>
<div id="inputField" style="display:none;">
<input type="text" id="textInput" value="" />
</div>
<?php
}
}
?>
I hope this helps...
Related
I have a page that has multiple php forms that send me different informations depending on the user and the form. How do I make php differentiat these? I saw something about the actions and I thought maybe it was like having a separate file, but when I created a "questions.php" and copied and pasted my php code into that and then added "action="questions.php"" to the tag, and ran it just as I had before it didn't work. So what is the correct way to do this?
My code is extremely long and filled with words which is why it would be nice to have separate files for it depending on the form instead of all in the top of my main page.
You could build one page as a standard page. in this page you could include the different forms. See the example below:
<!-- These are just example names -->
<div class="form-1">
<?php include "forms/form-1.php"; ?>
</div>
<div class="form-2">
<?php include "forms/form-2.php"; ?>
</div>
<div class="form-1">
<?php include "forms/form-3.php"; ?>
</div>
If you would like to save data that a user puts in a form in lets say a database you should use the <form method="post"> by adding an action to it. You're asking the form to send the user to another page when the submit button is clicked. an example of a form down below.
<form class="form-1" method="post" action="second_page.php">
<label>Name:
<input type="text" class="input" name="name">
</label>
<label>Email:
<input type="email" class="input" name="email">
</label>
<button type="submit">Send!</button>
</form>
Hope this helps!
I just added a / before the questions.php. apparently it had to do with file path? I don't understand it but it works now.
<form action="questions.php" method="post">
<!-- text boxes to get user inputs-->
<button type="submit" value="submit_btn">click here to go to page in action tag
</button>
</form>
If questions.php file is in same folder action="questions.php" is enough. If its inside 'x' folder, correct path should be given as action="x/questions.php"
I'm creating plugin in Wordpress with more steps form, and I would like to take some advice from you.
I've one function (using shortcode) with first form, after submit, I'd like to go on next step, but I don't know which solution is the best
My function:
function task_shortcode(){ ?>
<form id="form" action="" method="post">
<h3>Add new task</h3>
<div class="task-title">
<label>Title</label>
<input type="text" id="text" name="text">
</div>
<div class="task-description">
<label>Description</label>
<textarea id="desc" name="desc"></textarea>
</div>
<div class="task-new">
<input type="submit" id="create-task" name="create_new_task" value="Create new task">
</div>
</form>
<?php
}
add_shortcode('task_site','task_shortcode');
After that I want to go to another form and I dont know how to handle it. Using classic php action on submit button, or is there another solution?
I've found this, but I don't know if I can use it, because I want it to use on frontend.
https://www.sitepoint.com/handling-post-requests-the-wordpress-way/
Thanks for every advice
I'm looking to modify the pagination in Magento in an order to give user an opportunity to switch to any page at any moment. To my mind it can be a text field, when somebody enters page number x, it will redirect to http://www.domainname.com/catalogpage.html?p=x
Any ideas of this php line?
<form action="catalogpage.html" method="post">
<input type="text" name="p">
<input type="submit">
</form>
Works?
I searched all day for the right answer on stackoverflow, also I couldn't find something helping me out.
Having a simple form like this:
<form action="process.php" method="post">
<input type="text" name="email">
<input type="password" name="password" id="password">
<button value="Login" type="submit" name="submit" onclick="formhash(this.form, this.form.password);"></button>
</form>
currently: Submitting the form redirects to process.php showing a success message & redirecting to another page after some time.
What I need: instead of redirecting to process.php a modal dialog box should open doing the work and showing a success message, closing the dialog box after some time and then doing a refresh of the actual side.
Any help is welcome!
Use ajax submit, JQuery already supports this. Try JQuery API http://api.jquery.com/ especially http://api.jquery.com/category/ajax/ Examples are provided on that site too.
This might be what you are looking for:
Message Box opens then disappears
There is also a similar question here on stackoverflow: Link
I have a php page with a form on it for adding people to a small group.
For each person being added, there is a with multiple form elements, each named according to the person's number. For example:
<div class="user">
<input type="text" name="user1LastName" />
...
</div>
<div class="user">
<input type="text" name="user2LastName" />
...
</div>
For each person in the database, the php page populates a form sections.
To add additional people, the user can click on a "+" icon, at which time the page uses jQuery to dynamically populate a new . To do this I am simply appending the new div html to the existing form. This means that the javascript page contains all the same html markup (to be appended), as the php page.
This seems like an unnecessary duplication of code. Whenever I change something in the php page, I also have to change it in the javascript code.
Is there any general method for avoiding such code duplication? The only thing I can think of is to use jQuery to grab the html from an already existing div. But in this case, the values of the form fields for user n will appear in the new code for user n+1.
Thanks.
Capisci :)?
<div class="user" id="user_1">
<input type="hidden" name="uid[0]" value="1"/>
<input type="text" name="lastname[0]" value="user480029"/>
...
</div>
<div class="user" id="user_2">
<input type="hidden" name="uid[1]" value="2"/>
<input type="text" name="lastname[1]" value="arto"/>
...
</div>
Now when adding another field just...
<div class="user" id="user_3943094103945">
<input type="hidden" name="uid[]" value=""/>
<input type="text" name="lastname[]" value=""/>
...
</div>
Then you iterate trough $_POST[] a do what you want.
You have user ID on .user, so I you delete user you can remove that part of HTML (this is more for UX), more importantly, you don't have hundreds of variables but just a few array which you can iterate in one loop. Hope you get the point. Cheers.
The php code should give the javascript a "prototype", which could be modified using javascript. That way, even if there aren't any users, the javascript would still work. This example is obviously missing lots of code (like forms), but it should give you an idea. I haven't tested it because I assume you have to make lots of modification anyways.
<script type="application/x-javascript">
addEventListener("load",function(){
document.getElementById("add-user").addEventListener("click",function(){
var node=document.getElementById("prototype-container").getElementsByClassName("users")[0].cloneNode(true),n=document.getElementById("add-user").getElementsByClassName("users").length,list=node.getElementsByTagName("input");
document.getElementById("user-list").appendChild(node);
node.id="users_"+(n+1);
for(var i=0;i<list.length;++i)
list[i].name&&(list[i].name+="["+n+"]");
},false);
},false);
</script>
</head>
<body>
<div id="prototype-container">
<? /* print out a div without any information in it */ ?>
</div>
<div id="user-list">
<? /* print out divs with some infomation in them */ ?>
</div>
<button id="add-user">add a user</button>