GET or import $var as input value to Form after the page is loaded - onClick Button?

Question

I have a FORM with 2 input fields $first_name and $last_name.

<?
$first_name = get_post_meta($post->ID, 'fname', true);
$last_name = get_post_meta($post->ID, 'lname', true);

$fname_tmp = 'Foo' ; // First Name TEMP
$lname_tmp = 'Bar' ; // Last Name TEMP
?>

<input type="text" value="<? echo $first_name;?>" name="first_name" />
<input type="text" value="<? echo $last_name;?>" name="last_name" />

I want to add a onClick "GET/IMPORT" Button/function in this form. So if a user press this button then inputs field first_name should show Foo and last_name should show Bar

How can I do this? Using PHP? Many thanks in advance.

Please use [`htmlspecialchars`](http://php.net/htmlspecialchars) when outputting to HTML to prevent [XSS](https://www.owasp.org/index.php/Cross-site_Scripting_%28XSS%29). And don't use short open tags ``. — Marcel Korpel, Nov 05 '13 at 16:07
@MarcelKorpel: Please give a example where I could use htmlspecialchars in this question and I will keep it in mind. I thought `` and ` — Cyborg, Nov 05 '13 at 16:17
No, `` is recommended against, see [Are PHP short tags acceptable to use?](http://stackoverflow.com/questions/200640/are-php-short-tags-acceptable-to-use) And you should use `value=""`, the same for `$last_name`. — Marcel Korpel, Nov 05 '13 at 16:20

Praveen · Answer 1 · 2013-11-05T17:10:20.153

1

Have a .php file which will respond to the onclick event triggered in the form.

<?php
$result['fname'] = 'FOO';
$result['lname'] = 'Bar';
echo json_encode($result);
?>

Write a jQuery function to trigger the event and receive response from php You can add this javascript code anywhere in your page, but between your is recommended.

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
        $('.button').click(function() {
            $.get('/path-to-php-file', function(data) {
                result = $.parseJSON(data);
                $("input[name='first_name']").val(result.fname);
                $("input[name='last_name']").val(result.lname);
            });
        });
    });
    </script>

Create a button in your form

<input class="button" type="button" value="Get/Import" />

edited Nov 05 '13 at 17:10

answered Nov 05 '13 at 16:20

Praveen

2,400
3
23
30

1

You can use `$.getJSON`, then you don't need to manually parse `data`. – Marcel Korpel Nov 05 '13 at 16:21
agreed...i just got used to this way of writing a jquery ajax requests – Praveen Nov 05 '13 at 16:25
I have never used jQuery before and are exited to try this code. Where in form should I put this jQuery code? Do I need to add anything extra to this code? Like opening and closing this function? Thanks – Cyborg Nov 05 '13 at 16:28
@Cyborg I have edited the post... Just add these codes into your page and set '/path-to'php-file' – Praveen Nov 05 '13 at 16:33
I tried this code now. But nothing happens when I press this Button.. It seems like this button is dead :( – Cyborg Nov 05 '13 at 16:46
put an alert('hello'); below this line $('.button').click(function() {, and see if you are getting the message when you click on the button, just to check if you have done things correctly. – Praveen Nov 05 '13 at 16:48
I tried to add alert('hello'); but still no results. I copied all codes as you wrote them. Created a test.php in same folder and changed '/path-to-php-file' to 'test.php' – Cyborg Nov 05 '13 at 17:05
Oops, i'm sorry i made a mistake... I missed in the first line.. I have updated my answer – Praveen Nov 05 '13 at 17:10
You are a HERO!!! Your updated CODE works now like a charm! :) Thank a MILLION. Now **alert** works also.. a Confirmation BOX comes up. Is it possible to put a second **die('')** option on this POP UP BOX? – Cyborg Nov 05 '13 at 17:25
i dont understand your question. do you want to use: http://api.jquery.com/die/ Also, Accept the answer if it worked... – Praveen Nov 05 '13 at 17:31

score 1 · Answer 2 · answered Nov 05 '13 at 16:26

I try it. it work. Here is your code.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" >
$(function() {
$(".buttonclass").click(function() 
{   
var fname_tmp = $("#fname_tmp").val();
if($("#fname_tmp").val()=='') fname_tmp="";

var last_name = $("#lname_tmp").val();
if($("#lname_tmp").val()=='') last_name="";

document.getElementById('first_name').value=fname_tmp;
document.getElementById('last_name').value=last_name;

});
});
</script>

<?php
//$first_name = get_post_meta($post->ID, 'fname', true);
//$last_name = get_post_meta($post->ID, 'lname', true);

$fname_tmp = 'Foo' ; // First Name TEMP
$lname_tmp = 'Bar' ; // Last Name TEMP
?>

<input type="hidden" name="fname_tmp" id="fname_tmp" value="Foo"/>
<input type="hidden" name="lname_tmp" id="lname_tmp" value="Bar"/>


<input type="text" value="<?php echo $first_name;?>" name="first_name" id="first_name"/>
<input type="text" value="<?php echo $last_name;?>" name="last_name" id="last_name"/>
<input type="button" name="mybutton" id="mybutton" value="Click Me" class="buttonclass" />

I tired this code and it works as I need. But I guess this code can be shorten or optimised? Cause actually I have about 70 values that I need to handle.. Doing it this way just feels wrong cause the code will be huge :( But it does the job what I ask for, do you have any suggestion to improve this code? Many Many Thanks.. — Cyborg, Nov 05 '13 at 17:17

GET or import $var as input value to Form after the page is loaded - onClick Button?

2 Answers2