How to replace form text string with div text

up vote
0
down vote

favorite

I have a form and I am using an onkeyup event to search for matches within a database based on what the user types. That part is working just fine. Results trigger a hidden DIV to be shown with matches.

What I would then like to do is allow the user to click a matching result and using onclick have that result inserted into the text field the user was typing in.

Here is what I have:

HTML

Distributor

<font color="red"><b>*</b></font>

<input type="text"

       name="dist" 

       id="dist" 

       value="<? if (isset($dist)) {echo $dist;} ?>" required 

       onkeyup="sugdist(this.value);"/>

<br><br>

SCRIPT

function fillDist() {



var insertText = $(this).text();

   $('#dist').insert(insertText);

}

Here is what I have on the AJAX script side.

while ($result = $query ->fetch_object()) {

    echo "<div id='fillDist' OnClick='fillDist'>"

           .addslashes($result->name).

         "</div>";

}

It's not working, but its also not tripping any errors.

Any ideas?
Thanks

edited Nov 19 at 21:07

Ali

359214

asked Nov 19 at 19:43

Sabyre

228

Where's the rest of the function that runs when the user clicks the result?
– APAD1
Nov 19 at 21:09

add a comment |

up vote
0
down vote

favorite

What I would then like to do is allow the user to click a matching result and using onclick have that result inserted into the text field the user was typing in.

Here is what I have:

HTML

Distributor

<font color="red"><b>*</b></font>

<input type="text"

       name="dist" 

       id="dist" 

       value="<? if (isset($dist)) {echo $dist;} ?>" required 

       onkeyup="sugdist(this.value);"/>

<br><br>

SCRIPT

function fillDist() {



var insertText = $(this).text();

   $('#dist').insert(insertText);

}

Here is what I have on the AJAX script side.

while ($result = $query ->fetch_object()) {

    echo "<div id='fillDist' OnClick='fillDist'>"

           .addslashes($result->name).

         "</div>";

}

It's not working, but its also not tripping any errors.

Any ideas?
Thanks

edited Nov 19 at 21:07

Ali

359214

asked Nov 19 at 19:43

Sabyre

228

Where's the rest of the function that runs when the user clicks the result?
– APAD1
Nov 19 at 21:09

add a comment |

up vote
0
down vote

favorite

What I would then like to do is allow the user to click a matching result and using onclick have that result inserted into the text field the user was typing in.

Here is what I have:

HTML

Distributor

<font color="red"><b>*</b></font>

<input type="text"

       name="dist" 

       id="dist" 

       value="<? if (isset($dist)) {echo $dist;} ?>" required 

       onkeyup="sugdist(this.value);"/>

<br><br>

SCRIPT

function fillDist() {



var insertText = $(this).text();

   $('#dist').insert(insertText);

}

Here is what I have on the AJAX script side.

while ($result = $query ->fetch_object()) {

    echo "<div id='fillDist' OnClick='fillDist'>"

           .addslashes($result->name).

         "</div>";

}

It's not working, but its also not tripping any errors.

Any ideas?
Thanks

edited Nov 19 at 21:07

Ali

359214

asked Nov 19 at 19:43

Sabyre

228

What I would then like to do is allow the user to click a matching result and using onclick have that result inserted into the text field the user was typing in.

Here is what I have:

HTML

Distributor

<font color="red"><b>*</b></font>

<input type="text"

       name="dist" 

       id="dist" 

       value="<? if (isset($dist)) {echo $dist;} ?>" required 

       onkeyup="sugdist(this.value);"/>

<br><br>

SCRIPT

function fillDist() {



var insertText = $(this).text();

   $('#dist').insert(insertText);

}

Here is what I have on the AJAX script side.

while ($result = $query ->fetch_object()) {

    echo "<div id='fillDist' OnClick='fillDist'>"

           .addslashes($result->name).

         "</div>";

}

It's not working, but its also not tripping any errors.

Any ideas?
Thanks

jquery html ajax forms

edited Nov 19 at 21:07

Ali

359214

asked Nov 19 at 19:43

Sabyre

228

edited Nov 19 at 21:07

Ali

359214

asked Nov 19 at 19:43

Sabyre

228

edited Nov 19 at 21:07

Ali

359214

edited Nov 19 at 21:07

Ali

359214

edited Nov 19 at 21:07

Ali

359214

asked Nov 19 at 19:43

Sabyre

228

asked Nov 19 at 19:43

Sabyre

228

asked Nov 19 at 19:43

Sabyre

228

Where's the rest of the function that runs when the user clicks the result?
– APAD1
Nov 19 at 21:09

add a comment |

Where's the rest of the function that runs when the user clicks the result?
– APAD1
Nov 19 at 21:09

Where's the rest of the function that runs when the user clicks the result?
– APAD1
Nov 19 at 21:09

add a comment |

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

The flow is not so clear.
So, the AJAX script returns an HTML that has an onClick function.
I am assuming that the output is correctly added to your output div, because I see a simple error here:

OnClick='fillDist'

you should change it to

onClick='fillDist()'

to really call the function.

However, you have the jQuery tag and you are using it in some other operations, so you can avoid the inline onClick in the HTML code, and do it all javascript/jQuery side:

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

We are doing this:

$(document).on('click', '#dist', function() {});

and not this:

$('#dist').click(function() {});

Because the element is dynamically injected.

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

Please find the demo even here on codepen.

answered Nov 19 at 22:15

Lorenzo S

1,111917

This works brilliantly for adding the text in a div. I cannot get it to insert the text into the form field.
– Sabyre
Nov 20 at 15:33

Was able to do it with: $('#dist').val(text);
– Sabyre
Nov 20 at 15:41

add a comment |

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});

}
});

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53381580%2fhow-to-replace-form-text-string-with-div-text%23new-answer', 'question_page');
}
);

Post as a guest

Name

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

up vote
2
down vote

accepted

The flow is not so clear.
So, the AJAX script returns an HTML that has an onClick function.
I am assuming that the output is correctly added to your output div, because I see a simple error here:

OnClick='fillDist'

you should change it to

onClick='fillDist()'

to really call the function.

However, you have the jQuery tag and you are using it in some other operations, so you can avoid the inline onClick in the HTML code, and do it all javascript/jQuery side:

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

We are doing this:

$(document).on('click', '#dist', function() {});

and not this:

$('#dist').click(function() {});

Because the element is dynamically injected.

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

Please find the demo even here on codepen.

answered Nov 19 at 22:15

Lorenzo S

1,111917

This works brilliantly for adding the text in a div. I cannot get it to insert the text into the form field.
– Sabyre
Nov 20 at 15:33

Was able to do it with: $('#dist').val(text);
– Sabyre
Nov 20 at 15:41

add a comment |

up vote
2
down vote

accepted

The flow is not so clear.
So, the AJAX script returns an HTML that has an onClick function.
I am assuming that the output is correctly added to your output div, because I see a simple error here:

OnClick='fillDist'

you should change it to

onClick='fillDist()'

to really call the function.

However, you have the jQuery tag and you are using it in some other operations, so you can avoid the inline onClick in the HTML code, and do it all javascript/jQuery side:

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

We are doing this:

$(document).on('click', '#dist', function() {});

and not this:

$('#dist').click(function() {});

Because the element is dynamically injected.

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

Please find the demo even here on codepen.

answered Nov 19 at 22:15

Lorenzo S

1,111917

This works brilliantly for adding the text in a div. I cannot get it to insert the text into the form field.
– Sabyre
Nov 20 at 15:33

Was able to do it with: $('#dist').val(text);
– Sabyre
Nov 20 at 15:41

add a comment |

up vote
2
down vote

accepted

The flow is not so clear.
So, the AJAX script returns an HTML that has an onClick function.
I am assuming that the output is correctly added to your output div, because I see a simple error here:

OnClick='fillDist'

you should change it to

onClick='fillDist()'

to really call the function.

However, you have the jQuery tag and you are using it in some other operations, so you can avoid the inline onClick in the HTML code, and do it all javascript/jQuery side:

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

We are doing this:

$(document).on('click', '#dist', function() {});

and not this:

$('#dist').click(function() {});

Because the element is dynamically injected.

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

Please find the demo even here on codepen.

answered Nov 19 at 22:15

Lorenzo S

1,111917

The flow is not so clear.
So, the AJAX script returns an HTML that has an onClick function.
I am assuming that the output is correctly added to your output div, because I see a simple error here:

OnClick='fillDist'

you should change it to

onClick='fillDist()'

to really call the function.

However, you have the jQuery tag and you are using it in some other operations, so you can avoid the inline onClick in the HTML code, and do it all javascript/jQuery side:

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

We are doing this:

$(document).on('click', '#dist', function() {});

and not this:

$('#dist').click(function() {});

Because the element is dynamically injected.

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

Please find the demo even here on codepen.

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

$(document).on('click', '#fillDist', function() {

  const text = $(this).text();

  $('#dist').text(text);

});

#dist {

  margin: 20px;

  color: red;

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="dist">

  

</div>



<div id="fillDist">click me to add the same text to dist</div>

answered Nov 19 at 22:15

Lorenzo S

1,111917

answered Nov 19 at 22:15

Lorenzo S

1,111917

answered Nov 19 at 22:15

Lorenzo S

1,111917

answered Nov 19 at 22:15

Lorenzo S

1,111917

This works brilliantly for adding the text in a div. I cannot get it to insert the text into the form field.
– Sabyre
Nov 20 at 15:33

Was able to do it with: $('#dist').val(text);
– Sabyre
Nov 20 at 15:41

add a comment |

This works brilliantly for adding the text in a div. I cannot get it to insert the text into the form field.
– Sabyre
Nov 20 at 15:33

Was able to do it with: $('#dist').val(text);
– Sabyre
Nov 20 at 15:41

This works brilliantly for adding the text in a div. I cannot get it to insert the text into the form field.
– Sabyre
Nov 20 at 15:33

Was able to do it with: $('#dist').val(text);
– Sabyre
Nov 20 at 15:41

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

Some of your past answers have not been well-received, and you're in danger of being blocked from answering.

Please pay close attention to the following guidance:

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Argthtjtr